Come personalizzare i colori del vostro sito WordPress

I colori svolgono un ruolo importante nel rendere il vostro sito web visivamente attraente e nello stabilire l’identità del marchio. Fortunatamente, WordPress consente di personalizzare con estrema facilità i colori dell’intero sito.

Questo è essenziale per creare un look unico e fornire coerenza e chiarezza.

Abbiamo utilizzato con successo il colore per costruire una forte identità del marchio sui nostri siti web. Ad esempio, il colore arancione è diventato un elemento distintivo del marchio WPBeginner. Rende il nostro sito memorabile per i lettori, creando al contempo un design esteticamente piacevole.

L’uso ponderato del colore contribuisce a rendere il nostro marchio facilmente riconoscibile, favorendo l’esperienza dell’utente e la fedeltà al marchio.

In questo articolo vi mostreremo come personalizzare facilmente i colori del vostro sito WordPress, compresi i colori di sfondo, intestazione, testo e link.

Che cos’è la teoria del colore?

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

La teoria del colore è lo studio dei colori e di come lavorano insieme. 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. In questo modo il sito risulterà più attraente per i visitatori, migliorando l’esperienza dell’utente e aumentando il coinvolgimento.

Colori diversi possono suscitare emozioni e sentimenti diversi nelle persone e la teoria dei colori può aiutarvi a scegliere la combinazione giusta per il vostro sito web.

Ad esempio, il rosso è spesso utilizzato per rappresentare cibo e ristoranti. Il blu, invece, è solitamente utilizzato nei siti web di banche e finanza.

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

Oltre ai colori complementari, potete utilizzare il contrasto cromatico per attirare l’attenzione sulle aree importanti del vostro blog WordPress.

Ciò consente di rendere i contenuti più leggibili, di stabilire una forte identità del marchio e di creare un’atmosfera specifica sul sito web.

Cosa sono i temi di WordPress e si possono cambiare i colori dei temi?

Itemi di WordPress controllano l’aspetto del vostro sito web per l’utente. Un tipico tema di WordPress è un insieme di modelli predefiniti che si installano sul sito web per modificarne l’aspetto e il layout.

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

È anche possibile creare i propri temi da zero utilizzando plugin come SeedProd e Thrive Theme Builder.

Con WordPress è possibile personalizzare facilmente i temi e modificarne lo sfondo, i caratteri, i pulsanti e i colori dei collegamenti.

Tuttavia, è bene tenere presente che alcuni temi sono dotati di scelte cromatiche predefinite, mentre altri offrono una maggiore flessibilità nella scelta dei colori.

Detto questo, vediamo come personalizzare facilmente i colori in WordPress. Potete usare i link rapidi qui sotto per passare alle diverse parti del nostro tutorial:

Come personalizzare i colori in WordPress

È possibile personalizzare i colori in WordPress utilizzando molti metodi diversi, tra cui il personalizzatore del tema, l’editor completo del sito, i CSS personalizzati, i plugin del costruttore di pagine e altro ancora.

Cambiare i colori usando il personalizzatore del tema

È facilissimo cambiare i colori utilizzando il personalizzatore di temi WordPress integrato.

Per prima cosa, visitare la pagina Aspetto ” Personalizzazione dalla barra laterale dell’amministratore.

Nota: se non riuscite a trovare la scheda “Personalizza” nella dashboard di WordPress, significa che state utilizzando un tema a blocchi. Scorrete la sezione successiva di questo tutorial per scoprire come cambiare i colori in un tema a blocchi.

Per questa esercitazione, utilizzeremo il tema predefinito Twenty Twenty-One.

Ricordate che il personalizzatore del tema può avere un aspetto diverso a seconda del tema in uso.

Ad esempio, il tema Twenty Twenty-One è dotato di un pannello “Colori e modalità scura” che consente agli utenti di selezionare un colore di sfondo e di personalizzare la modalità scura.

Dopo aver aperto il pannello, è sufficiente fare clic sull’opzione ‘Seleziona colore’. Si aprirà il Selettore di colori, dove si potrà scegliere il colore di sfondo preferito.

Una volta terminato, non dimenticate di fare clic sul pulsante “Pubblica” in alto per salvare le modifiche e renderle effettive sul vostro sito web.

Cambiare i colori nell’Editor completo del sito

Se si utilizza un tema a blocchi, non si avrà accesso al personalizzatore del tema. Tuttavia, è possibile utilizzare l’editor completo del sito (FSE) per modificare i colori del sito.

Per prima cosa, accedere alla schermata Aspetto ” Editor dalla barra laterale dell’amministrazione per avviare l’editor completo del sito. A questo punto, è necessario fare clic sull’icona “Stili” nell’angolo in alto a destra dello schermo.

Si aprirà la colonna ‘Stili’, dove si dovrà fare clic sul pannello ‘Colori’.

Da qui è possibile modificare i colori di sfondo, testo, link, intestazioni e pulsanti del tema.

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

Cambiare i colori usando i CSS personalizzati

IlCSS è un linguaggio di programmazione che si può utilizzare per modificare l’aspetto visivo del sito web, compresi i colori. È possibile salvare i CSS personalizzati nelle impostazioni del tema per applicare le personalizzazioni all’intero sito.

Tuttavia, il codice CSS personalizzato non sarà più applicabile se si cambia tema sul sito web o si aggiorna il tema esistente.

Ecco perché vi consigliamo di utilizzare WPCode, il miglior plugin per gli snippet di codice di WordPress sul mercato. È il modo più semplice per aggiungere codice CSS personalizzato e vi permetterà di personalizzare in modo sicuro i colori sul vostro sito WordPress.

Per prima cosa, è necessario installare e attivare il plugin WPCode. Per ulteriori istruzioni, consultare la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, visitare la pagina Code Snippets ” + Add Snippet dalla barra laterale dell’amministrazione di WordPress.

Qui è sufficiente fare clic sul pulsante “Usa snippet” sotto l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)”.

Una volta entrati nella pagina “Crea snippet personalizzato”, si può iniziare a digitare un nome per il codice.

A questo punto, è sufficiente selezionare ‘Snippet CSS’ come ‘Tipo di codice’ dal menu a discesa.

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

p   { color:#990000;  }

È sufficiente aggiungere il codice CSS personalizzato nella casella “Anteprima codice”.

Una volta fatto ciò, scorrere fino alla sezione “Inserimento”.

Qui si può scegliere l’opzione “Inserimento automatico” se si desidera che il codice venga eseguito automaticamente all’attivazione.

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

Una volta terminato, scorrere indietro fino alla parte superiore della pagina e spostare l’interruttore “Inattivo” su “Attivo”.

Infine, è necessario fare clic sul pulsante “Save Snippet” per applicare il codice CSS al sito web.

Cambiare i colori con SeedProd

È inoltre possibile personalizzare i colori utilizzando il plugin SeedProd.

È il miglior page builder per WordPress sul mercato e consente di creare temi da zero senza utilizzare alcun codice.

Per prima cosa, è necessario installare e attivare il plugin SeedProd. Per maggiori dettagli, potete leggere la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, accedere alla pagina SeedProd ” Theme Builder dalla barra laterale dell’amministrazione di WordPress.

Da qui, fare clic sul pulsante “Kit di modelli di temi” in alto.

Nota: se si desidera creare il proprio tema da zero, è necessario fare clic sul pulsante “+ Aggiungi un nuovo modello di tema”.

Si accede così alla pagina “Scelta del kit di modelli di temi”. Qui è possibile scegliere uno dei modelli di tema già pronti offerti da SeedProd.

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

Dopo aver scelto un tema, si verrà reindirizzati alla pagina “Modelli di tema”.

Attivare l’interruttore “Abilita tema SeedProd” su “Sì” per attivare il tema.

A questo punto, fare clic sul link “Modifica design” in qualsiasi pagina del tema per aprire l’editor di trascinamento.

Una volta arrivati, fare clic sull’icona dell’ingranaggio in fondo alla colonna di sinistra.

In questo modo si accede alle impostazioni di ‘Global CSS’.

Da qui è possibile personalizzare i colori dello sfondo del sito, del testo, dei pulsanti, dei link e altro ancora.

Una volta soddisfatti delle proprie scelte, fare clic sul pulsante “Salva” per memorizzare le impostazioni.

Come cambiare il colore di sfondo in WordPress

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

Se si utilizza un tema a blocchi, è necessario modificare il colore di sfondo utilizzando l’editor completo del sito.

Per prima cosa, è necessario visitare la schermata Aspetto ” Editor dalla dashboard di WordPress.

Si aprirà l’editor completo del sito, dove si dovrà fare clic sull’icona “Stili” nell’angolo in alto a destra dello schermo.

Successivamente, è sufficiente fare clic sul pannello ‘Colori’ per aprire le impostazioni aggiuntive.

In questo pannello è possibile gestire il colore predefinito di diversi elementi del sito web.

Qui è necessario fare clic sull’opzione ‘Sfondo’ nella sezione ‘Elementi’.

Una volta espanso questo pannello, è possibile scegliere il colore di sfondo del sito web.

Tutti i temi WordPress offrono una serie di colori predefiniti per il sito web tra cui è possibile scegliere.

Tuttavia, se si desidera utilizzare un colore personalizzato, è necessario fare clic sullo strumento Colore personalizzato. Si aprirà il Selettore di colori, dove è possibile selezionare un colore a scelta.

Potete anche utilizzare colori sfumati per lo sfondo del vostro sito web.

Per farlo, è necessario passare alla scheda ‘Gradiente’ in alto.

Successivamente, è possibile scegliere un gradiente predefinito dal tema o selezionare i propri colori di gradiente con l’aiuto dello strumento Color Picker.

Una volta terminato, non dimenticate di fare clic sul pulsante “Salva” per memorizzare le impostazioni.

È inoltre possibile modificare lo sfondo del sito web utilizzando il personalizzatore di temi, SeedProd e CSS personalizzati.

Per istruzioni più dettagliate, potete consultare la nostra guida per principianti su come cambiare il colore di sfondo in WordPress.

Come cambiare il colore dell’intestazione in WordPress

Molti temi WordPress sono dotati di un’intestazione integrata nella parte superiore della pagina. Di solito contiene link importanti alla pagina, icone social, CTA e altro ancora.

Se si utilizza un tema a blocchi, è possibile personalizzare facilmente l’intestazione di WordPress utilizzando l’editor completo del sito.

Per prima cosa, è necessario visitare la schermata Aspetto ” Editor dalla barra laterale dell’amministratore per avviare l’editor completo del sito. Una volta lì, fare doppio clic sul modello “Header” in alto per selezionarlo.

Si apriranno le impostazioni dell’intestazione nel pannello di blocco a destra. Qui è necessario scorrere fino alla sezione ‘Colore’ e fare clic sull’opzione ‘Sfondo’.

Si aprirà una finestra a comparsa in cui è possibile scegliere un colore predefinito per l’intestazione.

È anche possibile selezionare un colore personalizzato aprendo lo strumento Selettore colore.

Per personalizzare l’intestazione utilizzando una sfumatura di colore, è necessario passare alla scheda ‘Gradiente’.

Successivamente, è possibile scegliere un’opzione di sfumatura predefinita o personalizzarne una propria utilizzando il Color Picker.

Infine, fare clic sul pulsante “Salva” per memorizzare le impostazioni.

Se volete cambiare il colore dell’intestazione utilizzando il personalizzatore del tema o un CSS aggiuntivo, potete leggere la nostra guida per principianti su come personalizzare l’intestazione di WordPress.

Come cambiare il colore del testo in WordPress

La modifica del colore del testo può contribuire a migliorare la leggibilità del vostro blog WordPress.

Se si utilizza un tema a blocchi, è necessario modificare il colore del testo utilizzando l’editor completo del sito.

Si può iniziare visitando la schermata Aspetto ” Editor dall’area di amministrazione di WordPress. Si aprirà l’editor completo del sito, dove si dovrà fare clic sull’icona “Stili” nell’angolo in alto a destra.

Quindi, fare clic sul pannello “Colori” per accedere alle impostazioni aggiuntive.

Una volta arrivati a questo punto, fate clic sull’opzione ‘Testo’ nella sezione ‘Elementi’.

Una volta aperte le impostazioni del colore del testo, sarà possibile vedere una serie di colori di testo sotto la sezione ‘Predefinito’.

In alternativa, è possibile utilizzare un colore di testo personalizzato facendo clic sullo strumento Colore personalizzato e aprendo il Selettore colori.

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

Suggerimento bonus: è possibile utilizzare lo strumento WebAIM Contrast Checker per verificare se il colore dello sfondo e del testo funzionano insieme. Questo strumento può aiutarvi a migliorare la leggibilità del testo sul vostro sito web.

Per personalizzare il colore del testo utilizzando i CSS, il personalizzatore di temi o SeedProd, si consiglia di consultare la nostra guida passo-passo su come cambiare il colore del testo in WordPress.

Come cambiare il colore della selezione del testo in WordPress

Quando un visitatore seleziona un testo sul vostro sito web, viene visualizzato un colore di sfondo. Il colore predefinito è il blu.

Tuttavia, a volte il colore potrebbe non adattarsi bene al vostro tema WordPress e potreste volerlo cambiare.

Aggiungendo del codice CSS ai file del tema è possibile modificare facilmente il colore della selezione del testo. Tuttavia, si tenga presente che il passaggio a un altro tema o l’aggiornamento del tema attuale farà scomparire il codice CSS.

Per questo motivo vi consigliamo di utilizzare WPCode, il miglior plugin per gli snippet di codice di WordPress presente sul mercato.

Per prima cosa, è necessario installare e attivare il plugin WPCode. Per ulteriori istruzioni, consultare la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, andare alla pagina Code Snippets ” + Add Snippets dalla barra laterale dell’amministrazione.

Quindi, è sufficiente fare clic sul pulsante “Usa snippet” sotto l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)”.

Una volta entrati nella pagina “Crea snippet personalizzato”, si può iniziare a digitare un nome per il proprio snippet di codice.

Quindi, scegliere “Snippet CSS” come “Tipo di codice” dal menu a discesa sulla destra.

Ora, copiate e incollate il seguente codice CSS nella casella “Anteprima codice”:

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

È possibile modificare il colore della selezione del testo sostituendo il codice esadecimale accanto al colore di sfondo nello snippet CSS.

Una volta aggiunto il codice, scorrere fino alla sezione “Inserimento”.

Scegliere il metodo “Inserimento automatico” per eseguire il codice automaticamente all’attivazione.

Successivamente, scorrere di nuovo verso l’alto e spostare l’interruttore “Inattivo” su “Attivo”.

Infine, fare clic sul pulsante “Salva frammento” per memorizzare le modifiche.

Ora è possibile visitare il sito Web per verificare il colore della selezione del testo.

È anche possibile modificare il colore della selezione del testo utilizzando il personalizzatore del tema o un plugin. Per maggiori dettagli, consultare il nostro tutorial su come modificare il colore predefinito della selezione del testo in WordPress.

Come cambiare il colore dei link in WordPress

È possibile modificare facilmente il colore dei link in WordPress utilizzando l’editor completo del sito o i CSS personalizzati.

Se si utilizza un tema a blocchi, andare alla schermata Aspetto ” Editor dalla barra laterale dell’amministrazione.

All’apertura dell’editor completo del sito, fare clic sull’icona “Stili” nell’angolo in alto a destra.

Quindi, fare clic sul pannello “Colori” nella colonna di destra per visualizzare altre impostazioni.

Una volta arrivati, è sufficiente fare clic sulla scheda “Collegamenti”.

In questo modo si avviano le impostazioni dei colori dei collegamenti e si vedranno i diversi colori predefiniti dei collegamenti visualizzati nella colonna di destra.

Tuttavia, è possibile utilizzare un colore di collegamento personalizzato facendo clic sullo strumento Colore personalizzato per aprire il Selettore colori.

È inoltre possibile modificare il colore del link al passaggio del mouse utilizzando l’FSE. Ciò significa che il colore del link cambierà quando qualcuno ci passerà sopra con il mouse.

Per prima cosa, è necessario passare alla scheda “Hover” dall’alto.

A questo punto, è possibile scegliere un colore predefinito o personalizzato per modificare il colore del link in hover.

Infine, fare clic sul pulsante “Salva” per memorizzare le impostazioni.

Per istruzioni più dettagliate, potete consultare la nostra guida per principianti su come cambiare il colore dei link in WordPress.

Come cambiare lo schema dei colori dell’amministrazione in WordPress

Se volete, potete anche cambiare la combinazione di colori dell’amministrazione in WordPress. Questo metodo può essere utile se si desidera che la dashboard di amministrazione corrisponda al marchio del sito web o utilizzi i propri colori preferiti.

Tuttavia, tenete presente che la modifica dello schema di colori della dashboard di WordPress non influisce sulla parte visibile del vostro sito web.

Per modificare lo schema dei colori dell’amministrazione, è sufficiente visitare la pagina Utenti ” Profilo dalla dashboard di WordPress.

Qui, accanto all’opzione “Schema di colore dell’amministratore”, sono presenti diversi schemi di colore.

Scegliete quella che preferite e poi fate clic sul pulsante “Aggiorna profilo” in fondo alla pagina per salvare le modifiche.

Per istruzioni più dettagliate, consultare la nostra guida per principianti su come cambiare lo schema dei colori dell’amministrazione in WordPress.

Bonus: affidare a professionisti la progettazione del sito web

Se ritenete che personalizzare il front-end del vostro sito web da soli sia un lavoro troppo impegnativo, potete semplicemente assumere degli esperti che lo progettino per voi.

Per questo, vi consigliamo i servizi di progettazione di siti web di WPBeginner. Il nostro team ha un’esperienza decennale nella costruzione di siti web per diverse nicchie e settori e può creare qualsiasi tipo di sito desideriate, compresi negozi WooCommerce, landing page, siti di piccole imprese e altro ancora.

WPBeginne offre anche servizi per aumentare la velocità del sito, la riparazione di siti violati e la manutenzione regolare del sito. Per maggiori informazioni, potete consultare la nostra pagina sui servizi professionali di WPBeginner.

Speriamo che questo articolo vi abbia aiutato a capire come personalizzare i colori sul vostro sito web WordPress. Potreste anche consultare il nostro articolo su come scegliere uno schema di colori perfetto per il vostro sito WordPress e la nostra guida definitiva agli elementi di design di WordPress.

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