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.

Puoi regolare il colore del testo per singoli blocchi, impostazioni globali del tema (Personalizza o Editor del sito completo), utilizzando CSS personalizzato o tramite un page builder.

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 in una landing page o utilizzare sottotitoli colorati sul tuo sito.

A volte, potresti persino voler cambiare il colore del testo su un intero sito web. Ad esempio, forse il tuo tema WordPress utilizza un colore del carattere grigio, ma preferiresti usare il nero per un contrasto migliore con il 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. Usa semplicemente i link qui sotto per passare al metodo che preferisci:

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

Per cambiare il colore del testo per parole, frasi o blocchi interi specifici nell'editor a blocchi di WordPress, seleziona il testo o il blocco desiderato. Quindi utilizza le impostazioni 'Colore' nella barra laterale del blocco o l'opzione 'Evidenziazione' nella barra degli strumenti per scegliere un nuovo colore.

Se vuoi solo cambiare alcune parole, un paragrafo o un titolo 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.

Passaggio 1: Apri il tuo post o la tua pagina nell'editor a blocchi

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 blocco Paragrafo, Intestazione o un altro blocco che accetti testo. Per assistenza, consulta la nostra guida su come utilizzare l'editor a blocchi di WordPress.

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

Passaggio 2: Cambia 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 completano il tuo tema WordPress. Puoi semplicemente fare clic su uno qualsiasi dei colori 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 è un codice specifico che rappresenta un particolare colore. Questo è utile se vuoi usare 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'.

Passaggio 3: Cambia il 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 a blocchi di WordPress. Quindi, fai clic sulla piccola icona 'A' (il pulsante 'Colore del testo') nella barra degli strumenti dell'editor di contenuti. Questo aprirà un popup per la selezione del colore.

Puoi scegliere tra i colori predefiniti del tema, selezionare un colore personalizzato o digitare un codice esadecimale.

Assicurati di selezionare l'opzione 'Testo' all'interno del selettore di colori per cambiare il colore del carattere. L'opzione 'Sfondo', che è separata, cambierà il colore di sfondo dietro il tuo testo.

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, in genere vorrai utilizzare lo stesso colore del testo nella maggior parte del tuo sito web WordPress.

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

Nota: Se il personalizzatore del tema è mancante, allora è più probabile che tu stia utilizzando un tema a blocchi e puoi saltare alla 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 cambiare la dimensione del carattere, lo stile, lo spazio 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-Five, allora 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 titoli.

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 all' 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 (h1, h2, ecc.) o paragrafi (p), per cambiarne i colori in tutto il tuo sito.

Per modifiche semplici, puoi aggiungere CSS personalizzato direttamente tramite Aspetto » Personalizza » CSS aggiuntivo nella tua bacheca WordPress.

Incolla semplicemente il tuo codice CSS nella casella fornita e fai clic su 'Pubblica'. Questo è spesso sufficiente per piccole modifiche senza bisogno di un plugin aggiuntivo.

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 WordPress. Rende facile per i principianti aggiungere CSS personalizzato, PHP, HTML e altro in modo sicuro. Non devi toccare i file del tuo tema o rischiare di rompere il tuo sito.

Passaggio 1: Installa e attiva il plugin WPCode

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

Passaggio 2: Aggiungi un nuovo snippet di codice personalizzato

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’.

Passaggio 3: Aggiungi il tuo codice CSS personalizzato

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.

Passaggio 4: Imposta la posizione di inserimento su Intestazione del sito

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 modificare il testo su 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’. Questo assicura che il tuo CSS personalizzato venga applicato in tutto il tuo sito.

Passaggio 5: Attiva e salva lo snippet

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 usare WPCode per cambiare il colore predefinito quando selezioni il testo o abilitare evidenziazioni del testo nei contenuti 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.

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

Se vuoi creare una landing page o una pagina di vendita, ti consigliamo di usare SeedProd. Tra tutti i page builder che abbiamo provato, è il migliore sul mercato, fidato da oltre 1 milione di siti web con una valutazione di 4,9/5 stelle su oltre 5.000 recensioni.

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 come Mailchimp, Constant Contact e ActiveCampaign, WooCommerce, Google Analytics e altro.

Passaggio 1: Installa e attiva il plugin SeedProd

Innanzitutto, devi installare e attivare SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di 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’.

Passaggio 2: Crea una Nuova Pagina di Destinazione

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 contatori, testimonianze a rotazione, pulsanti di condivisione social e altro.

SeedProd include anche 'Sezioni', che sono raccolte di blocchi utilizzati spesso insieme. Ad esempio, SeedProd ha sezioni per intestazione, immagine hero, call to action, testimonianze, modulo di contatto, FAQ, caratteristiche, footer e altro. 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.

Passaggio 3: Personalizza il colore del testo per qualsiasi blocco

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.

Passaggio 4: Salva e pubblica la tua pagina

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 (CSS) del tuo tema sovrascrive le impostazioni scelte nell'editor. Il codice del tema potrebbe avere una regola più specifica per il colore del testo. In questi casi, aggiungere un 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 capire 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 web WordPress ottimizzato per dispositivi mobili.

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