Come abbiamo visto nel post precedente, dopo aver acquistato il tema child di Divi, si avrà un pacchetto Zip da scompattare, che al suo interno conterrà un altro zip e dei file in formato .json
Questi file in formato .json sono i file che caricano i layout delle pagine all’interno della nostra Libreria Divi.
PREMESSA: la struttura a blocchi (Moduli, Righe e Sezioni).
Prima di procedere con lo spiegone (scherzo, non è ne lungo ne difficile, giuro!) è necessario capire la struttura a blocchi di Divi (e di molti page builder in realtà). In poche parole si tratta del design modulare, applicato anche in architettura, e nel web non solo nei page builder.
Il design modulare «è un approccio progettuale che suddivide un sistema in parti più piccole chiamate moduli o slitte , che possono essere creati indipendentemente e poi utilizzati in sistemi diversi.» (Da Wikipedia).
Senza avventurarci troppo nel discorso del design modulare, qui su Divi i moduli (che io chiamo blocchi per evitare di confonderci con i Moduli di Divi) sono le Sezioni, che possono contenere le Righe, che a loro volta possono contenere i Moduli. I Moduli sono i blocchi che contengono i contenuti veri e propri (cioè il testo, le immagini, le liste, i form di iscrizione alla newsletter, i form contatti, ecc).
I layout
I layout di Divi ti servono per salvare pagine, o anche blocchi all’interno di pagine, e poterli importare in altre pagine senza così dover ricostruire il blocco o la pagina da zero. Questo si può fare semplicemente salvando il bocco o la pagina all’interno della Libreria Divi.
Mettiamo il caso che hai appena finito di configurare la sezione in fondo alla tua pagina Home in cui far apparire il form per l’iscrizione alla newsletter. Ti piacerebbe che questa sezione apparisse anche al fondo della pagina Chi sono, ma sarebbe un lavorane doverla rifare.
Ecco, questo è uno dei casi in cui è comodissimo poter salvare la sezione appena creata nella Libreria Divi, semplicemente cliccando l’icona apposita.
Per richiamare quella sezione salvata nella libreria, all’intento di un’altra pagina, basterà cliccare sul + per creare una nuova sezione, e poi selezionare “Aggiungi dalla libreria”. La stessa cosa spiegata per le sezioni Divi, si potrà fare anche con i moduli e le righe, sempre dalla stessa icona.
I layout di pagina: puoi trovarne già pronti o crearne di tuoi e riutilizzarli all’interno del sito.
Come dicevo sopra, i layout si possono usare anche per salvare intere pagine, non solo sezioni, righe e moduli. I layout di pagina li trovi anche gratuitamente nella fornitissima Layouts Library di Elegant themes a cui avrai accesso gratuito acquistando una licenza per Divi.
Oltre ai layout di pagina che trovi sul web, acquistabili anche sottoforma di Child theme per Divi, potrai crearne di tuoi, da riutilizzare all’interno del tuo sito. Come? Semplice: ti basterà utilizzare la stessa icona per salvare la tua pagina all’interno della libreria Divi.
Dopo averla salvata potrai richiamarla da una nuova pagina, cliccando su Aggiungi dalla Libreria.
La libreria Divi
Ma dove vanno a finire tutti questi moduli, righe o sezioni che salviamo?
Tutti i layout salvati nella libreria andranno a finire nella schermata che si apre andando alla voce di menu Divi – Libreria Divi.
I vari elementi salvati si dividono sempre in Moduli, Righe, Sezioni e anche Layout di pagine (chiamati semplicemente layout).
Nella libreria Divi si possono vedere tutti insieme, ma quando richiamiamo uno di questi elementi, ci verranno mostrati solo gli elementi da cui lo stiamo richiamando.
Mi spiego meglio: se vogliamo importare una Sezione che abbiamo precedentemente salvato, quando cliccheremo su “Aggiungi da libreria” ci verranno mostrati solo gli elementi appartenenti alla tipologia “section”. Stessa cosa per Moduli e Righe.
La stessa cosa si potrà fare salvando un intero Layout di pagina, per poterlo riutilizzare nella costruzione di un’altra pagina (ad esempio quando abbiamo un certo numero di servizi che dovranno avere la stessa struttura di pagina), ora lo vediamo.
Carica i layout e crea la tua prima pagina
Quando si decide di utilizzare un layout scelto dalla Layouts Library di Elegant themes oppure acquistato o scaricato online, bisogna fare molta attenzione a come è gestito lo stile dei Moduli presenti. Per stile intendo i font, le dimensioni di titoli e paragrafi, i colori, ecc. In pratica tutto ciò che si trova nelle impostazioni presenti nel tab Design del Modulo.
Questi elementi di solito andrebbero gestiti in un unico posto, cioè nel customizer del nostro WordPress, e non singolarmente all’interno di ogni pagina.
Questo per un motivo molto semplice: se volessi cambiare il font a tutto il sito, facendolo dal customizer dovrò farlo una sola volta, avendo dello stile all’interno di ogni pagina invece dovrei farlo infinite volte, entrando, salvando e uscendo da ogni modulo presente all’interno di ogni pagina! Un lavoro senza senso e che lascia spazio agli errori.
Diciamo che questo è il grosso contro dei layout pronti che si trovano in rete, ma che si può facilmente risolvere resettando gli stili all’interno dei moduli appena carichiamo il layout (basterà impostare il font su Predefinito dove non lo è e cliccare l’icona di reimposta per ogni valore dei vari Titoli.
I layout di pagina dei temi OMB (video)
I layout presenti nei temi Oh My Brand! hanno già tutti i valori impostati su Predefinito. In questo modo quando li caricherai, prenderanno in automatico i font e le dimensioni che hai già impostato all’intero sito dal customizer (come farlo lo vediamo nel prossimo post).
Ed ora vediamo nella pratica, usando come esempio il nostro tema Havel, come si importano e si utilizzano i layout di pagina (non creati da te, ma acquistati o scaricati online) per creare una nuova pagina.