Creare e modificare contenuti WordPress con Divi builder

Divi è un tema grafico che si può utilizzare in WordPress per dare un aspetto piacevole al nostro sito web ed è dotato di un cosiddetto “Layout builder”, ossia di un sistema di creazione di layout molto intuitivo che ci consente di impaginare articoli e pagine del nostro sito in maniera semplice e con ottimi risultati. Vediamo quindi come si usa il Divi builder in questo tutorial in italiano.

Il primo passo da fare per andare a creare o modificare i nostri contenuti del sito è accedere all’area di amministrazione del sito, all’indirizzo www.miosito.it/wp-admin/ sostituendo a “miosito.it”, l’indirizzo web del nostro sito.
Si aprirà una schermata di login dove possiamo inserire username e password create dal nostro webmaster di fiducia.
Una volta effettuato il login, possiamo andare sul menù di sinistra di WordPress e selezionare “Pagine” o “Articoli”, a seconda del contenuto che vogliamo creare o modificare. Per le differenze tra pagine ed articoli, leggi qui.

Il Divi layout builder

Per creare un nuovo contenuto, che sia pagina o articolo, una volta scelto “Aggiungi nuovo” da uno dei due menù di WordPress, si aprirà una schermata in cui potremo scegliere se utilizzare l’editor di Divi, oppure l’editor predefinito di WordPress, che ho già illustrato in questo articolo. Diciamo che per contenuti semplici che non richiedono layout molto complessi, come gli articoli, meglio usare l’editor predefinito, mentre se vogliamo inserire elementi come slider di immagini, impaginazioni particolari, o altri orpelli, possiamo scegliere il Divi builder premendo il tasto viola.

Se invece stiamo andando a modificare un contenuto esistente, pagina o articolo, dopo aver cliccato sul titolo in grassetto della pagina o articolo da modificare, si aprirà una schermata in potremo scegliere di modificare il contenuto creato con il Divi builder, premendo sempre il tasto viola.

Una volta cliccato sul bottone viola, inizieremo a comporre oppure a modificare i contenuti esistenti, e li possiamo già vedere come appariranno nella pagina del sito vera e propria.
Ecco un esempio di un layout creato con Divi builder:

Se andiamo a creare invece un nuovo articolo o una nuova pagina, ci troveremo davanti a tre comode scelte:

• caricare un layout predefinito da un ricca libreria
• partire da zero con una pagina vuota
• clonare una pagina esistente e modificarne solo i contenuti.

In tutti i casi, i concetti da capire sono questi:

• la pagina viene strutturata in sezioni orizzontali, che possono essere a tutta larghezza oppure no e possono essere suddivise in righe e colonne
• all’interno di ogni sezione e di ogni colonna posso inserire immagini, testi, pulsanti, slider e quant’altro
• gli strumenti di ogni sezione e di ogni modulo inserito appaiono muovendo il mouse sopra ad ogni elemento.
• ogni elemento ha i suoi strumenti di modifica personalizzati per cambiare font, colori, allineamenti e per duplicarlo o spostarlo all’interno di un altro contenitore.

Come puoi vedere nella figura qui sopra, ogni tipologia di elemento ha un colore diverso:

• azzurro per le sezioni
• verde per le righe che possono essere suddivise in colonne
• grigio scuro per i moduli (tutti gli elementi come immagini, testi, titoli ecc)

Cliccando sull’icona del “+” si possono aggiungere sezioni, o righe, o moduli, mentre attraverso le icone che appaiono in alto a sinistra di ogni elemento, posso effettuare le modifiche ad ogni elemento.
Vediamo ad esempio la barra degli strumenti delle righe:

La prima icona, presente in tutti gli elementi del builder, consente di spostare dove si vuole l’elemento nella pagina (sempre incasellandolo in righe, colonne o sezioni già create.
L’icona dell’ingranaggio è quella per modificare tutti i parametri dell’elemento, come il suo contenuto, il colore, i margini, e molte altre cose:

In particolare quando inseriamo un Modulo all’interno di una sezione o di una riga, come ad esempio il modulo testo, è li che andremo a inserire il nostro testo, a decidere le spaziature ed i colore, come per il modulo immagine andremo a decidere quale immagine caricare.

Ma torniamo agli strumenti di modifica di ogni elemento. La terza icona consente di duplicare l’elemento, cosa molto comoda ad esempio se abbiamo una serie di righe nella pagina che vogliamo ripetere con contenuti diversi.
La terza icona è presente solo per le Righe, e consente di suddividerle in colonne di varie dimensioni, per impaginare in vario modo i nostri contenuti.
Poi abbiamo l’icona che consente di salvare quell’elemento in una libreria sul nostro sito ed utilizzarlo in altre pagine o articoli, e infine l’icona del cestino, per eliminare l’elemento dalla pagina.
I tre puntini finali aprono un ulteriore menù con altre opzioni.

Se ad esempio vogliamo inserire una immagine ed un testo in una nostra pagina, dovremo procedere così:

• creiamo una sezione, che può essere Standard, Speciale (per contenuti particolari) o a larghezza piena ( ed esempio per slider di immagini a tutta pagina
• inseriamo nella sezione una riga, suddividendola in 2 colonne, una per il testo e una per l’immagine
• all’interno della colonna di destra inseriamo il modulo Testo, e all’interno della colonna di sinistra inseriamo il modulo Immagine. Possiamo poi aggiungere, sotto al testo, un modulo Pulsante

Sia il testo, che l’immagine, che il pulsante, hanno tutte le proprie impostazioni che ci consentono di definire il loro aspetto fin nei minimi dettagli.

Ti consiglio di esplorare, creando una nuova pagina, tutte le possibilità grafiche ed i moduli presenti nel Divi builder, per capire bene come funziona e per provare tutte le possibilità creative che offre il builder.

Ma come salvare il nostro lavoro? Ti consiglio di salvare spesso, per non rischiare di perdere il lavoro fatto.
Per salvare il nostro layout bisogna scorrere in fondo alla schermata, dove è presente un tasto viola con tre puntini, che se cliccato si espande a mostrare tutti i comandi necessari, tra qui, in basso a destra, il tasto “Salva”

Se si tratta di una nuova pagina che abbiamo creato, invece del solo tasto “Salva” ci sarà sia “Salva bozza” che “Pubblica”, che ci consente, se premuto, di pubblicare immediatamente la pagina sul nostro sito, quindi visibile a tutti. Se invece vogliamo lavorare successivamente alla pagina senza renderla pubblica, possiamo premere su “salva bozza”

Una volta terminate le modifiche che vogliamo fare con il nostro builder visivo, possiamo premere in alto, nella barra scura di WordPress, il tasto “Esci dal builder visivo”, ed il gioco è fatto.

Se hai domande o vuoi dei chiarimenti, scrivimi pure nei commenti!