Come passare a un layout scuro in 5 passaggi utilizzando le funzionalità di efficienza di Divi

Quando progetti un sito web, una delle prime decisioni che prendi consapevolmente o inconsciamente è lo stile di colore che darai al tuo sito web. I più coraggiosi tra noi avrebbero il coraggio di scegliere una tavolozza di colori vibrante completa ma, siamo onesti, è incredibilmente difficile da realizzare. Ecco perché di solito è più sicuro scegliere un layout chiaro o scuro. Nella sezione Layout predefiniti della libreria Divi, puoi trovare un sacco di layout chiari e scuri che sei libero di utilizzare durante la creazione di qualsiasi tipo di sito web. Ma cosa succede se ti piace il layout, ma preferisci avere una tavolozza di colori più scura o viceversa?

Con le funzioni di efficienza di Divi, passare da un pacchetto di layout chiaro a uno scuro e viceversa, è più facile che mai. In questo post, ti mostreremo come trasformare un layout chiaro in uno scuro in soli 5 passaggi. La quantità di tempo necessaria per effettuare questa transizione è pazzesca se stai usando le tecniche giuste. Sappi che il numero di passaggi che devi compiere dipenderà sempre dal layout su cui stai lavorando, ma una volta ottenuto l'approccio generale, sarai in grado di farlo funzionare per qualsiasi layout con cui hai a che fare.

Arriviamo ad esso!

Anteprima

In soli 5 passaggi, cambieremo la pagina di destinazione chiara di Web Freelancer Layout Pack in una scura.

Carica la pagina di destinazione del web freelance

Aggiungi una nuova pagina e abilita Visual Builder

Inizia aggiungendo una nuova pagina, dando un titolo alla tua pagina e passando a Visual Builder.

Carica pacchetto layout web freelance

Tra le tre opzioni che appaiono sullo schermo, scegli di caricare un layout predefinito.

Trova la pagina di destinazione del pacchetto di layout freelance Web nell'elenco dei pacchetti di layout gratuiti e caricala facendo clic sul pulsante verde che dice "Usa questo layout".

Passaggio 1: cambia il colore di sfondo generale

Cambia il colore di sfondo della sezione della prima sezione

È ora di iniziare! Il primo passo che ti consigliamo di fare è cambiare il colore di sfondo di tutte le sezioni della tua pagina. Una volta fatto, sarai rapidamente in grado di notare quali elementi di design devono essere modificati per corrispondere al colore di sfondo scuro. Apri la prima sezione della pagina e scegli "#0c0c0c" come colore di sfondo della sezione.

Estendi lo stile a tutte le sezioni

Non appena aggiungi il colore di sfondo, fai clic con il pulsante destro del mouse su di esso e fai clic sull'opzione "Estendi colore di sfondo".

Una volta fatto, scegli di estendere il colore di sfondo a tutte le sezioni della pagina.

Passaggio 2: cambia i colori del testo

Apri il modulo di intestazione a larghezza intera e cambia il colore del testo

Il prossimo passo che devi fare è cambiare i colori del testo che stai usando. Come forse saprai o meno, c'è un'opzione predefinita in Divi che ti consente di scegliere una tavolozza di colori chiari o scuri per il testo sulla tua pagina. Una volta scelto un colore personalizzato, tuttavia, questa opzione viene sostituita con il colore personalizzato che hai scelto. Invece di controllare ciascuno degli elementi per vedere se c'è un colore personalizzato lì, vai avanti e scegli "Chiaro" come colore del testo nel modulo di intestazione a larghezza intera.

Estendi lo stile a tutti i moduli

Quindi, estendi questo colore del testo chiaro facendo clic con il pulsante destro del mouse e selezionando l'opzione "Estendi colore del testo".

Estendi questo nuovo colore a tutti i moduli dell'intera pagina.

Modifica i colori personalizzati utilizzando la funzione di selezione multipla

Come accennato in precedenza, il passaggio precedente non si applica ai colori che sono stati scelti in anticipo. I moduli Toggle, ad esempio, hanno un colore del testo del titolo personalizzato. Invece di modificare singolarmente ciascuno degli interruttori, selezionali tutti contemporaneamente utilizzando il tasto di controllo/comando sulla tastiera e facendo clic su ciascuno dei moduli singolarmente. Dopo averli selezionati tutti, fai clic sull'icona delle impostazioni.

Ora puoi applicare le modifiche a ciascuno dei moduli selezionati contemporaneamente. In questo caso, stiamo cambiando il colore del testo del titolo in '#848484'.

Passaggio 3: cambia pulsanti

Apri le impostazioni del pulsante uno dell'intestazione a larghezza intera

È importante assicurarsi che gli inviti all'azione sulla tua pagina continuino a corrispondere alla tavolozza dei colori del layout. In questo caso, abbiamo un modulo pulsanti che ha un bell'aspetto sia su un layout chiaro che su uno scuro. Ecco perché lo estenderemo anche agli altri pulsanti della pagina. Vai avanti e apri il modulo di intestazione a larghezza intera e vai alle impostazioni del pulsante uno.

Estendi lo stile del pulsante a tutti i pulsanti della pagina

Quindi, fai clic con il pulsante destro del mouse sulle impostazioni del pulsante uno e seleziona l'opzione "Estendi gli stili del pulsante uno".

Estendi lo stile del pulsante a tutti i pulsanti dell'intera pagina.

Cambia il colore del testo del pulsante 2 nella sezione Eroe

La funzione di estensione non raggiunge il secondo pulsante del modulo di intestazione a larghezza intera perché non è un modulo autonomo. Ecco perché apriremo le impostazioni del pulsante due e cambieremo il colore del testo in "#ffffff".

Estendi gli stili a tutte le intestazioni a larghezza intera sulla pagina

Per assicurarci che questo colore del testo sia applicato a tutti i moduli di intestazione a larghezza intera sulla pagina, lo estenderemo anche.

Dopo aver fatto clic con il pulsante destro del mouse sul colore del testo e selezionato l'opzione "Estendi pulsante due colori del testo", vai avanti e applicalo a tutte le intestazioni a larghezza intera dell'intera pagina.

Passaggio 4: rimuovi margine personalizzato e sostituisci con imbottitura personalizzata

Rimuovi margine personalizzato

Quando si passa a un layout scuro, è anche importante rimuovere tutti i valori dei margini personalizzati che portano gli spazi bianchi nella pagina.

Usa invece il riempimento personalizzato

Tuttavia, puoi mantenere la distanza che c'era prima aggiungendo invece il margine personalizzato come imbottitura personalizzata.

Passaggio 5: ricerca e modifica delle impostazioni di progettazione speciali

Determinare le impostazioni di progettazione speciali

L'ultimo passaggio che dovrai compiere è molto specifico per ciascuno dei layout. Anche gli elementi di design che sono unici per un layout devono essere modificati. Questo può includere, ma non è limitato a, alcune delle seguenti impostazioni:

• Ombre della scatola
• Sfondi colonna
• Colori delle icone
• Colori divisori
• …

Usa Trova e sostituisci sul colore dell'ombra della casella di riga

Per questo particolare layout, una delle cose che dovremo cambiare è il colore dell'ombra della casella di riga che viene utilizzato. Apri le impostazioni della riga e fai clic con il pulsante destro del mouse sull'ombra della casella senza modificarla. Quindi, seleziona l'opzione "Trova e sostituisci".

L'utilizzo della funzione Trova e sostituisci è il modo migliore per modificare un codice colore specifico sull'intera pagina. Puoi facilmente sostituirlo con un altro codice colore, in questo caso '#33302f'. Questo ti assicurerà di non dover esplorare tutti gli elementi di design per vedere esattamente dove è stato utilizzato un colore.

Modifica manualmente le impostazioni che si verificano una tantum

Esistono, tuttavia, anche impostazioni di progettazione ricorrenti una tantum all'interno dei layout. Per modificarli, dovrai farlo manualmente. La riga nella schermata di stampa sottostante, ad esempio, ha un colore dell'ombra della casella che non è stato utilizzato altrove nella pagina. Ecco perché lo stiamo cambiando manualmente in '#33302f'.

Anteprima

Diamo un'ultima occhiata al risultato finale dopo aver eseguito i cinque passaggi.

Pensieri finali

In questo post, ti abbiamo guidato attraverso la trasformazione di un pacchetto di layout chiaro in uno scuro in soli 5 passaggi. Il numero di passaggi che devi eseguire dipenderà sempre dal layout su cui stai lavorando, ma nel complesso l'approccio rimane lo stesso. Se hai domande o suggerimenti, faccelo sapere nella sezione commenti qui sotto!