Come usare Divi per creare diversi modelli di combinazioni di colori delle tue pagine

La creazione di prototipi di combinazioni di colori per i tuoi clienti è un passo importante nel processo di web design. A volte, il cliente potrebbe avere già una tavolozza di colori del marchio aziendale che puoi utilizzare per il sito. Ma molte volte, dovrai offrire alcune combinazioni di colori suggerite che ritieni si adattino al marchio dell'azienda e abbiano un bell'aspetto sul loro sito web.

Con Divi, puoi facilmente modificare la combinazione di colori di qualsiasi layout di pagina utilizzando funzionalità di progettazione come Trova e sostituisci e Suggerimenti colore all'interno del visual builder. E puoi anche creare più versioni di una pagina (con diverse combinazioni di colori) per il tuo cliente.

In questo tutorial, ti guiderò attraverso il processo di utilizzo di Divi per creare nuovi modelli di combinazioni di colori per una home page. Spero che imparerai alcuni trucchi lungo la strada.

Iniziamo!

Imposta la tua nuova pagina

Userò il layout della home page di Business Coach per questo tutorial. Quindi, se non l'hai già fatto, crea una nuova pagina e distribuisci il visual builder. Quindi selezionare "Scegli layout predefinito". Dal popup Aggiungi da libreria, seleziona il layout della pagina Home di Business Coach.

Una volta caricato il layout nella pagina, non dimenticare di pubblicarlo.

Utilizzeremo questo layout della home page per creare diversi modelli di combinazioni di colori. Ma per ora, dobbiamo scegliere una nuova combinazione di colori.

Scegli la tua combinazione di colori

Potresti già avere in mente una combinazione di colori, ma in caso contrario, puoi utilizzare i suggerimenti di colore di Divi o un generatore di combinazioni di colori di terze parti. Per ulteriore ispirazione, puoi navigare sul Web alla ricerca di combinazioni di colori che funzionino bene per il tuo settore.

Utilizzo di generatori di combinazioni di colori di terze parti per creare la tua combinazione di colori

Ci sono alcuni meravigliosi generatori di combinazioni di colori di terze parti (e gratuiti) sul Web per aiutarti a scegliere la combinazione di colori perfetta per il tuo sito. Alcuni dei miei generatori di tavolozze di colori preferiti provengono da Coolers.co, Canva e Adobe.

La maggior parte di questi generatori di combinazioni di colori genererà almeno cinque colori. Assicurati di salvare tutti i colori necessari per creare la tua nuova combinazione di colori.

Creazione di una combinazione di colori utilizzando i suggerimenti di colore incorporati di Divi

Dal lancio del nuovo gestore del colore di Divi e dei suggerimenti sui colori magici, Divi tiene automaticamente traccia dei colori salvati e utilizzati di recente a cui è possibile accedere quando si modifica un'opzione di colore in Divi Builder. È possibile visualizzare ogni tavolozza facendo clic sulla scheda "Salvati" o "Recenti".

Divi ha anche uno strumento di suggerimento del colore semplice e intelligente integrato direttamente nel visual builder. Non entrerò nei dettagli dell'algoritmo utilizzato (non sono sicuro che potrei comunque), ma in termini generali, Divi genererà una tavolozza di colori complementari (e analoghi) basata sul colore di base corrente (il colore selezionato nell'opzione). Questo ti aiuterà a scegliere combinazioni di colori armoniose per il tuo design.

Per visualizzare i suggerimenti di colore (o il colore-scape), fai semplicemente clic sull'icona del colore-scape (quella con tre punti) direttamente sotto l'opzione di colore selezionata. Lì troverai tavolozze generate da colori complementari e analoghi dei tuoi colori salvati e usati di recente. Ogni riga ha una nuova combinazione di colori espansa per ogni colore nella tavolozza dei colori recente o salvata.

Sebbene questo strumento di suggerimento del colore sia progettato per aiutare con la selezione del colore a livello di sezione, riga e modulo, puoi facilmente utilizzare la tavolozza dei colori suggerita come nuova combinazione di colori per ogni pagina.

Creazione di una combinazione di colori per il layout della home page del Business Coach

Ora iniziamo a creare nuovi modelli di combinazioni di colori per il layout della home page di Business Coach che abbiamo aggiunto in precedenza alla nostra nuova pagina. Questo layout predefinito ha attualmente una combinazione di colori di base. Il colore principale è ovviamente il blu scuro utilizzato ovunque. Ha anche alcune diverse sfumature di grigio come colori d'accento. Il loro è anche un colore bianco standard per gli sfondi dei contenuti e un colore nero utilizzato per il testo. Quindi puoi immaginare che se sostituissi ogni istanza di quel colore blu scuro primario con un altro colore, avrai una combinazione di colori completamente nuova.

Dal visual builder, apri l'impostazione dell'intestazione a larghezza intera nella sezione superiore del layout e trova il Colore del testo del pulsante One. Questo è il colore blu primario utilizzato da questo layout. Ora fai clic sull'icona del paesaggio per visualizzare i suggerimenti di colore per quel colore blu corrente. Si troveranno nella tavolozza dei colori della riga più in alto.

A questo punto puoi selezionare qualsiasi colore dalla tavolozza per vedere nuovi schemi di colori, ma per questo esempio, rimarrò con il primo generato.

Salvare la tua combinazione di colori nella tavolozza dei colori predefinita

Per rendere le cose molto più convenienti lungo la strada, ti consigliamo di aggiornare i nuovi colori della tavolozza dei colori per sostituire la tavolozza predefinita dei selettori di colori nelle opzioni del tema. In questo modo i tuoi colori saranno disponibili nella tavolozza dei colori salvata all'interno di Visual Builder per tutto il resto delle modifiche di colore.

In una nuova scheda, vai a Divi > Opzioni del tema. Vedrai l'opzione della tavolozza dei colori predefinita nella scheda Generale. Non esiste un modo davvero semplice per copiare la tavolozza dei colori generata dai suggerimenti di colore per il nostro colore blu. Suggerisco di aprire la tua pagina con il visual builder attivo in una finestra e le opzioni del tema Divi in ​​un'altra finestra. Quindi copia ogni codice colore nella tavolozza dei colori predefinita.

Salva le impostazioni.

Suggerimento: potresti non voler sostituire i primi due colori predefiniti (bianco e nero) per la comodità di modificare testo e sfondi in un secondo momento, ma se hai bisogno di tutte le fessure di colore, sentiti libero di usarle.

La tavolozza dei colori predefinita non verrà aggiornata sulla pagina corrente poiché ha già ereditato la tavolozza dei colori predefinita precedente. Dovrai creare nuovamente una nuova pagina con il layout per vedere la nuova tavolozza dei colori salvata nelle tue impostazioni.

Se questo è un inconveniente eccessivo, puoi scegliere di aggiornare la tavolozza dei colori predefinita solo per la tua pagina corrente. Per farlo, apri il menu delle impostazioni e fai clic sull'icona Impostazioni pagina. Quindi aggiorna la tavolozza nella scheda Design.

Ciò aggiornerà la tavolozza dei colori per l'intera pagina senza dover creare un'altra pagina.

Il motivo per cui ho scelto di aggiornare la tavolozza dei colori predefinita per il tema (anziché solo la pagina) è stato quello di evitare di dover aggiungere nuove tavolozze di colori a ogni nuovo mockup di pagina che creerò.

Utilizzo di Trova e sostituisci per aggiornare i colori della pagina

Ora torna al layout della home page con il tuo visual builder attivo e vai all'opzione Button One Text Color sotto le impostazioni dell'intestazione a larghezza intera (lo stesso posto in cui eri prima). Ora il tuo layout salvato non viene ancora visualizzato, ma va bene. Assicurati che il colore blu scuro originale sia selezionato, quindi fai clic sull'icona del paesaggio per visualizzare a ventaglio i suggerimenti di colore. Questo mostrerà la nostra stessa combinazione di colori nella riga in alto.

Seleziona il colore marrone scuro (# 54381c).

Quindi apri il selettore colore per visualizzare il codice colore e copia il codice colore negli appunti evidenziandolo e premendo ctrl + C (o Cmd + C).

Dal momento che in realtà non vogliamo ancora apportare la modifica, fai clic sul pulsante annulla viola nella parte inferiore della modale delle impostazioni per ripristinare il colore blu originale che dobbiamo sostituire.

Ora fai clic con il pulsante destro del mouse sul colore blu originale e fai clic sull'opzione Trova e sostituisci.

Nel popup Trova e sostituisci, incolla il colore marrone sotto "Sostituisci con". Poiché vogliamo sostituire il colore su tutta la pagina, puoi mantenere l'opzione "All'interno" come "Questa pagina". Assicurati di selezionare l'opzione "Sostituisci tutto" in modo che l'ambito della modifica del colore non sia limitato ai soli colori del testo del pulsante uno. Quindi fare clic su Sostituisci.

Non dimenticare di salvare le tue impostazioni.

Ora controlla la nuova combinazione di colori.

Ora vai avanti e salva il layout nella tua libreria Divi aprendo il menu delle impostazioni e facendo clic sull'icona Salva nella libreria. Assegna al layout un nome come "Marrone", quindi fai clic su Salva nella libreria.

Ciò ti consentirà di distribuire quella versione del tuo layout su una nuova pagina.

Aggiungi il tuo nuovo layout di combinazione di colori a una nuova pagina

Per aggiungere il layout salvato con la nuova combinazione di colori marrone a una nuova pagina, prima dovrai creare una nuova pagina. Quindi dai un titolo alla tua pagina (qualcosa come "Marrone") e distribuisci il generatore visivo. Quindi seleziona Scegli un layout predefinito. Nel popup Carica dalla libreria, fai clic sulla scheda "I tuoi layout salvati" e seleziona il nuovo layout che hai appena salvato nella tua libreria.

Non dimenticare di pubblicare la tua pagina.

Ora ripeti lo stesso processo per creare una nuova pagina e aggiungere il layout salvato alla pagina. Questa volta chiama la tua pagina "Viola".

Una volta aggiunto il layout alla pagina, assicurati di pubblicarlo. Quindi apri il visual builder e apri le impostazioni dell'intestazione a larghezza intera e trova il colore del testo del pulsante One (proprio come prima). Ora dovresti vedere che la tavolozza dei colori del tema salvata è stata aggiornata con i tuoi nuovi colori. Questo tornerà utile. Fare clic con il pulsante destro del mouse sull'opzione del colore (attualmente il marrone scuro), quindi fare clic su Trova e sostituisci. Apri il selettore di colori in "Sostituisci con" per selezionare un nuovo colore dalla tavolozza dei colori salvata. Questa volta seleziona il colore viola (#5a5ae2). Quindi selezionare l'opzione Sostituisci tutto. E non dimenticare di salvare le tue impostazioni.

E come per magia, hai una combinazione di colori viola per la tua pagina!

Creazione di un mockup di pagina con combinazione di colori avanzata

Con la tua nuova combinazione di colori disponibile, potresti voler sperimentare più colori sulla tua pagina. Ad esempio, puoi scegliere di avere un colore diverso per ogni sezione della tua pagina. Questo può essere fatto facilmente anche con la funzione "Trova e sostituisci".

Per questo prossimo mockup, crea una nuova pagina e dai un nome alla tua pagina come "Multicolore". Quindi distribuire il visual builder, selezionare "Scegli un layout predefinito" e importare lo stesso layout salvato (marrone) nella pagina (proprio come hai fatto prima). Nel visual builder, apri le impostazioni dell'intestazione a larghezza intera e trova il pulsante One Text Color (proprio come prima). Fare clic con il pulsante destro del mouse sul pulsante One Text Color e selezionare "Trova e sostituisci". Quindi aggiorna quanto segue:

All'interno: questa sezione
Sostituisci con: #0f1f2e
Seleziona Sostituisci tutto

Quindi fare clic sul pulsante Sostituisci.

Non dimenticare di salvare le impostazioni.

Questo si aggiorna nella sezione dell'intestazione superiore con la combinazione di colori blu scuro.

Ora salta la seconda sezione (può mantenere la combinazione di colori marrone) e vai alla terza sezione. Trova il pulsante nella parte inferiore della sezione con il titolo "Ancora non sei sicuro? Mettiti in contatto”. Apri le impostazioni del pulsante, fai clic con il pulsante destro del mouse sul colore di sfondo del pulsante e seleziona "Trova e sostituisci".

Quindi aggiorna Trova e sostituisci come segue:

All'interno: questa sezione
Sostituisci con: #366ba2
Seleziona Sostituisci tutto

Quindi fare clic sul pulsante Sostituisci. E non dimenticare di salvare le impostazioni.

Salta la quinta sezione. Quindi ripeti lo stesso processo per sostituire il colore marrone nella sezione 6 (quella con "Aziende e persone con cui ho lavorato") con lo stesso colore blu scuro nella prima sezione. Puoi farlo aprendo il modulo di testo con il testo della citazione grande sotto l'opzione Colore del testo del testo.

Nell'ultima sezione, trova il modulo di testo nella colonna di destra e apri le impostazioni del modulo di testo. Fare clic con il tasto destro sul colore di sfondo e selezionare l'opzione Cerca e sostituisci. Aggiorna quanto segue:

All'interno: questa sezione
Sostituisci con: #5a5ae2 (il colore viola)
Seleziona Sostituisci tutto

Quindi fare clic sul pulsante Sostituisci e salvare le impostazioni.

Ora hai un mockup della home page con più colori in ogni sezione.

Creazione di un menu per visualizzare in anteprima ogni modello di combinazione di colori

L'ultimo passaggio consiste nel creare un nuovo menu principale per consentire ai clienti di visualizzare facilmente l'anteprima di ciascun modello di combinazione di colori. Dalla dashboard di WordPress, vai su Aspetto > Menu. Quindi dai un titolo al tuo menu, fai clic su Crea menu e aggiungi le pagine che hai creato al tuo nuovo menu. Quindi assicurati di selezionare Menu principale come posizione di visualizzazione. E fai clic su Salva menu.

Ora hai un sito pronto per mostrare i tuoi modelli di combinazioni di colori.

Pensieri finali

Con le opzioni di progettazione di Divi, puoi facilmente distribuire schemi di colori completamente nuovi per i layout di pagina utilizzando i suggerimenti di colore incorporati e l'opzione "Trova e sostituisci" con Visual Builder. Ciò renderà conveniente mostrare diversi modelli di combinazioni di colori per i tuoi clienti. Spero che questo tutorial ti aiuti a trovare la combinazione di colori perfetta per il tuo prossimo progetto. Non vedo l'ora di sentirti nei commenti.

Saluti!