Come personalizzare i colori sul tuo sito Web WordPress

Vuoi personalizzare i colori sul tuo sito Web WordPress?

I colori giocano un ruolo fondamentale nel rendere il tuo sito web esteticamente gradevole e stabilire la sua identità di marca. Fortunatamente, WordPress rende semplicissimo personalizzare i colori su tutto il tuo sito.

In questo articolo, ti mostreremo come personalizzare facilmente i colori sul tuo sito Web WordPress, inclusi i colori di sfondo, intestazione, testo e link.

Cos'è la teoria dei colori?

Prima di poter iniziare a personalizzare i colori sul tuo sito Web WordPress, è importante comprendere la teoria dei colori.

La teoria del colore è lo studio dei colori e di come interagiscono. Aiuta i designer a creare combinazioni di colori che si completano a vicenda.

Quando si progetta un sito Web, è necessario scegliere colori che stiano bene insieme. Ciò renderà il tuo sito Web più attraente per i tuoi visitatori, il che può migliorare l'esperienza dell'utente e aumentare il coinvolgimento.

Colori diversi possono creare emozioni e sentimenti diversi nelle persone e la teoria dei colori può aiutarti a scegliere la giusta combinazione per il tuo sito web.

Ad esempio, il rosso è spesso usato per rappresentare cibo e ristoranti. D'altra parte, il blu viene solitamente utilizzato sui siti Web bancari e finanziari.

Questo perché il rosso può creare sentimenti di calore, energia e passione, mentre il blu significa fiducia, sicurezza e calma.

Oltre a completare i colori, puoi anche utilizzare il contrasto cromatico per attirare l'attenzione su aree importanti del tuo blog WordPress.

Ciò ti consente di rendere i tuoi contenuti più leggibili, stabilire una forte identità di marca e creare uno stato d'animo specifico sul sito web.

Cosa sono i temi WordPress e puoi cambiare i colori dei temi?

I temi di WordPress controllano l'aspetto del tuo sito web per l'utente. Un tipico tema WordPress è un insieme di modelli predefiniti che installi sul tuo sito Web per modificarne l'aspetto e il layout.

I temi rendono il tuo sito web più attraente, più facile da usare e aumentano il coinvolgimento.

Puoi anche creare i tuoi temi da zero utilizzando plugin come SeedProd e Thrive Theme Builder.

Con WordPress, puoi facilmente personalizzare i temi e cambiarne i colori di sfondo, font, pulsanti e link.

Tuttavia, tieni presente che alcuni temi vengono forniti con scelte di colore predefinite, mentre altri offrono maggiore flessibilità per scegliere il tuo.

Detto questo, vediamo come personalizzare facilmente i colori in WordPress.

Come personalizzare i colori su WordPress

Puoi personalizzare i colori in WordPress utilizzando molti metodi diversi, tra cui il personalizzatore del tema, l'editor completo del sito, CSS personalizzato, plug-in per la creazione di pagine e altro ancora.

Cambia i colori usando la personalizzazione del tema

È semplicissimo cambiare i colori utilizzando il personalizzatore del tema WordPress integrato.

Innanzitutto, visita la pagina Aspetto »Personalizza dalla barra laterale dell'amministratore.

Nota: se non riesci a trovare la scheda "Personalizza" nella dashboard di WordPress, significa che stai utilizzando un tema a blocchi. Scorri verso il basso fino alla sezione successiva di questo tutorial per scoprire come cambiare i colori in un tema a blocchi.

Per questo tutorial, utilizzeremo il tema predefinito Twenty Twenty-One.

Ricorda che il personalizzatore del tema potrebbe avere un aspetto diverso a seconda del tema che stai attualmente utilizzando.

Ad esempio, il tema Twenty Twenty-One viene fornito con un pannello "Colori e modalità oscura" che consente agli utenti di selezionare un colore di sfondo e personalizzare la modalità oscura.

Dopo aver aperto il pannello, fai semplicemente clic sull'opzione "Seleziona colore". Questo aprirà il Color Picker, dove puoi scegliere il tuo colore di sfondo preferito.

Al termine, non dimenticare di fare clic sul pulsante "Pubblica" in alto per salvare le modifiche e pubblicarle sul tuo sito web.

Cambia i colori nell'editor del sito completo

Se stai utilizzando un tema basato su blocchi, non avrai accesso alla personalizzazione del tema. Tuttavia, puoi utilizzare l'editor completo del sito (FSE) per cambiare i colori sul tuo sito web.

Per prima cosa, vai alla schermata Aspetto »Editor dalla barra laterale dell'amministratore per avviare l'editor completo del sito.

Ora devi fare clic sull'icona "Stili" nell'angolo in alto a destra dello schermo.

Si aprirà la colonna "Stili", dove è necessario fare clic sul pannello "Colori".

Puoi modificare lo sfondo, il testo, il collegamento, l'intestazione e i colori dei pulsanti del tema da qui.

Al termine, fare clic sul pulsante "Salva" per memorizzare le impostazioni.

Cambia i colori usando CSS personalizzati

CSS è un linguaggio che puoi utilizzare per modificare l'aspetto visivo del tuo sito Web, inclusi i suoi colori. Puoi salvare il CSS personalizzato nelle impostazioni del tema per applicare le tue personalizzazioni all'intero sito.

Tuttavia, il codice CSS personalizzato non verrà più applicato se cambi tema sul tuo sito web o aggiorni il tema esistente.

Ecco perché ti consigliamo di utilizzare il plug-in WPCode, che è il miglior plug-in di frammenti di codice WordPress sul mercato. È il modo più semplice per aggiungere codice CSS personalizzato e ti consentirà di personalizzare in modo sicuro i colori sul tuo sito Web WordPress.

Innanzitutto, dovrai installare e attivare il plug-in WPCode. Per ulteriori istruzioni, consulta la nostra guida per principianti su come installare un plug-in di WordPress.

Dopo aver attivato WPCode, devi visitare la pagina Frammenti di codice »+ Aggiungi frammenti dalla barra laterale di amministrazione.

Basta fare clic sul pulsante "Usa snippet" sotto l'intestazione "Aggiungi codice personalizzato (nuovo snippet)".

Una volta che sei nella pagina "Crea snippet personalizzato", puoi iniziare digitando un nome per il tuo codice.

Successivamente, seleziona "Snippet CSS" come "Tipo di codice" dal menu a discesa.

Successivamente, devi aggiungere il codice CSS personalizzato nella casella "Anteprima codice".

Per questa sezione, stiamo aggiungendo codice CSS personalizzato che cambia il colore del testo sul sito web:

p   { color:#990000;  }

Dopo averlo fatto, scorri verso il basso fino alla sezione "Inserimento".

Qui puoi scegliere l'opzione "Inserimento automatico" se desideri che il codice venga eseguito automaticamente all'attivazione.

Puoi anche aggiungere uno shortcode a pagine o post specifici di WordPress.

Una volta terminato, scorri semplicemente indietro fino all'inizio della pagina e sposta l'interruttore "Inattivo" su "Attivo".

Infine, devi fare clic sul pulsante "Salva snippet" per applicare il codice CSS al tuo sito web.

Cambia i colori usando SeedProd

Puoi anche personalizzare i colori usando il plugin SeedProd.

È il miglior generatore di pagine WordPress sul mercato che ti consente di creare temi da zero senza utilizzare alcun codice.

Innanzitutto, devi installare e attivare il plug-in SeedProd. Per maggiori dettagli, puoi leggere la nostra guida per principianti su come installare un plugin per WordPress.

Dopo l'attivazione, vai alla pagina SeedProd »Theme Builder dalla barra laterale di amministrazione di WordPress.

Da qui, fai clic sul pulsante "Kit di modelli di temi" in alto.

Nota: se desideri creare il tuo tema da zero, dovrai invece fare clic sul pulsante "+ Aggiungi nuovo modello di tema".

Questo ti porterà alla pagina "Scelta del kit di modelli di temi". Qui puoi scegliere tra uno qualsiasi dei modelli di temi predefiniti offerti da SeedProd.

Per maggiori dettagli, consulta il nostro tutorial su come creare facilmente un tema WordPress senza alcun codice.

Dopo aver scelto un tema, verrai reindirizzato alla pagina "Modelli di temi".

Qui, devi impostare l'interruttore "Abilita tema SeedProd" su "Sì" per attivare il tema.

Ora, devi fare clic sul collegamento "Modifica design" sotto qualsiasi pagina del tema per aprire l'editor di trascinamento della selezione.

Una volta che sei lì, fai clic sull'icona a forma di ingranaggio nella parte inferiore della colonna di sinistra.

Questo ti indirizzerà alle impostazioni "Global CSS".

Da qui, puoi personalizzare i colori dello sfondo, del testo, dei pulsanti, dei link e altro del tuo sito web.

Una volta che sei soddisfatto delle tue scelte, fai clic sul pulsante "Salva" per memorizzare le tue impostazioni.

Come cambiare il colore di sfondo su WordPress

Tutti i temi WordPress hanno un colore di sfondo predefinito. Tuttavia, puoi modificarlo facilmente per personalizzare il tuo sito web e migliorarne la leggibilità.

Se stai utilizzando un tema a blocchi, dovrai cambiare il colore di sfondo utilizzando l'editor completo del sito.

Innanzitutto, devi andare alla schermata Aspetto »Editor dalla barra laterale dell'amministratore.

Una volta avviato l'editor completo del sito, fai clic sull'icona "Stili" nell'angolo in alto a destra dello schermo.

Successivamente, fai semplicemente clic sul pannello "Colori" per aprire impostazioni aggiuntive

Nel pannello "Colori", ora puoi gestire il colore predefinito di diversi elementi sul tuo sito web.

Qui, devi fare clic sull'opzione "Sfondo" nella sezione "Elementi".

Una volta che il pannello "Sfondo" si è espanso, puoi scegliere il colore di sfondo del tuo sito web da qui.

Tutti i temi WordPress offrono una serie di colori predefiniti del sito Web tra cui è possibile scegliere.

Tuttavia, se desideri utilizzare un colore personalizzato, devi fare clic sullo strumento Colore personalizzato.

Questo aprirà il Color Picker, dove puoi selezionare un colore a tua scelta.

Puoi anche utilizzare i colori sfumati per lo sfondo del tuo sito web.

Per questo, dovrai prima passare alla scheda "Gradiente" in alto.

Successivamente, puoi scegliere una sfumatura predefinita dal tema o selezionare i tuoi colori sfumati con l'aiuto dello strumento Color Picker.

Al termine, non dimenticare di fare clic sul pulsante "Salva" per salvare le impostazioni.

Puoi anche modificare lo sfondo del tuo sito web utilizzando il personalizzatore del tema, SeedProd e il CSS personalizzato.

Per istruzioni più dettagliate, ti consigliamo di consultare la nostra guida su come modificare il colore di sfondo in WordPress.

Come cambiare il colore dell'intestazione su WordPress

Molti temi WordPress sono dotati di un'intestazione incorporata nella parte superiore della pagina. Di solito contiene collegamenti a pagine importanti, icone social, inviti all'azione e altro.

Se stai utilizzando un tema a blocchi, puoi personalizzare facilmente l'intestazione di WordPress utilizzando l'editor completo del sito.

Innanzitutto, devi visitare la schermata Aspetto »Editor dalla barra laterale dell'amministratore per avviare l'editor completo del sito. Una volta lì, seleziona il modello "Intestazione" in alto facendo doppio clic su di esso.

Da qui, scorri semplicemente verso il basso fino alla sezione "Colore" e fai clic sull'opzione "Sfondo".

Si aprirà un popup in cui puoi scegliere un colore predefinito per l'intestazione.

Puoi anche selezionare un colore personalizzato aprendo lo strumento Color Picker.

Per personalizzare l'intestazione utilizzando una sfumatura di colore, devi passare alla scheda "Gradiente".

Successivamente, puoi scegliere un'opzione sfumatura predefinita o personalizzarne una utilizzando il Selettore colore.

Infine, fai clic sul pulsante "Salva" per memorizzare le tue impostazioni.

Se desideri modificare il colore dell'intestazione utilizzando il personalizzatore del tema o un CSS aggiuntivo, ti consigliamo di leggere la nostra guida per principianti su come personalizzare l'intestazione di WordPress.

Come cambiare il colore del testo su WordPress

Cambiare il colore del testo può aiutare a migliorare la leggibilità del tuo blog WordPress.

Se stai utilizzando un tema a blocchi, dovrai cambiare il colore del testo utilizzando l'editor completo del sito.

Puoi iniziare visitando la schermata Aspetto »Editor dalla barra laterale dell'amministratore. Questo avvierà l'editor completo del sito, in cui devi fare clic sull'icona "Stili" nell'angolo in alto a destra.

Successivamente, è necessario fare clic sul pannello "Colori" per accedere alle impostazioni aggiuntive.

Una volta che sei lì, vai avanti e fai clic sull'opzione "Testo" nella sezione "Elementi".

Una volta aperte le impostazioni del colore del testo, sarai in grado di vedere una serie di colori del testo nella sezione "Predefinito".

In alternativa, puoi anche utilizzare un colore di testo personalizzato facendo clic sullo strumento Colore personalizzato e aprendo il Selettore colore.

Una volta effettuata la scelta, è sufficiente fare clic sul pulsante "Salva" per memorizzare le modifiche.

Suggerimento bonus: puoi utilizzare lo strumento WebAIM Contrast Checker per verificare se lo sfondo e il colore del testo funzionano insieme. Lo strumento può aiutarti a migliorare la leggibilità del testo sul tuo sito web.

Per personalizzare il colore del testo utilizzando CSS, il personalizzatore del tema o SeedProd, potresti consultare la nostra guida su come modificare il colore del testo in WordPress.

Come modificare il colore della selezione del testo in WordPress

Quando un visitatore seleziona il testo sul tuo sito web, mostrerà un colore di sfondo. Il colore predefinito è il blu.

Tuttavia, a volte il colore potrebbe non fondersi bene con il tuo tema WordPress e potresti volerlo cambiare.

L'aggiunta di codice CSS ai file del tema può facilmente modificare il colore della selezione del testo. Tuttavia, tieni presente che il passaggio a un altro tema o l'aggiornamento del tema attuale farà scomparire il codice CSS.

Ecco perché ti consigliamo di utilizzare il plug-in WPCode, che è il miglior plug-in di frammenti di codice WordPress sul mercato.

Innanzitutto, devi installare e attivare il plug-in WPCode. Per ulteriori istruzioni, consulta la nostra guida su come installare un plugin per WordPress.

Dopo l'attivazione, vai alla pagina Frammenti di codice »+ Aggiungi frammenti dalla barra laterale dell'amministratore.

Quindi, fai semplicemente clic sul pulsante "Usa snippet" sotto l'intestazione "Aggiungi il tuo codice personalizzato (nuovo snippet)".

Una volta che sei nella pagina "Crea snippet personalizzato", puoi iniziare digitando un nome per il tuo snippet di codice.

Successivamente, devi scegliere "Snippet CSS" come "Tipo di codice" dal menu a discesa sulla destra.

Ora vai avanti e copia e incolla il seguente codice CSS nella casella "Anteprima codice".

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}
 
::selection {
    background-color: #ff6200;
    color: #fff;
}

Puoi modificare il colore di selezione del testo sostituendo il codice esadecimale accanto a "background-color" nello snippet CSS.

Dopo aver aggiunto il codice, scorri verso il basso fino alla sezione "Inserimento".

Qui, devi scegliere il metodo "Inserimento automatico" per eseguire automaticamente il codice all'attivazione.

Successivamente, scorri verso l'alto e sposta l'interruttore "Inattivo" su "Attivo".

Infine, vai avanti e fai clic sul pulsante "Salva frammento" per memorizzare le modifiche.

Ora puoi visitare il tuo sito Web per verificare il colore della selezione del testo.

Puoi anche modificare il colore della selezione del testo utilizzando il personalizzatore del tema o un plug-in. Per maggiori dettagli, consulta il nostro tutorial su come modificare il colore di selezione del testo predefinito in WordPress.

Come cambiare il colore del collegamento su WordPress

Puoi cambiare facilmente il colore del collegamento in WordPress utilizzando l'editor completo del sito o il CSS personalizzato.

Se stai utilizzando un tema a blocchi, vai alla schermata Aspetto »Editor dalla barra laterale dell'amministratore.

Una volta avviato l'editor completo del sito, devi fare clic sull'icona "Stili" nell'angolo in alto a destra.

Successivamente, fai clic sul pannello "Colori" nella colonna di destra per visualizzare ulteriori impostazioni.

Una volta che sei lì, fai semplicemente clic sul pannello "Link".

Questo avvierà le impostazioni del colore del collegamento e vedrai più colori di collegamento predefiniti visualizzati nella colonna di destra.

Tuttavia, puoi anche utilizzare un colore di collegamento personalizzato facendo clic sullo strumento Colore personalizzato per aprire il Selettore colore.

Puoi anche modificare il colore del collegamento al passaggio del mouse utilizzando FSE. Ciò significa che il colore del collegamento cambierà quando qualcuno ci passa sopra con il mouse.

Innanzitutto, dovrai passare alla scheda "Passa il mouse" dall'alto.

Una volta lì, puoi scegliere un colore predefinito o personalizzato per cambiare il colore del collegamento al passaggio del mouse.

Infine, fai clic sul pulsante "Salva" per memorizzare le tue impostazioni.

Per istruzioni più dettagliate, ti consigliamo di consultare la nostra guida su come modificare il colore del collegamento in WordPress.

Come modificare la combinazione di colori dell'amministratore in WordPress

Puoi anche modificare la combinazione di colori dell'amministratore in WordPress, se lo desideri. Questo metodo può essere utile se desideri che la dashboard di amministrazione corrisponda al marchio del tuo sito Web o utilizzi i tuoi colori preferiti.

Tuttavia, tieni presente che la modifica della combinazione di colori della dashboard di WordPress non influirà sulla parte visibile del tuo sito web.

Per modificare la combinazione di colori dell'amministratore, visita semplicemente la pagina Utenti »Profilo dalla barra laterale dell'amministratore.

Vedrai più combinazioni di colori accanto all'opzione 'Admin Color Scheme'.

Scegli quello che preferisci e quindi fai clic sul pulsante "Aggiorna profilo" nella parte inferiore della pagina per salvare le modifiche.

Per istruzioni più dettagliate, consulta la nostra guida per principianti su come modificare la combinazione di colori dell'amministratore in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come personalizzare i colori sul tuo sito Web WordPress. Potresti anche voler vedere la nostra ultima guida SEO per WordPress e il nostro articolo su come scegliere una combinazione di colori perfetta per il tuo sito Web WordPress.

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