Come applicare le tavolozze dei colori al tuo sito Web Divi

Ci sono poche cose peggiori su Internet di un sito web blando. Certo, alcuni siti web scelgono apposta il look brutalista o minimalista (guardandoti Craigslist), ma anche quelli non sono blandi . Avere una tavolozza di colori a tinta unita è un modo infallibile per far risaltare il tuo sito web dalle masse beige, quei negozi monocromatici senza ispirazione che de pressano più che im press. Per fortuna, Divi ti ha coperto con una combinazione del nostro sistema Magic Color e della funzione Global Colors. Puoi applicare facilmente le tavolozze dei colori al tuo sito Web Divi. I risultati sono destinati a stupire i tuoi visitatori.

Suggerimenti generali sulle tavolozze dei colori

Indipendentemente da quanto sia facile aggiungere una tavolozza di colori al tuo sito Web Divi, è imperativo utilizzare il giusto tipo di tavolozza per il tuo settore e marchio. Se hai già i colori del marchio, quelli sono la scelta più ovvia da inserire. Oltre ad approfondire la teoria dei colori (che è molto interessante, tra l'altro), abbiamo alcuni suggerimenti che possono aiutarti a capire da dove iniziare con il tuo nuova tavolozza di colori.

1. Scegli un sito Web di colore scuro o di colore chiaro

Nella tavolozza dei colori che utilizzerai, avrai senza dubbio colori chiari e scuri. Il contrasto è obbligatorio in una tavolozza di colori in modo che il contenuto scritto non vada perso.

Ora, questo ci porta immediatamente alla prima domanda che devi porti quando vuoi applicare una tavolozza di colori al tuo sito web; vuoi creare un sito web di colore scuro o di colore chiaro? Solo perché ne scegli uno non significa che non puoi combinarli, ma fare una scelta ti aiuta a scegliere la tavolozza dei colori più facilmente.

2. Scelta del colore

In teoria, puoi determinare tu stesso quanti colori desideri che abbia la tua tavolozza di colori. Non esiste un modo standard per applicare o determinare le tavolozze dei colori. Tuttavia, per creare un buon equilibrio di colori con Divi, consigliamo di utilizzare cinque colori.

Per aiutarti ad applicare le tavolozze dei colori con cinque colori al tuo sito web, abbiamo scelto un tipo di metodo che applicheremo costantemente allo stesso layout quando mostriamo le diverse tavolozze dei colori. Ma prima di approfondire, diamo un'occhiata ai diversi tipi di colori che devi avere nella tua tavolozza dei colori se vuoi seguire il nostro metodo.

Colori di sfondo

Assicurati che i colori di sfondo che scegli corrispondano tra loro. Utilizzerai questi colori di sfondo uno vicino all'altro e per ottenere bellissimi risultati; devono avere una certa armonia.

Colore del carattere

La prossima cosa che dovrai scegliere è il colore del carattere. Logicamente, il colore del carattere dipende dai colori di sfondo scelti. Se hai scelto colori di sfondo chiari, assicurati che il colore del carattere sia scuro e viceversa.

Collegamento ipertestuale e colore di invito all'azione

Il colore del collegamento ipertestuale che scegli è uno dei colori che danno vita al tuo sito web. Assicurati che questo colore si distingua dagli altri colori nella tua tavolozza poiché lo utilizzerai per gli inviti all'azione che includi nel tuo sito web.

Colore per gli ultimi ritocchi

Ultimo ma non meno importante, puoi scegliere un altro colore pronto all'uso che porta colore al tuo sito web. Sebbene questo colore non sia importante quanto il colore del collegamento ipertestuale, ti aiuterà a completare il bilanciamento del colore sul tuo sito web.

3. Assicurati che ci sia abbastanza contrasto

Come accennato in precedenza, è essenziale fornire un contrasto tra alcuni dei colori nella tavolozza dei colori. Se stai usando una tavolozza di colori per un sito web, questo contrasto ti aiuterà principalmente a rendere leggibili i contenuti scritti che condividi. Perché, se i tuoi contenuti non sono facili da leggere, qual è lo scopo dopo tutto?

4. Trova il giusto equilibrio nell'uso del colore

Esistono diversi modi per determinare la frequenza con cui si desidera utilizzare un particolare colore nella tavolozza dei colori. Creare un buon bilanciamento del colore è necessario se non vuoi che si sentano sopraffatti dai colori che stai usando sul tuo sito web.

Assicurati di utilizzare i colori più neutri nella tua tavolozza dei colori per la maggior parte del tempo e usa gli altri colori per accentuare il contenuto che stai fornendo.

Come aggiungere una tavolozza di colori al tuo sito Web Divi

Con tutto ciò in mente, è il momento di scavare in Divi e applicare la nuova tavolozza di colori del tuo sito!

La tavolozza Divi predefinita

Prima di tutto, accedi alla dashboard di WordPress e vai su Divi – Opzioni del tema . Nella scheda Generale , vedrai una voce intitolata Color Pickers Default Palette . Ciò che fa è consentirti di selezionare 8 colori a cui desideri accedere rapidamente ogni volta che apri le opzioni di colore nel generatore Divi. Per impostazione predefinita, questi sono colori vivaci che molte persone usano, ma non sono una tavolozza completa che dovrebbe essere utilizzata su un singolo sito web.

Tieni presente che questo non applica i colori al tuo sito stesso. Li presenta solo come opzioni rapide nel builder.

Entra nel Divi Builder

Indipendentemente dal fatto che imposti o meno la tavolozza nelle impostazioni Divi, avrai comunque la possibilità di applicare vari colori agli elementi del tuo sito. Per farlo, vai in Divi Builder e inserisci le impostazioni di qualsiasi modulo che desideri regolare nella tua nuova tavolozza.

Sotto il colore attualmente scelto per qualsiasi elemento, vedrai l' icona dei puntini di sospensione (tre punti) . Quando fai clic su di esso, viene visualizzato lo strumento Magic Color di Divi. Il builder tiene conto dei colori usati di recente e dei colori sulla pagina stessa per darti una serie di più tavolozze composte da colori complementari che dovrebbero funzionare abbastanza bene insieme.

Imposta i colori come globali

Una volta che hai deciso quali colori vuoi usare, è il momento di impostarli come globali. I colori globali possono essere impostati per cambiare su un'intera pagina, indipendentemente dal modulo o dall'elemento . Ciò significa che se vuoi scambiare 5 colori diversi, non dovrai farlo più di 100 volte, individualmente su istanze di quel colore. Lo farai 5 volte.

Per iniziare, vai in qualsiasi modulo con un selettore di colori. Sotto di esso, vedrai un collegamento chiamato Global . Fare clic su di esso e la tavolozza generale scompare. Da qui, imposterai quali colori desideri siano disponibili a livello globale facendo clic sull'icona più + .

Quando viene visualizzato il nuovo selettore, fai clic sul segno di spunta verde per aggiungere il colore corrente come opzione globale.

Non importa dove si trova il cerchio bianco. Il valore esadecimale è ciò che viene aggiunto ai colori globali. Ora vedrai il colore predefinito aggiunto accanto all'icona più. E puoi vedere che il colore è stato applicato al sito a causa dell'icona a forma di goccia sul colore invece del solito cerchio.

Inoltre, puoi fare clic con il pulsante destro del mouse su un colore scelto e selezionare "Converti in globale" per aggiungerlo all'elenco.

Ripeti questo processo per ogni colore nella tavolozza scelta in modo che alla fine l'intera tavolozza venga salvata sotto il collegamento Globale. Questo è molto importante quando ti sposti nell'applicazione della nuova tavolozza a tutti gli elementi di una pagina.

Applica colori globali

Successivamente, vuoi sostituire tutte le istanze dello stesso colore sulla tua pagina possono essere regolate a livello globale. Quello che vuoi fare è entrare nell'elemento con il colore che vuoi cambiare e fare clic con il tasto destro del mouse. Sceglierai quindi Trova e sostituisci dal menu di scelta rapida. Non convertire questo colore in globale qui . Questo fa parte del prossimo passo.

La schermata successiva sarà quella in cui scegli di sostituire quel colore con quello globale. Assicurati che in Sostituisci con fai clic su Globale, quindi scegli il colore globale che desideri estendere sulla pagina. Assicurati di selezionare la casella "Sostituisci tutti i valori trovati all'interno di ogni tipo di opzione, non limitato a [inserisci il tipo di elemento corrente]". Ciò assicurerà che, qualunque cosa accada, quel colore verrà sostituito.

Ora puoi modificare quel particolare colore globale e quando lo fai, ogni sua istanza cambierà. Nota, non hai scelto un nuovo colore dalla tavolozza. Questo cambierà solo il colore corrente. Modifichi il colore per cambiarlo in tutti i posti perché hai contrassegnato ogni istanza di quel singolo colore come globale.

Puoi modificarlo come collettivo utilizzando il selettore di colori. Basta fare clic sulla goccia per sceglierne una nuova.

Dopodiché, devi solo ripetere quel processo per ogni colore nella tua nuova tavolozza. Solo un singolo cambio per ogni colore nella tua tavolozza. Non uno scambio di ogni particolare elemento di un certo colore.

Avvolgendo

Scegliere e applicare una tavolozza di colori globale al tuo sito web Divi non è mai stato così facile. Puoi utilizzare la nostra funzione Magic Color per aiutarti a scegliere una tavolozza, quindi puoi impostarli come colori globali per il tuo sito. Una volta fatto, devi solo scegliere il colore che stai sostituendo e utilizzare la funzione trova e sostituisci integrata di Divi per sostituire quei colori sulla pagina. Con questo flusso di lavoro, sei sicuro di risparmiare un sacco di tempo mentre ridisegni vari siti Web e modifichi alcuni dei nostri pacchetti di layout gratuiti.

Divertiti!

Articolo in primo piano immagine di ART.ICON / shutterstock.com