Crea ed esporta un Layout professionale Divi per le tue pagine WordPress

Divi è uno dei migliori temi WordPress per visualizzare portfolio, casi studio e schede di presentazione.

Non solo perché ha un Custom Post Type fatto apposta, disponibile fin dall’installazione (i Progetti), ma anche, e sopratutto, perché ti dà la possibilità di creare delle strutture di pagina personalizzate (i Layout) che puoi salvare e riutilizzare ogni volta che vuoi. Puoi creare intere strutture di pagina oppure singole parti (sezioni, righe…).

È vero, si trovano molti layout già pronti… ma è un peccato non imparare a utilizzare in autonomia il Divi Builder e non sapere come usare al meglio le sue possibilità per avere proprio il risultato che cerchi. Con questo tutorial, sarai in grado di creare un nuovo layout che salverai nella tua Libreria e che potrai applicare a post, pagine e progetti.

Alla fine, realizzerai un layout simile a quello mostrato qui a fianco. Ovviamente, potrai cambiare alcune (anzi, molte) caratteristiche mentre lavori, non è obbligatorio usare proprio quei font, quella grandezza del testo, quel colore di sfondo…
Queste sono tutte particolarità che non sono essenziali al fine di questa guida, e comunque sono piuttosto intuitive da modificare e gestire; verranno trattate in altri post relativi a come utilizzare il Divi Builder, su extradivi.it.

Inserirai un’intestazione con un’immagine a tutta ampiezza, titolo e sottotitolo sovrapposti, poi, per la parte centrale della pagina, utilizzerai un’immagine, del testo diviso in paragrafi con icone animate e delle schede per dare ulteriori informazioni.
Più in basso, un’altra immagine e delle barre percentuali che danno la misura di alcune caratteristiche principali.
Alla fine ho inserito un form, per permettere agli utenti di poterti contattare subito, una volta visto che il contenuto della pagina è di loro interesse.

Per creare questa nuova struttura puoi partire da un articolo, da una pagina o un progetto, non fa differenza.

Per prima cosa, creiamo ex-novo la base su cui costruiremo il nostro layout.

Creare la pagina di partenza

Iniziamo da un Progetto. Come detto prima, potresti iniziare anche partendo da Articoli o Pagine, questo perché il Divi Builder può essere utilizzato indifferentemente sui vari Post Type.

Per prima cosa, devi posizionarti sulla voce di menù “Progetti”, a sinistra, e cliccare su “Aggiungi nuovo”.

Si aprirà subito la schermata dell’editor: è la stessa che viene visualizzata quando crei un nuovo articolo o una nuova pagina.
Fai click su “Usa il builder Divi”, altrimenti non potremo sfruttare appieno le funzionalità che abbiamo a disposizione!

L’interfaccia cambierà e adesso, al suo interno, potrai utilizzare tutti i moduli del Divi Builder.

Potresti utilizzare anche il Builder Visivo, ma è un pochino più lento e, secondo me, all’inizio si capisce meglio il funzionamento di tutto l’insieme utilizzandolo da backend. Comunque, appena prendi un po’ la mano col Divi Builder “classico”, non avrai alcun problema anche nell’usare la versione frontend. Personalmente mi trovo bene ad alternarle: di solito imposto sezioni, righe e moduli da backend e uso il visivo preferibilmente per dimensioni e spaziature, così da avere un colpo d’occhio immediato su ciò che sto facendo.

Inizia a costruire il layout per i tuoi contenuti in Divi: l’intestazione

Come ti ho anticipato, mettiamo che tu voglia presentare le tue creazioni in maniera da mostrare subito un’immagine d’impatto, seguita da una o due sezioni informative e conclusa da un form, in modo che gli utenti possano contattarti subito: cominciamo dall’header.
Per prima cosa, crea una Sezione a larghezza intera e inserisci al suo interno un modulo “Intestazione a larghezza intera”, poi trascinala in alto rispetto alla Sezione standard iniziale, in modo che diventi il primo elemento della pagina.

A questo punto, inizia a dare ai tuoi visitatori qualche informazione sul progetto, utilizzando Titolo e Sottotitolo dell’intestazione: clicca sull’icona di modifica (le tre lineette sovrapposte a sinistra) per entrare nel pannello delle Opzioni; avrai subito davanti i campi da compilare.

Per definire le dimensioni del testo, puoi prendere 3 strade:

• mantenere le dimensioni di default (quelle impostate in automatico o modificate per tutto il sito dal “Modificatore di tema”);
• usare i controlli a disposizione nelle Opzioni del modulo stesso (alla tab “Design”);
• via CSS, se sai usarli (o vuoi imparare, cosa sempre positiva).

Per lo sfondo, ti servirà un’immagine abbastanza grande e di buona qualità (ma non troppo pesante): quella del layout di esempio è larga 1600×1100 pixel.
Caricala direttamente dal modulo dell’intestazione:  senza uscire dal pannello, scorri fino alla parte dove si impostano i vari tipi di sfondo.

Clicca sulla terza linguetta da sinistra e carica l’immagine, poi Salva ed  esci. Fai anche un primo salvataggio della bozza in WordPress, non guasta mai 🙂

Puoi visualizzare un’anteprima per vedere ciò che hai fatto fin qui, e magari puoi decidere di fare qualche cambiamento se il risultato non ti soddisfa.

Il contenuto della pagina

Immediatamente sotto l’intestazione inizia la parte di contenuto vero e proprio, dove gli utenti troveranno le informazioni più in dettaglio. Per ottenere un’area come nel layout di esempio, serve una Sezione standard sotto l’intestazione (dovrebbe già esserci, altrimenti clicca sul link apposito e creala), divisa in due colonne di uguale larghezza.
Quando crei una riga, il sistema ti presenta già una scelta delle varie suddivisioni possibili, da scegliere con un clic; se la riga esiste già, per suddividerla o cambiare la ripartizione delle colonne, basta cliccare sull’icona di sinistra che rappresenta un rettangolo diviso in tre parti.

Una volta suddivisa la riga, inseriamo nella colonna a sinistra un modulo immagine, in quella a destra un modulo testo e uno o più moduli Blurb (nell’esempio sono 5, sta a te decidere quanti metterne). Inserire l’immagine è intuitivo, aprendo il modulo possiamo caricarne una dalla Libreria media oppure dal computer.
Poi, apri il modulo testo e inserisci un Titolo 2.

Il modulo Blurb ha più impostazioni su cui agire. In questo caso, apri la sua finestra di modifica:

• nella tab “Contenuti” inserisci titolo e testo;
• scorri fino all’opzione “Usa icona” e attivala;
• apparirà il pannello con tutte le icone a disposizione, scegli quella che vuoi;
• non ho impostato alcun colore di sfondo; se vuoi, settalo dalla tavolozza sotto al panello delle icone.

Per impostare le caratteristiche dell’icona, devi passare alla tab “Design”. Puoi giocare liberamente con questi settaggi, secondo il tuo gusto. Queste sono le impostazioni che ho inserito io:

• Colore icona: #f92c89;
• Icona con cerchio: no;
• posizionamento immagine/icona: sinistra;
• usa dimensione icona personalizzata: no.

L’animazione dell’icona è controllata tramite la terza tab “Avanzate”: selezionala e scorri fino a “Animazione immagine/icona”. Trovi un menù a tendina con le possibilità a disposizione (io ho scelto “da sopra a sotto”).

Salva ed esci dalle Opzioni, salva anche la bozza del post, a ogni buon conto… 🙂

EXTRATIP: se vuoi inserire più moduli dello stesso tipo con impostazioni simili, ti conviene creare il primo, aggiustare tutte le caratteristiche che si ripeteranno (per esempio il colore dell’icona, le dimensioni del testo eccetera) e poi duplicarlo con un click sull’icona di duplicazione (evidenziata nell’immagine). In questo modo dovrai solo cambiare i testi.

Se usi il Builder visivo, puoi fare copiaincolla dello stile tra un modulo e l’altro con un semplice clic destro.

Inserisci le Schede

Il modulo Schede è perfetto per mostrare efficacemente descrizioni, dettagli e particolarità che, magari, hanno lo stesso livello di importanza e vogliamo mettere in evidenza senza allungare la schermata, ma anzi stuzzicando la curiosità del visitatore.

Si inserisce in maniera analoga agli altri, in una riga nuova creata apposta (come in questo caso), oppure in una colonna più stretta.

Inserito il modulo, per aggiungere le schede singole basta aprire le Opzioni e cliccare su Aggiungi nuovo elemento Scheda. Adesso ti basterà:

• Scrivere il titolo della scheda nel campo apposito
• Inserire il contenuto
• Salvare e passare a inserire la scheda successiva

Inseriamo un modulo di contatto

Adesso che hai inserito tutti gli elementi per informare il visitatore, perché non gli metti a disposizione un modulo per farti contattare subito?
Dopotutto, anche se questa non è una landing page (e quindi non è orientata al raggiungimento immediato della conversione), bensì una pagina informativa, chi la visita può voler chiedere ulteriori informazioni.
Per questo, in Divi hai a disposizione un modulo di contatto semplice e immediato.

Come al solito, inserisci una nuova Sezione standard e, all’interno di essa una riga. Clic su “Inserisci modulo” e scegli “Modulo di Contatto” dalla lista.

Sopra al form, io ho inserito un modulo Testo per mostrare la scritta “Desideri maggiori informazioni”: la mia sezione, infatti, nel Divi Builder è così:

Per configurare il form, apri le Opzioni: troverai già inseriti i campi per il nome, l’email e il messaggio. Se vuoi, inserisci un titolo per il form e un messaggio che l’utente vedrà una volta effettuato l’invio.

Scorri più in basso per inserire:

• l’indirizzo a cui dovrà arrivare la mail
• il testo del pulsante di invio
• la captcha, per evitare spam
• un eventuale indirizzo a cui gli utenti verranno diretti dopo aver inviato il form

Se desideri una trasparenza come nell’esempio, vai nelle opzioni della riga e inserisci un colore di sfondo: dalla tavolozza potrai aggiustare la trasparenza come preferisci. Se la vuoi proprio uguale all’esempio, nello spazio dove appare il codice del colore inserisci “rgba(0,0,0,0.25)” 😉

Come salvare il Layout nella Libreria Divi

Complimenti, hai realizzato un layout da salvare nella Libreria Divi!
Ecco come fare per memorizzarlo: torna in alto al titolo della pagina e clicca su “Salva nella libreria” nell’intestazione del Divi Builder.

Si aprirà un popup che ti chiede di inserire un nome per il Layout, inseriscilo e Salva.

Il tuo Layout adesso si trova nella Libreria Divi: da lì, puoi riutilizzarlo quanto vuoi sullo stesso sito e anche esportarlo per applicarlo a pagine di siti esterni.

Quando esporti un Layout Divi, scarichi un file in formato JSON. Non preoccuparti se non conosci il formato: sappi, per ora, che non è altro che un file di testo (quindi anche abbastanza leggero) che contiene tutte le informazioni necessarie a riportare il layout su un altro sito.

Ecco il layout oggetto di questa guida (l’ho chiamato “Progetto Modern Desk”) che ho salvato nella mia libreria:

Come puoi vedere, puoi organizzare i tuoi layout in categorie e ricercarli usando i filtri posti sopra alla tabella.
In alto ci sono i link “Organizza Categorie” e per “Importa & Esporta” i layout: quest’ultimo è quello che ci interessa ora. Per prima cosa, seleziona i/il Layout Divi da importare/esportare spuntando la casella corrispondente a sinistra del nome.
Puoi importare/esportare più di un layout alla volta, anche un’intera libreria. Naturalmente, quanti più layout ci sono, tanto più tempo ci vorrà.
Ora esporterai il Layout appena creato:

1. spunta la checkbox a sinistra per selezionare il tuo layout
2. clicca sul link “Importa & Esporta”
3. nel campo “Esporta nome del file” puoi inserire un nome per il tuo file di esportazione
4. spuntando la casella “Esporta solo voci selezionate” esporterai nel file solo il layout che hai scelto al punto 1
5. Clicca “Esporta Layout vari di Divi Builder”
6. Il sistema creerà il file e si aprirà una finestra che ti chiederà dove vuoi salvare il file
7. Scegli la posizione che preferisci sul tuo computer e Salva

Alla grande! Hai appena esportato il tuo primo Layout professionale Divi: adesso puoi applicarlo in ogni altro sito su cui è attivo il tema Divi o il Divi Builder come plugin!