10 passaggi per utilizzare un nuovo pacchetto di layout Divi per il tuo prossimo progetto

Come parte della Divi Design Initiative di Elegant Themes, Kenny e il team di progettazione ci hanno viziato con nuovissimi pacchetti di layout Divi GRATUITI ogni settimana. I pacchetti di layout possono essere scaricati dal post del blog con il pacchetto di layout ogni lunedì. Molti di voi hanno utilizzato i pacchetti di layout per creare siti Web nuovi di zecca in una frazione molto piccola del tempo che normalmente impieghereste.

Nel post di oggi, ti mostrerò come ottenere il massimo da questi layout offrendo 10 passaggi chiave da seguire quando utilizzi un nuovo pacchetto Divi Layout per il tuo prossimo progetto. Ho anche incluso alcuni suggerimenti non così noti per gestire questi layout come un professionista.

Divertiti!

Nota: come tutti i passaggi, questi devono essere eseguiti nell'ordine in cui sono elencati. Ad esempio, se non imposti prima la tavolozza dei colori predefinita, non sarà disponibile quando andrai a modificare il colore di accento predefinito.

10 passaggi per utilizzare un nuovo pacchetto di layout Divi per il tuo prossimo progetto

Iscriviti al nostro canale Youtube

#1 Importa prima i layout nella tua libreria Divi

Il modo migliore per aggiungere nuovi layout al tuo tema Divi è importarli prima nella libreria Divi. Quindi, quando crei una nuova pagina, puoi aggiungere il nuovo layout dalla tua libreria.

Prima di aggiungere i layout al tuo sito Web, devi assicurarti di scaricare il pacchetto di layout dal post del blog e decomprimere il file.

Dalla dashboard di WordPress, vai su Divi > Libreria Divi e fai clic sul pulsante Importa ed esporta in alto a sinistra della pagina. Nella modalità di portabilità che si apre, seleziona la scheda di importazione e fai clic su scegli file. Trova la cartella del pacchetto di layout decompresso e seleziona il file json con "Tutti" nel nome del file. Questo caricherà tutti i layout nella tua libreria contemporaneamente, invece di doverli fare singolarmente. Ad esempio, se desideri caricare il pacchetto di layout di moda, dovresti scegliere il file denominato Fashion_All.json dalla cartella di layout. Quindi fare clic su Importa layout Divi Builder.

#2 Aggiungi layout a nuove pagine

Questo processo è piuttosto semplice. Dalla dashboard di WordPress, vai su Pagine > Aggiungi nuovo. Inserisci il titolo della pagina che devi creare. Fare clic per utilizzare Divi Builder e distribuire Visual Builder. Apri il menu delle impostazioni nella parte inferiore della pagina e fai clic sull'icona "Carica dalla libreria" più a sinistra. Nella modalità Carica da libreria che si apre, fai clic sulla scheda "Aggiungi da libreria" e seleziona il nuovo layout dall'elenco per caricare il nuovo layout.

Ripeti questo processo per ogni nuova pagina, aggiungendo un nuovo layout a ciascuna.

#3 Crea il tuo menu principale

Se si tratta di una nuova installazione, inizierai a vedere queste nuove pagine nella barra dei menu principale nell'intestazione superiore. Questo perché non hai ancora creato un menu principale, quindi per impostazione predefinita il tuo menu verrà popolato da tutte le pagine e i post che aggiungi al tuo sito.

Per creare il tuo menu principale, vai alla dashboard di WordPress e procedi come segue:

1. Passare a Aspetto > Menu.
2. Seleziona il link "Crea un nuovo menu" nella parte superiore della pagina.
3. Immettere un nome per il menu.
4. Seleziona le voci di menu nell'interruttore a sinistra sotto Pagine.
5. Fare clic su Aggiungi al menu
6. Organizza le voci del menu trascinandole in posizione.
7. Nel menu Impostazioni nella parte inferiore della pagina, selezionare "menu principale" come posizione di visualizzazione.
8. Salva menu

#4 Imposta la tua tavolozza di colori predefinita

Spesso dimentico di fare questo passaggio e me ne pento ogni volta. L'impostazione della tavolozza dei colori predefinita rende davvero conveniente modificare i colori utilizzando Divi builder. Non posso dirti quante volte devo tornare a un altro modulo per trovare un codice colore, o ispezionare un oggetto usando gli strumenti di sviluppo, o usare l'estensione del browser del mio contagocce per trovare lo stesso colore che ho usato più e più volte di nuovo. Non fare questo a te stesso!

Puoi impostare la tavolozza dei colori predefinita andando sul dashboard di WordPress e navigando su Divi > Opzioni del tema. E proprio lì nella scheda generale troverai l'opzione elencata. Aggiungi lì i colori di cui hai bisogno. È sempre una buona idea mantenere il colore bianco (#ffffff) e un paio di colori scuri (come #333333 o qualunque cosa tu abbia impostato per il colore del tuo carattere scuro) da utilizzare per lo styling di sfondi e testo facilmente.

#5 Imposta il tuo colore di accento globale

Probabilmente troverai la strada per personalizzare il tema abbastanza presto nel tuo processo di personalizzazione del tuo nuovo sito. Quando lo fai, dovresti prima cambiare il colore dell'accento globale.

Per cambiare il colore dell'accento globale, vai a Personalizzatore tema e vai a Impostazioni generali> Impostazioni layout e trova l'opzione Colore accento tema in basso.

Nota i nuovi colori disponibili nella tavolozza dei colori poiché hai aggiornato la tavolozza dei colori predefinita nelle Opzioni del tema.

Quindi, una volta modificato, salva e pubblica le tue impostazioni e aggiorna la tua pagina.

Il colore dell'accento del tema aggiornato verrà applicato automaticamente a circa 20 altri elementi, motivo per cui è importante aggiornarlo prima.

Alcuni degli elementi che vengono aggiornati automaticamente includono:

Colore del collegamento del corpo
Colore intestazione widget
Colore proiettile widget
Icone social del piè di pagina Colore al passaggio del mouse
Colore predefinito per le icone
Menu piè di pagina Colore collegamento attivo
Colore di sfondo del menu secondario
Colore di sfondo Slide In e stile intestazione a schermo intero
Icona del menu dell'hamburger per il colore del menu mobile
Colore collegamento attivo menu principale
Colore linea menu a discesa
Colore di sfondo del menu secondario
Colore di sfondo del menu a discesa secondario
Colore di sfondo del menu secondario
Colore collegamento menu principale attivo
Menu piè di pagina Colore collegamento attivo

Se non vedi che le modifiche hanno effetto immediato su questi elementi, potresti dover salvare ed uscire dalla personalizzazione, aggiornare la pagina e tornare alla personalizzazione.

#6 Dai uno stile alla tua intestazione

Puoi modellare la tua intestazione dal Personalizzatore di temi. Vai semplicemente alla dashboard di WordPress e vai a Divi > Personalizzazione del tema > Intestazione e navigazione.

Dovrai sicuramente modellare la tua intestazione in modo che corrisponda ai tuoi nuovi layout. Per prima cosa deciderei lo stile dell'intestazione che desideri per primo (predefinito, larghezza intera, centrato, ecc.), ma qualunque cosa tu scelga, assicurati di abbinare lo stile dell'intestazione con i tuoi nuovi layout. E assicurati che gli elementi del tuo menu siano facili da leggere e navigare.

Hai opzioni per i menu di navigazione principale, secondario e fisso. Prenditi il ​​tempo per modellare tutto ciò che si applica al tuo sito.

Se imposti il ​​colore dell'accento globale, alcune delle impostazioni del colore dell'intestazione verranno modificate per te. Ecco perché è importante impostare prima quel colore.

#7 Dai uno stile alla tua barra inferiore

Puoi modellare la tua barra inferiore anche dal Personalizzatore di temi. Vai semplicemente alla tua dashboard di WordPress e vai a Divi > Personalizzazione del tema > Piè di pagina > Barra in basso.

La barra in basso non dovrebbe essere trascurata. In combinazione con la barra di navigazione nella parte superiore della pagina, diventa un fermalibri necessario che incornicia l'intera pagina. Certo, lo sfondo nero predefinito può "funzionare" praticamente su qualsiasi sito, ma lo sperimenterei un po' di più. A volte mi piace dare alla barra in basso un colore di sfondo che è una tonalità leggermente più scura del colore di sfondo della sezione piè di pagina che si trova direttamente sopra di essa.

#8 Usa le scorciatoie per apportare modifiche al design del layout della tua pagina

Poiché i tuoi layout sono dotati di impostazioni di progettazione integrate nei tuoi moduli, apportare modifiche alle impostazioni di progettazione su scala globale (a livello di sito) può essere un po' noioso. Ma ci sono alcuni trucchi per accelerare il processo. Per cominciare, vorrei prima apportare modifiche al layout di una pagina. In questo modo puoi salvare gli elementi dalla pagina modificata per aggiungerli alle altre pagine che necessitano di modifiche al design. Ecco alcuni trucchi per accelerare il processo di modifica del design a un determinato layout.

Utilizzo delle opzioni del tasto destro del mouse

Non dimenticare che puoi usare le opzioni del tasto destro per copiare e incollare gli stili del modulo da un modulo all'altro purché sia ​​dello stesso tipo di modulo.

Ripristina i valori predefiniti in modo da poterli controllare utilizzando il personalizzatore del tema

Attualmente sono disponibili alcune impostazioni per i moduli che non sono personalizzabili dal personalizzatore del tema (come ad esempio l'ombra della scatola). Come regola generale, il personalizzatore del tema modificherà tutto ciò che è lasciato all'impostazione predefinita all'interno di un modulo, se tale impostazione è disponibile nel personalizzatore. Ma per alcuni moduli, potrebbe essere logico che tu proceda a ripristinare determinate impostazioni di progettazione ai valori predefiniti in modo da poter controllare lo stile dal personalizzatore del tema.

Un buon caso d'uso per questo sarebbe il testo del corpo e le impostazioni del testo dell'intestazione. Quindi, ad esempio, se hai un modulo di testo nel tuo layout che ha un carattere, un colore del testo e una dimensione del testo personalizzati, non sarai in grado di modificare quegli elementi dal personalizzatore del tema finché non li ripristini al loro stato predefinito.

Usa la casella di ricerca per individuare le impostazioni che desideri modificare

Identifica facilmente ciò che è impostato come predefinito

Mentre cerchi le opzioni che desideri modificare, noterai che alcune opzioni hanno un'icona "ripristina le impostazioni predefinite" accanto ad essa. Ciò significa che è stato modificato rispetto all'impostazione predefinita.

Ripristina tutte le impostazioni di progettazione ai valori predefiniti con un clic

Per quelli di voi che amano il visual builder tanto quanto me, probabilmente dovete ancora scoprire questo utile trucco. Se sei nel generatore di backend, fai clic per modificare le impostazioni di un modulo, quindi seleziona la scheda di progettazione. Notare qualcosa? È una piccola icona/pulsante "Ripristina impostazioni predefinite" situata all'interno della scheda.

Facendo clic su questo ti verrà chiesto di confermare che desideri perdere tali impostazioni. Se selezioni sì, tutte le impostazioni della scheda di progettazione torneranno allo stato predefinito. Questo, ovviamente, verrà aggiunto al visual builder in futuro.

#9 Salva gli elementi chiave per creare nuove pagine o post

A volte sarà necessario creare pagine o post aggiuntivi che richiedono un layout diverso. Forse vuoi un layout di pagina più generale con un'intestazione, una sezione di contenuto e una sezione a piè di pagina. O forse vuoi creare una landing page più elaborata. Puoi anche creare un layout di post personalizzato per i post del tuo blog. Il modo più semplice per farlo è utilizzare elementi dei layout che hai già per crearne di nuovi. Ed è il modo più efficiente per mantenere il tuo design coerente in tutto il sito. Esaminiamo alcuni degli elementi di base che dovresti considerare di utilizzare per creare layout di pagina aggiuntivi.

Intestazione di pagina

Questo è un gioco da ragazzi. Ogni pagina ha bisogno di un'intestazione. Salverei sicuramente una sezione di intestazione per la tua libreria. Suggerirei di trovare una versione più generica delle intestazioni in modo che si adatti a qualsiasi tipo di pagina. Di solito il layout della pagina dei contatti è un buon candidato perché di solito ha un titolo, un sottotitolo e un colore di sfondo centrati di base.

Intestazioni di sezione

È anche una buona idea salvare una versione delle intestazioni di sezione. In questo modo, quando aggiungi più contenuti alle tue nuove pagine, avrai un nuovo stile di intestazione pronto per l'uso.

Sezione dei contenuti

In molti casi, è sufficiente un semplice modulo di testo con uno sfondo bianco, ma a volte i tuoi nuovi layout hanno sezioni di contenuto uniche. Questo può essere un modulo di testo con box shadow o più moduli blurb con uno stile unico. Per mantenere la coerenza, salvare ciò che è necessario nella libreria per un uso futuro.

Pulsanti (sia chiari che scuri)

Probabilmente dovrai aggiungere più pulsanti mentre crei nuove pagine. Avere una versione scura e chiara del tuo pulsante disponibile nella tua libreria è estremamente conveniente. Suggerisco di salvare un modulo pulsanti per entrambe le versioni scure e chiare.

Sezione piè di pagina

Ogni layout di solito viene fornito con una bella sezione a piè di pagina che si trova proprio sopra la barra in basso della tua pagina. Alcuni layout hanno versioni diverse di questa sezione piè di pagina. Queste sezioni di solito includono informazioni di contatto, opzioni di posta elettronica e altre informazioni importanti. Trova quello che vuoi usare e salvalo nella tua libreria per un uso futuro.

Ora ogni volta che vuoi creare una nuova pagina avrai queste sezioni, righe e moduli tra cui scegliere.

#10 Imposta oggetti globali

Global può essere un ottimo risparmio di tempo quando apporti modifiche future al tuo sito, ma richiede un po' di lungimiranza. Devi identificare quali elementi dei tuoi layout verranno utilizzati frequentemente in tutto il tuo sito e richiederanno aggiornamenti più uniformi. Buoni candidati per gli elementi globali sarebbero le sezioni piè di pagina, i moduli di invito all'azione, i moduli di pulsanti e le opzioni di posta elettronica poiché devono essere distribuiti in tutto il sito ma richiedono lo stesso stile e contenuto uniformi. In questo modo l'aggiornamento di uno aggiornerà tutti.

Pensieri finali

Spero che tu abbia trovato utili questi passaggi. Il mio obiettivo per questo post era fornire alcune linee guida generali o best practice durante l'importazione di questi layout su una nuova installazione allo scopo di creare un nuovo sito Web. Seguire questi passaggi in ordine ti impedirà di perdere tempo e ti fornirà una buona base su cui costruire.