Come cambiare il colore del testo in WordPress (per tutti i temi)

Quando abbiamo iniziato a usare WordPress, pensavamo che cambiare il colore del testo sarebbe stato facile. Ma ci siamo subito resi conto che può variare a seconda del tema, delle impostazioni o dell'editor che stai utilizzando.

Dopo aver aiutato migliaia di principianti a personalizzare i loro siti web WordPress, sappiamo che questa è una frustrazione comune per molti utenti.

La buona notizia è che ci sono diversi modi semplici per cambiare il colore del testo in WordPress, indipendentemente dal tema che stai utilizzando.

In questa guida passo passo, ti illustreremo i metodi più semplici per personalizzare il colore del tuo testo in WordPress.

Perché cambiare il colore del testo in WordPress?

Cambiare il colore del testo in WordPress ti consente di evidenziare contenuti importanti, migliorare la leggibilità e abbinare il branding del tuo sito.

Ad esempio, puoi evidenziare una call to action su una landing page o utilizzare sottotitoli colorati sul tuo sito.

A volte, potresti persino voler cambiare il colore del testo su tutto il sito web. Ad esempio, forse il tuo tema WordPress utilizza un colore del carattere grigio, ma preferiresti usare il nero per un migliore contrasto con il tuo colore di sfondo.

Puoi anche usare il colore per suscitare un'emozione nei tuoi visitatori. Ad esempio, molte persone pensano che il blu crei un senso di fiducia e affidabilità.

Per saperne di più, consulta la nostra guida su come scegliere uno schema di colori perfetto per il tuo sito web WordPress.

Detto questo, vediamo come puoi cambiare il colore del testo in WordPress.

Utilizza semplicemente i link qui sotto per passare al metodo che preferisci:

• Method 1: How to Change Text Color in Block Editor
  • Modifica del colore del testo di una parola o frase
• Metodo 2: Come cambiare il colore del testo nel personalizzatore del tema (solo temi classici)
• Metodo 3: Come cambiare il colore del testo nell'editor del sito completo (solo temi a blocchi)
• Metodo 4: Come cambiare il colore del testo con codice CSS (più personalizzabile)
• Metodo 5: Come cambiare il colore del testo in un page builder
• Domande frequenti sulla modifica del colore del testo

Metodo 1: Come cambiare il colore del testo nell'editor a blocchi

Se vuoi solo cambiare alcune parole, un paragrafo o un'intestazione all'interno di un post, puoi usare l'editor di contenuti di WordPress. Questo metodo funziona sia che tu utilizzi un tema a blocchi o un tema classico.

Per iniziare, apri il post o la pagina in cui desideri cambiare il colore del testo o crea una nuova pagina.

Se non l'hai già fatto, digita il testo che desideri personalizzare. A seconda del testo, potrebbe essere necessario aggiungere un Paragrafo, un Titolo o un altro blocco che accetti testo. Per aiuto, consulta la nostra guida su come usare l'editor a blocchi di WordPress.

Non appena hai del testo, sei pronto per cambiarne il colore.

Modificare il colore del testo di un blocco

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

Fai semplicemente clic sul blocco e quindi seleziona la scheda 'Blocco' nel menu di destra.

Una volta fatto ciò, trova la sezione 'Colore' e fai clic su 'Testo'.

L'editor visivo mostrerà ora alcuni colori che si abbinano al tuo tema WordPress. Puoi semplicemente fare clic su qualsiasi colore per cambiare tutto il testo all'interno di quel blocco.

Per utilizzare un colore diverso, fai semplicemente clic sulla casella in alto nel popup.

Questo apre un selettore dove puoi scegliere un nuovo colore del carattere.

Un'altra opzione è digitare un codice esadecimale, che è il codice HTML per un particolare colore. Questo è utile se si desidera utilizzare un colore molto specifico, come la tonalità esatta di rosso dal logo del tuo sito web.

Se non sei sicuro di quale codice esadecimale utilizzare, potrebbe essere utile consultare un sito come codici colore HTML. Qui puoi esplorare diversi colori e ottenere i loro codici esadecimali.

Una volta ottenuto un codice, incollalo o digitalo nella casella 'Esadecimale'.

Se cambi idea e vuoi ripristinare il colore predefinito del testo, fai clic sul pulsante puntinato nel menu di destra.

Le opzioni che vedi varieranno a seconda che tu abbia modificato anche il colore di sfondo del blocco, quindi potrebbe essere necessario fare clic su 'Testo' o 'Ripristina tutto'.

Modifica del colore del testo di una parola o frase

A volte, potresti voler cambiare solo il colore di una particolare parola, frase o frase, come la call to action sulla tua squeeze page.

Per fare ciò, evidenzia semplicemente la parola o la frase che desideri modificare nell'editor di blocchi di WordPress. Quindi, fai clic sulla piccola freccia verso il basso sulla barra degli strumenti dell'editor di contenuti e fai clic su 'Evidenzia'.

Questo aprirà un popup che mostra alcuni colori che staranno bene con il tuo tema attuale.

Puoi anche scegliere un colore manualmente o persino utilizzare un codice esadecimale seguendo lo stesso processo descritto sopra.

Suggerimento Pro: Vuoi cambiare il colore dei tuoi link? Dai un'occhiata alla nostra guida per principianti su come cambiare il colore dei link in WordPress.

Metodo 2: Come cambiare il colore del testo nel personalizzatore del tema (Solo temi classici)

Il colore può attirare l'attenzione sui contenuti più importanti di una pagina, ma troppi colori diversi possono diventare opprimenti. Tenendo presente questo, di solito vorrai usare lo stesso colore del testo nella maggior parte del tuo sito web WordPress.

Cambiare ogni pagina e post manualmente usando l'editor a blocchi richiederebbe molto tempo, quindi invece, consigliamo di cambiare il tema stesso usando il personalizzatore del tema.

Nota: Se il personalizzatore del tema è mancante, allora è più probabile che tu stia usando un tema a blocchi e puoi saltare al metodo 3.

Per iniziare, vai su Aspetto » Personalizza.

Ora devi trovare le impostazioni del testo del tema. Ogni tema è diverso, ma di solito dovrai cercare un'opzione 'Tipografia'.

Nelle nostre immagini, stiamo usando OceanWP.

Vai avanti e fai clic sull'impostazione 'Tipografia' o simile. A questo punto, di solito vedrai tutti i diversi tipi di testo utilizzati nel tema, come Titolo 1 e Titolo della pagina.

Per modificare il testo all'interno dei tuoi post e pagine, fai clic sulla sezione ‘Corpo’ o simile.

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

Quindi, fai clic su ‘Seleziona colore’.

Questo aprirà il selettore. Puoi utilizzare uno dei colori predefiniti, scegliere un nuovo colore utilizzando le impostazioni o digitare un codice esadecimale.

Se desideri ripristinare il colore predefinito del tema in qualsiasi momento, fai semplicemente clic su ‘Predefinito’.

Puoi anche utilizzare queste impostazioni per modificare la dimensione del carattere, lo stile, lo spaziatura tra le lettere e altro ancora.

Quando sei soddisfatto dell'aspetto del testo, fai clic sul pulsante ‘Pubblica’ nella parte superiore dello schermo.

Metodo 3: Come cambiare il colore del testo nell'editor del sito completo (solo temi a blocchi)

Se stai utilizzando un tema basato su 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 del sito completo, vai su Temi » Editor.

Ora vedrai diversi menu per personalizzare l'aspetto del tuo sito web.

Qui, vuoi selezionare 'Stili'. Questa sezione definisce i colori globali, la tipografia e il layout del tuo sito web.

Nella schermata successiva, vedrai alcune combinazioni di stili tra cui scegliere. Se vuoi cambiare completamente l'aspetto del tuo tema a blocchi, puoi semplicemente scegliere una delle opzioni disponibili.

Ma a scopo dimostrativo, procederemo facendo clic sul pulsante a forma di matita 'Modifica stili'.

Arriverai ora all'Editor del sito completo e la scheda Stili sarà aperta.

Facciamo clic su 'Colori'.

La barra laterale ti mostrerà alcuni elementi le cui impostazioni di colore puoi modificare, come testo, link, didascalie, pulsanti e intestazioni.

Ognuno avrà impostazioni di colore diverse, quindi assicurati di esplorarle per vedere cosa possono fare.

Usiamo un esempio facendo clic su 'Intestazione'.

Per cambiare il colore dell'intestazione, puoi selezionare uno dei colori predefiniti del tema o usarne uno personalizzato facendo clic sul selettore di colore.

Una volta che sei soddisfatto dell'aspetto dei colori del tuo testo, fai semplicemente clic sul pulsante 'Salva'. Tutte le modifiche apportate verranno quindi applicate a tutte le tue pagine e ai tuoi post.

Per maggiori informazioni, consulta la nostra guida per principianti su l'editing completo del sito WordPress.

Metodo 4: Come cambiare il colore del testo con codice CSS (Più personalizzabile)

Se desideri un maggiore controllo sui colori del testo del tuo sito web o hai bisogno di cambiare un elemento non disponibile nelle impostazioni del tuo tema, aggiungere codice CSS personalizzato è un'ottima soluzione.

Questo potente metodo è altamente personalizzabile e ti consente di selezionare tipi di testo specifici, come titoli o paragrafi, in tutto il tuo sito.

La buona notizia è che puoi personalizzare il testo su un intero sito aggiungendo CSS personalizzato. Ancora meglio, questo metodo ti consente di definire colori diversi per tipi specifici di testo, come intestazioni di livello 1 (h1) o testo di paragrafo (p).

Poiché la modifica e la personalizzazione dei temi WordPress possono variare da tema a tema, ti consigliamo di utilizzare WPCode per aggiungere CSS personalizzato al tuo sito.

WPCode è il miglior plugin per snippet di codice utilizzato da oltre 1 milione di siti web WordPress. Rende facile aggiungere CSS, PHP, HTML personalizzati e altro ancora senza dover modificare alcun file principale di WordPress.

La prima cosa che devi fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet.

Qui vedrai tutti gli snippet WPCode pronti all'uso che puoi aggiungere al tuo sito.

Passa semplicemente il mouse su ‘Aggiungi il tuo codice personalizzato’ e poi seleziona ‘Usa snippet’ quando appare.

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

Dopodiché, apri il menu a discesa ‘Tipo di codice’ e seleziona ‘Snippet CSS’.

Successivamente, puoi aggiungere il CSS personalizzato nel piccolo editor di codice. Dovrai digitare il selettore per il tipo di testo che stai personalizzando, seguito dal codice esadecimale per il colore che desideri utilizzare.

Ad esempio, puoi cambiare il colore del testo dei paragrafi aggiungendo quanto segue:

p { color:#990000; }

Se desideri utilizzare un colore diverso per le intestazioni del tuo sito, dovrai utilizzare i selettori h1, h2, h3 o simili.

Puoi vederlo nell'immagine qui sotto.

Se non sei sicuro di quale codice esadecimale utilizzare, puoi usare un sito come codici colore HTML.

Quando sei soddisfatto dello snippet, scorri fino alla sezione ‘Inserimento’. WPCode può aggiungere il CSS in diverse posizioni, come dopo ogni post, solo frontend o solo admin.

Per cambiare il testo in tutto il tuo blog WordPress, fai clic su ‘Inserimento automatico’ se non è già selezionato. Quindi, apri il menu a discesa ‘Posizione’ e scegli ‘Intestazione sito’.

Una volta fatto ciò, scorri fino in cima allo schermo e fai clic sull’interruttore ‘Inattivo’ in modo che cambi in ‘Attivo’.

Infine, fai clic su ‘Salva snippet’ per rendere attivo lo snippet CSS.

Ora, se visiti il tuo sito, vedrai il testo personalizzato attivo.

Se desideri utilizzare un colore del testo diverso in qualsiasi momento o semplicemente aggiungere altro CSS a quello snippet, vai su Code Snippets » Code Snippets. Qui, passa il mouse sopra lo snippet che hai appena creato e fai clic su ‘Modifica’ quando appare.

Ora puoi modificare lo snippet di codice per utilizzare il nuovo colore e quindi fare clic su ‘Salva snippet’ per rendere la modifica attiva sul tuo sito web.

Oltre al colore del testo, puoi anche utilizzare WPCode per cambiare il colore predefinito quando selezioni il testo o abilitare evidenziazioni del testo nel contenuto di pagine e articoli.

Metodo 5: Come cambiare il colore del testo in un page builder

Spesso, vorrai che le tue landing page abbiano un aspetto diverso dal resto del tuo sito web. Questo le fa risaltare, il che può portarti a più conversioni.

Questo è particolarmente importante se hai più landing page, come una per una lista d'attesa virale e un'altra per una campagna pubblicitaria su Google. Ognuna di queste pagine potrebbe necessitare del proprio design e schema di colori unico per raggiungere efficacemente diversi pubblici o canali di marketing.

Se vuoi creare una landing page o una pagina di vendita, ti consigliamo di utilizzare SeedProd. Tra tutti i page builder che abbiamo provato, è il migliore sul mercato e dispone di un page builder drag-and-drop facile da usare.

SeedProd è dotato di oltre 90 blocchi che puoi semplicemente trascinare e rilasciare nel tuo layout. Puoi quindi perfezionare questi blocchi in molti modi diversi, inclusa la modifica del colore del testo.

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

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

Innanzitutto, devi installare e attivare SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

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

Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd. Dopo aver inserito la chiave di licenza, fai clic sul pulsante ‘Verifica chiave’.

Successivamente, devi visitare SeedProd » Pagine e fare clic sul pulsante ‘Aggiungi nuova landing page’.

Dopodiché, è il momento di scegliere un modello. SeedProd ha oltre 300 modelli progettati professionalmente che puoi personalizzare con le tue immagini, testo, colori e altro ancora.

Per selezionare un modello, passa semplicemente il mouse sopra di esso e fai clic sull’icona del ‘Segno di spunta’.

Stiamo utilizzando il modello 'Juicy Sales Page' in tutte le nostre immagini, ma puoi usare qualsiasi design.

Successivamente, procedi a digitare un nome per la pagina personalizzata. SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma puoi modificare questo URL come preferisci.

Quando sei soddisfatto delle informazioni inserite, fai clic sul pulsante 'Salva e inizia a modificare la pagina'.

Successivamente, verrai portato all'editor drag-and-drop di SeedProd, dove potrai personalizzare il tuo modello.

L'editor di SeedProd mostra un'anteprima live del tuo design sulla destra e alcune impostazioni dei blocchi sulla sinistra.

Il menu di sinistra contiene anche blocchi che puoi trascinare sul tuo layout.

Ad esempio, puoi trascinare e rilasciare blocchi standard come pulsanti e immagini o utilizzare blocchi avanzati come timer di conto alla rovescia, testimonianze rotanti, pulsanti di condivisione social e altro ancora.

SeedProd include anche le 'Sezioni', che sono raccolte di blocchi spesso usati insieme. Ad esempio, SeedProd ha sezioni per intestazione, immagine hero, call to action, testimonianze, modulo di contatto, FAQ, funzionalità, piè di pagina e altro ancora. Questo può aiutarti a creare rapidamente una pagina dal design professionale.

Per esaminare le diverse sezioni, fai semplicemente clic sulla scheda 'Sezioni'. Per visualizzare in anteprima una sezione, posiziona il mouse su di essa e fai clic sull'icona della lente d'ingrandimento.

Per aggiungere la sezione al tuo design, fai semplicemente clic su 'Scegli questa sezione'.

Questo aggiungerà la sezione in fondo alla tua pagina.

Puoi spostare sezioni e blocchi nel tuo layout utilizzando il drag and drop.

Per personalizzare un blocco, fai semplicemente clic per selezionarlo nel tuo layout. Il menu a sinistra mostrerà ora tutte le impostazioni che puoi utilizzare per configurare quel blocco.

Per cambiare il colore del testo, fai semplicemente clic su qualsiasi blocco che contenga testo.

Nel menu a sinistra, seleziona la scheda 'Avanzate'. Sotto 'Stili', fai clic su 'Colore'.

Questo aprirà una finestra popup dove potrai scegliere un nuovo colore del testo.

Un'altra opzione è digitare un codice esadecimale nel campo 'Hex'.

Ora puoi cambiare il colore del testo per qualsiasi altro blocco semplicemente seguendo lo stesso processo descritto sopra.

Quando sei soddisfatto dell'aspetto della pagina, è ora di pubblicarla facendo clic sul pulsante 'Salva'. Quindi, scegli 'Pubblica'.

Se visiti il tuo negozio online, blog o sito web, vedrai la nuova pagina in azione, completa con i tuoi colori di testo personalizzati.

Domande frequenti sulla modifica del colore del testo

Ecco alcune domande che i nostri lettori hanno posto riguardo al cambio del colore del testo in WordPress:

Qual è il modo più semplice per cambiare il colore del testo per un intero sito web?

Il modo migliore è utilizzare le impostazioni integrate del tuo tema. Per i temi classici, puoi trovarle nel Personalizzatore di WordPress sotto Aspetto » Personalizza, solitamente in una scheda 'Tipografia' o 'Colori'.

Per i temi a blocchi moderni, puoi impostare i colori globali andando su Temi » Editor e facendo clic sull'icona 'Stili'. Questo garantisce un aspetto coerente su tutte le tue pagine.

Perché non posso cambiare il colore del mio testo in WordPress?

Questo problema si verifica spesso quando il foglio di stile del tuo tema (CSS) sovrascrive le impostazioni che scegli nell'editor. Il codice del tema potrebbe avere una regola più specifica per il colore del testo. In questi casi, aggiungere il tuo CSS personalizzato (come mostrato nel Metodo 4) è il modo più affidabile per forzare la modifica del colore desiderata.

Qual è la best practice per il colore del testo e l'accessibilità?

Per l'accessibilità, è molto importante garantire un elevato contrasto tra il testo e il colore di sfondo. Ciò rende i tuoi contenuti leggibili per i visitatori con disabilità visive. Ti consigliamo di utilizzare uno strumento online come il WebAIM Contrast Checker per assicurarti che le tue combinazioni di colori soddisfino gli standard di accessibilità.

Speriamo che questo tutorial ti abbia aiutato a imparare come cambiare il colore del testo in WordPress. Potresti anche voler consultare il nostro tutorial su come aggiungere un ridimensionatore di font in WordPress e modi per creare un sito WordPress ottimizzato per dispositivi mobili.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.