Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come cambiare il colore del testo in WordPress (4 metodi semplici)

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Volete cambiare il colore del testo in WordPress?

Il colore può attirare l’attenzione sui contenuti più importanti di una pagina e rafforzare il branding del sito. La modifica del colore del testo può anche rendere il sito più facile da leggere, soprattutto per le persone con problemi di vista.

In questa guida vi mostreremo come cambiare facilmente il colore del testo sul vostro sito WordPress.

How to change the text color in WordPress

Perché cambiare il colore del testo in WordPress?

Ci sono molti motivi per cui potreste voler cambiare il colore del testo in WordPress. Forse volete mettere in evidenza un invito all’azione su una pagina di destinazione, o forse volete usare dei sottotitoli colorati sul vostro sito.

A volte si può anche voler cambiare il colore del testo in un intero sito web. Ad esempio, forse il vostro tema WordPress utilizza un colore grigio per i caratteri, ma voi preferite usare il nero per un migliore contrasto con il colore dello sfondo.

Potete anche usare il colore per suscitare un’emozione nei vostri visitatori. Ad esempio, molti pensano che il blu crei un senso di fiducia e affidabilità. Per saperne di più, consultate la nostra guida su come scegliere uno schema di colori perfetto per il vostro sito WordPress.

Detto questo, vediamo come cambiare il colore del testo in WordPress. Utilizzate i link sottostanti per passare al metodo che preferite:

Metodo 1: Utilizzo dell’editor a blocchi (migliore per piccole quantità di testo)

Se volete modificare solo alcune parole, un paragrafo o un titolo all’interno di un post, potete utilizzare l’editor di contenuti di WordPress.

Per iniziare, aprire il post o la pagina in cui si desidera modificare il colore del testo o creare una nuova pagina.

Se non l’avete ancora fatto, digitate il testo che volete personalizzare. A seconda del testo, potrebbe essere necessario aggiungere un paragrafo, un’intestazione o un altro blocco che accetti del testo. Per un aiuto in questo senso, date un’occhiata alla nostra guida su come utilizzare l’editor di blocchi di WordPress.

Non appena si dispone di un testo, si è pronti a cambiarne il colore.

Modifica del colore del testo di un blocco

In questo primo esempio, cambieremo il colore del testo per un intero blocco. Questo è un buon modo per evidenziare un’intera sezione di contenuto, ad esempio un intero paragrafo.

È sufficiente fare clic sul blocco e selezionare la scheda “Blocco” nel menu di destra.

Changing the text color of a WordPress block

Una volta fatto ciò, trovare la sezione “Colore” e fare clic su “Testo”.

L’editor visuale mostrerà ora alcuni colori che completano il tema di WordPress. È sufficiente fare clic su un colore per cambiare tutto il testo all’interno di quel blocco.

Choosing a color from your WordPress theme

Per utilizzare un colore diverso, è sufficiente fare clic sulla casella in cima al popup.

Si aprirà un selettore in cui si potrà scegliere un nuovo colore di carattere.

Customizing your text using the color picker

Un’altra opzione è quella di digitare un codice esadecimale, ovvero il codice HTML di un particolare colore. È utile se si desidera utilizzare un colore molto specifico, come l’esatta tonalità di rosso del logo del sito web.

Se non si è sicuri del codice esadecimale da utilizzare, può essere utile consultare un sito come HTML color codes. Qui è possibile esplorare i diversi colori e ottenere i relativi codici esadecimali.

Una volta ottenuto il codice, incollarlo o digitarlo nella casella “Hex”.

Customizing text using a hex code

Se si cambia idea e si desidera ripristinare il colore del testo predefinito, è sufficiente fare clic sul pulsante tratteggiato nel menu di destra.

Le opzioni visualizzate variano a seconda che sia stato modificato anche il colore di sfondo del blocco, per cui potrebbe essere necessario fare clic su “Testo” o “Ripristina tutto”.

Restoring the theme's default text color

Modifica del colore del testo di una parola o di una frase

A volte, è possibile che si voglia cambiare il colore solo di una particolare parola, frase o frase, come ad esempio l’invito all’azione nella pagina di vendita.

Per farlo, basta evidenziare la parola o la frase che si desidera modificare nell’editor di blocchi di WordPress. Quindi, fate clic sulla piccola freccia verso il basso nella barra degli strumenti dell’editor di contenuti e fate clic su “Evidenzia”.

Changing the text color for specific words in WordPress

Si apre un popup che mostra alcuni colori che si abbinano bene al tema corrente.

È anche possibile scegliere un colore manualmente o utilizzare un codice esadecimale seguendo lo stesso procedimento descritto sopra.

How to change the text color in WordPress

Metodo 2: Usare il Theme Customizer (solo per i temi classici)

Il colore può attirare l’attenzione sui contenuti più importanti di una pagina, ma molti colori diversi possono risultare eccessivi. Per questo motivo, in genere si consiglia di utilizzare lo stesso colore di testo per la maggior parte del sito WordPress.

Modificare manualmente ogni pagina e post utilizzando l’editor di blocchi richiederebbe molto tempo, quindi consigliamo di modificare il tema stesso utilizzando il personalizzatore di temi.

Per iniziare, andare su Aspetto ” Personalizza.

The WordPress theme customizer

Ora è necessario trovare le impostazioni del testo del tema. Ogni tema è diverso, ma in genere è necessario cercare l’opzione “Tipografia”.

Nelle nostre immagini, utilizziamo OceanWP.

The theme customizer Typography settings

Fare clic su “Tipografia” o su un’impostazione simile. A questo punto, di solito vengono visualizzati tutti i diversi tipi di testo utilizzati nel tema, come l’intestazione 1 e il titolo della pagina.

Per modificare il testo all’interno dei post e delle pagine, fare clic sulla sezione “Corpo” o simile.

Changing the body text color using the WordPress theme customizer

Per personalizzare il colore del testo, si veda la sezione ‘Colore carattere’.

Quindi, fare clic su “Seleziona colore”.

The font color selector

Si aprirà il selezionatore. È possibile utilizzare uno dei colori già pronti, scegliere un nuovo colore utilizzando le impostazioni o digitare un codice esadecimale.

Se si desidera ripristinare il colore predefinito del tema in qualsiasi momento, è sufficiente fare clic su “Predefinito”.

The color picker settings in the theme customizer

È inoltre possibile utilizzare queste impostazioni per modificare la dimensione dei caratteri, lo stile, la spaziatura delle lettere e altro ancora.

Quando si è soddisfatti dell’aspetto del testo, fare clic sul pulsante “Pubblica” nella parte superiore dello schermo.

Metodo 3: Utilizzo dell’editor completo del sito (solo per i temi a blocchi)

Se si utilizza un tema a blocchi come ThemeIsle Hestia Pro o Twenty Twenty-Three, il processo di modifica del colore del testo del tema è leggermente diverso.

Per personalizzare il testo utilizzando l’Editor completo del sito, andare su Temi “ Editor.

Selecting the Full-Site Editor from the WordPress admin panel

A questo punto, si vedranno diversi menu per personalizzare l’aspetto del sito web.

Qui si deve selezionare “Stili”. Questa sezione definisce i colori globali, la tipografia e il layout del sito.

Choosing Styles in the Full Site Editor

Nella schermata successiva, si vedranno alcune combinazioni di stili tra cui scegliere. Se si desidera cambiare completamente l’aspetto del tema del blocco, è sufficiente scegliere una delle opzioni disponibili.

Ma a scopo dimostrativo, andremo avanti e faremo clic sul pulsante a matita “Modifica stili”.

Clicking Edit Styles in Full Site Editor

A questo punto si accede all’Editor completo del sito e si apre la scheda Stili.

Facciamo clic su “Colori”.

Selecting Colors in the Full Site Editor

La barra laterale mostra alcuni elementi di cui è possibile modificare le impostazioni di colore, come testo, link, didascalie, pulsanti e titoli.

Ognuno di essi avrà impostazioni di colore diverse, quindi assicuratevi di esplorarli per vedere cosa possono fare.

Elements whose color you can change in the WordPress Full Site Editor

Utilizziamo un esempio facendo clic su “Intestazione”.

Per modificare il colore dell’intestazione, è possibile selezionare uno dei colori predefiniti del tema o utilizzarne uno personalizzato facendo clic sul selettore dei colori.

How to change the heading text color in the WordPress Full Site Editor

Una volta soddisfatti dell’aspetto dei colori del testo, basta fare clic sul pulsante “Salva”. Le modifiche apportate saranno applicate a tutte le pagine e ai post.

Per ulteriori informazioni, consultate la nostra guida per principianti alla modifica completa del sito WordPress.

Metodo 4: Cambiare il colore del testo usando il codice CSS (consigliato)

A seconda del tema, potrebbe non essere possibile modificare il testo dell’intero sito utilizzando i menu del customizer. Un’opzione è quella di modificare manualmente ciascun testo utilizzando uno dei metodi illustrati in questo post. Tuttavia, questa operazione richiede molto tempo e impegno.

La buona notizia è che è possibile personalizzare il testo di un intero sito aggiungendo CSS personalizzati. Ancora meglio, questo metodo consente di definire colori diversi per tipi specifici di testo, come l’intestazione 1 (h1) o il testo di paragrafo (p).

Poiché la modifica e la personalizzazione dei temi di WordPress possono cambiare da un tema all’altro, si consiglia di utilizzare WPCode per aggiungere CSS personalizzati al sito.

WPCode è il miglior plugin per gli snippet di codice utilizzato da oltre 1 milione di siti web WordPress, che consente di aggiungere facilmente CSS, PHP, HTML e altro ancora senza dover modificare i file principali di WordPress.

La prima cosa da fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

Dopo l’attivazione, andare su Code Snippets ” Add Snippet.

How to add custom CSS to your site using WPCode

Qui potrete vedere tutti gli snippet WPCode già pronti che potete aggiungere al vostro sito. Tra questi, uno snippet che consente di disabilitare completamente i commenti, di caricare tipi di file che WordPress di solito non supporta, di disabilitare le pagine degli allegati e molto altro ancora.

È sufficiente passare il mouse su “Aggiungi il tuo codice personalizzato” e selezionare “Usa snippet” quando appare.

Adding a custom snippet to WordPress

Per iniziare, digitate un titolo per lo snippet di codice personalizzato. Può essere qualsiasi cosa che aiuti a identificare lo snippet nella dashboard di WordPress.

Quindi, aprire il menu a tendina “Tipo di codice” e selezionare “Snippet CSS”.

Adding custom CSS to WordPress

Successivamente, è possibile aggiungere il CSS personalizzato nel piccolo editor di codice. È necessario digitare il selettore del tipo di testo da personalizzare, seguito dal codice esadecimale del colore che si desidera utilizzare.

Ad esempio, è possibile modificare il colore del testo del paragrafo aggiungendo quanto segue:

p { color:#990000; }

Se si desidera utilizzare un colore diverso per le intestazioni del sito, è necessario utilizzare i selettori h1, h2, h3 o simili.

Lo si può vedere nell’immagine sottostante.

Changing the text color using custom code

Se non si è sicuri del codice esadecimale da utilizzare, si può ricorrere a un sito come HTML color codes.

Quando si è soddisfatti dello snippet, scorrere fino alla sezione ‘Inserimento’. WPCode può aggiungere il CSS in diverse posizioni, ad esempio dopo ogni post, solo nel frontend o solo per gli amministratori.

Per modificare il testo dell’intero blog WordPress, fate clic su “Inserisci automaticamente” se non è già selezionato. Quindi, aprite il menu a discesa “Posizione” e scegliete “Intestazione del sito”.

How to add custom CSS across your entire website

Una volta fatto ciò, scorrere fino alla parte superiore dello schermo e fare clic sulla levetta “Inattivo” in modo che diventi “Attivo”.

Infine, fare clic su “Salva snippet” per rendere attivo lo snippet CSS.

How to change the text color using WPCode

Ora, se visitate il vostro sito, vedrete il testo personalizzato dal vivo.

Se si desidera utilizzare un colore di testo diverso in qualsiasi punto o aggiungere altri CSS allo snippet, basta andare su Code Snippets Code Snippets. Qui, passate il mouse sullo snippet appena creato e fate clic su “Modifica” quando appare.

Editing a code snippet in WordPress

A questo punto è possibile modificare lo snippet di codice per utilizzare il nuovo colore e fare clic su “Salva snippet” per rendere effettiva la modifica sul sito web.

Oltre al colore del testo, è possibile utilizzare WPCode per cambiare il colore predefinito quando si seleziona un testo o per attivare l’evidenziazione del testo in una pagina e nel contenuto di un post.

Spesso le landing page e le pagine di vendita devono avere un aspetto diverso dal resto del sito. In questo modo si distinguono e possono ottenere più conversioni.

Se si desidera modificare il colore del testo per una pagina di destinazione o di vendita, si consiglia di utilizzare SeedProd. È il miglior plugin per landing page per WordPress e ha un costruttore di pagine drag-and-drop facile da usare.

SeedProd è dotato di oltre 90 blocchi che si possono semplicemente trascinare e rilasciare sul layout. È poi possibile perfezionare questi blocchi in molti modi diversi, tra cui la modifica del colore del testo.

Se state utilizzando una pagina personalizzata per ottenere più conversioni, SeedProd funziona con molti strumenti di terze parti che potreste già utilizzare per gestire le conversioni.

Questi includono i migliori servizi di email marketing, WooCommerce, Google Analytics e altro ancora.

Per prima cosa, è necessario installare e attivare SeedProd. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

Nota: esiste anche una versione gratuita di SeedProd che consente di creare home page personalizzate, landing page e altro ancora. Tuttavia, per questa guida utilizzeremo SeedProd Pro, in quanto dispone di molti più modelli e blocchi avanzati.

Dopo aver attivato il plugin, SeedProd chiederà la chiave di licenza.

Adding the license key to SeedProd

Queste informazioni si trovano nel proprio account sul sito web di SeedProd. Dopo aver inserito la chiave di licenza, fare clic sul pulsante “Verifica chiave”.

Successivamente, è necessario visitare SeedProd ” Pagine e fare clic sul pulsante “Aggiungi nuova pagina di destinazione”.

How to create a new landing page in SeedProd

Dopo di che, è il momento di scegliere un modello. SeedProd dispone di oltre 300 modelli dal design professionale che potete personalizzare con immagini, testo, colori e altro ancora.

Per selezionare un modello, è sufficiente passare il mouse su di esso e fare clic sull’icona ‘Segno di spunta’.

Choosing a SeedProd template

In tutte le nostre immagini utilizziamo il modello “Juicy Sales Page”, ma potete utilizzare qualsiasi design.

Quindi, digitare un nome per la pagina personalizzata. SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma è possibile cambiare questo URL con quello che si desidera.

Per aiutare i motori di ricerca a capire di cosa parla la pagina, è possibile aggiungere alcune parole chiave pertinenti. Questo può migliorare la SEO di WordPress.

Quando si è soddisfatti delle informazioni inserite, fare clic sul pulsante “Salva e inizia a modificare la pagina”.

Adding relevant keywords to a page URL

Successivamente, si accede al costruttore di pagine drag-and-drop di SeedProd, dove è possibile personalizzare il modello.

L’editor di SeedProd mostra un’anteprima live del progetto a destra e alcune impostazioni del blocco a sinistra.

The SeedProd drag and drop page builder

Il menu di sinistra contiene anche dei blocchi che si possono trascinare sul layout.

Ad esempio, è possibile trascinare e rilasciare blocchi standard come pulsanti e immagini o utilizzare blocchi avanzati come timer per il conto alla rovescia, titoli animati, pulsanti di condivisione sociale e altro ancora.

Adding a social sharing block to a custom page

SeedProd è dotato anche di “sezioni”, che sono raccolte di blocchi che vengono spesso utilizzati insieme. Per esempio, SeedProd ha un’intestazione, un’immagine eroe, un invito all’azione, testimonianze, modulo di contatto, FAQ, caratteristiche, sezioni a piè di pagina e altro ancora. Questo può aiutarvi a creare una pagina dal design professionale, in modo rapido.

Per consultare le diverse sezioni, è sufficiente fare clic sulla scheda “Sezioni”. Per visualizzare l’anteprima di una sezione, passare il mouse su di essa e cliccare sull’icona della lente d’ingrandimento.

The SeedProd ready-made sections

Per aggiungere la sezione al progetto, è sufficiente fare clic su “Scegli questa sezione”.

Questo aggiungerà la sezione in fondo alla pagina.

Adding a ready-made section to your website

È possibile spostare sezioni e blocchi all’interno del layout utilizzando il drag and drop.

Per personalizzare un blocco, è sufficiente fare clic su di esso per selezionarlo nel layout. Il menu di sinistra mostrerà ora tutte le impostazioni che si possono utilizzare per configurare il blocco.

Customizing SeedProd blocks on a landing page

Per modificare il colore del testo, è sufficiente fare clic su qualsiasi blocco che contenga del testo.

Nel menu di sinistra, selezionare la scheda “Avanzate”. Sotto “Stili”, fare clic su “Colore”.

Changing the text color using SeedProd

Si apre una finestra a comparsa in cui è possibile scegliere un nuovo colore di testo.

Un’altra opzione è quella di digitare un codice esadecimale nel campo “Hex”.

Customizing the text color using a page builder plugin

È ora possibile modificare il colore del testo di qualsiasi altro blocco seguendo semplicemente la stessa procedura descritta sopra.

Quando si è soddisfatti dell’aspetto della pagina, è il momento di pubblicarla facendo clic sul pulsante “Salva”. Quindi, scegliere “Pubblica”.

Publishing a page with custom text colors

Se visitate il vostro negozio online, blog o sito web, vedrete la nuova pagina in azione, completa di colori di testo personalizzati.

Speriamo che questo tutorial vi abbia aiutato a capire come cambiare il colore del testo in WordPress. Potreste anche apprezzare il nostro tutorial su come aumentare il traffico del vostro blog e la nostra scelta dei migliori servizi di email marketing.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

19 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    QUICK QUESTION…. is there a way to customize the highlight color when selecting text?
    It would be awesome if that could match my brand’s color palette too instead of the default blue color.
    thanks in advance for any insight on that! :-)

    • WPBeginner Comments says

      In many cases this can be set with the theme settings in the Customizer.

      If it’s not available, the theme may not have included this feature, in which case you may have to use CSS.

    • WPBeginner Comments says

      If you are trying to customize the link color, this usually can be set in the Customizer, if the theme has this feature.

      Otherwise, CSS could be used to change the link color.

    • WPBeginner Support says

      If none of the recommendations from our article were able to assist you, we would recommend reaching out to the support for your specific theme to see if they have a recommendation in case their CSS is overriding that you add.

      Admin

    • Jiří Vaněk says

      If you use some kind of pagebuilder, there should be a problem too. For exhample Elementor could overwrite your CSS on its own. So if you have Elementor, Oxygen, Divi builder or anything like this, try to look on collor setings here too.

  3. Kayla says

    Do you have any insight into how to change the background color of just part of a sentence?

    Thank you for all of your help. I’ve learned an immense amount from the content you share.

  4. Ekta says

    The 2nd method worked very well for me. Had spent quite some time on the net looking for how to change the color of the widget title and this took only a minute. Thanks a lot.

  5. Bob Wood says

    I still cannot change the color of a single word.
    I pull down options on single word –
    Inline code
    Inline image
    justify
    strikethrough
    underline

  6. Tunde Sanusi (Tuham) says

    Users can only do this in the Block Editor!
    That’s why I’ve been recommending people to start learning about the Block Editor

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.