Il Builder Divi

In questa lezione andremo ad analizzare il builder avanzato di Divi, ne capiremo il funzionamento e scopriremo come realizzare delle pagine uniche.

Prima di iniziare però ci teniamo a dire che la documentazione online sul funzionamento e sulla personalizzazione di ogni elemento del tema è davvero eccezionale.

Gli sviluppatori di Elegant Themes hanno già predisposto una serie di video lezioni in inglese che, a nostro avviso, sono tra le migliori a disposizione.

Sul questo link troverai già tutti i video che spiegano ogni singolo aspetto del prodotto.

http://www.elegantthemes.com/gallery/divi/documentation/

In questo video corso sarebbe impossibile analizzare ogni singolo modulo che il tema offre, ma quello che vogliamo insegnarti è il procedimento per gestire in maniera autonoma i pannelli di impostazione dei temi avanzati, in modo che tu non ti possa trovare spiazzato quando ne acquisterai uno.

Detto questo, proviamo a realizzare una pagina da zero utilizzando uno dei più innovativi strumenti di importazione di layout.

Come vedi creando una pagina nuova dovrai abilitare il builder Divi con il tasto viola.

Ora, quello che possiamo fare per risparmiare tempo è caricare uno dei layout che sono già disponibili.

Il mio consiglio è di prenderti qualche minuto per testarli tutti e per capire che tipo di risultato generano.

Nel nostro caso supponiamo che vogliamo impostare la home del sito e scegliamo quindi ad esempio Home page estesa.

Salvando la pagina possiamo già avere un’anteprima del tipo di struttura che abbiamo importato.

Chiaramente non tutte le immagini sono presenti, e ogni elemento dovrà poi essere modificato e personalizzato, ma come puoi bene intuire è uno strumento potentissimo, che con un solo click ti consente di realizzare l’intera struttura di una pagina.

Ora vediamo però come è strutturato il builder e come possiamo andare a personalizzare ogni elemento inserito.

Quello che salta subito all’occhio è l’utilizzo dei colori per identificare il tipo di elemento a cui corrispondono.

In viola sono segnalate le sezioni a piena larghezza, in blu le sezioni standard in verde le righe all’interno delle sezioni e in grigio i moduli, che, a seconda della grandezza che impostiamo, occuperanno un determinato numero di colonne.

Se affianchiamo la pagina del builder e il suo corrispondente online possiamo sicuramente apprezzare meglio di cosa stiamo parlando.

Per modificare le impostazioni di ogni elemento è sufficiente cliccare sulla prima icona.

Come vedi, nel caso ad esempio di una sezione possiamo decidere di impostare un’immagine di sfondo, un colore, un video, impostare effetti particolari come ombra e parallasse, impostare un padding e decidere se deve essere disabilitata per un particolare dispositivo.

Questa è infatti una funzione molto utile per chi vuole che la visualizzazione da mobile sia diversa rispetto ad esempio alla versione desktop.

Creando diverse sezioni simili ma disabilitandole a seconda del dispositivo, possiamo far visualizzare ai nostri utenti solo quello che effettivamente desideriamo.

Fatte le dovute modifiche possiamo fare tre cose:

1. Salvare e aggiungere l’elemento alla libreria, (ma questo lo vedremo in una lezione a parte)
2. Visualizzare un’anteprima
3. Salvare l’elemento modificato.

Con le icone sottostanti si può duplicare l’elemento o eliminarlo.

Per cambiarne la posizione invece è sufficiente trascinarlo dove si preferisce.

Per ogni altro oggetto presente vale lo stesso discorso: a seconda dell’elemento che si sta modificando le opzioni saranno differenti.

Per lo slider, troviamo quelle di impostazione delle singole slide, intestazione, testo pulsante, sfondo, effetti e così via.

Ci sono le opzioni di design avanzato per andare a modificare ogni oggetto nei minimi dettagli e quelle per inserire un foglio si stile personalizzato.

In più troviamo alcune impostazioni di visualizzazione come le frecce ed altre che ad esempio abbiamo appena visto per le sezioni.

Per le righe avremo in più la possibilità di determinare la struttura e la grandezza delle colonne che contiene.

Per ogni elemento infine, il procedimento è sempre il medesimo.

Ognuno di essi avrà delle opzioni specifiche che potrai divertirti a sperimentare.

Come vedi, è molto semplice utilizzare il builder avanzato per modificare ogni cosa come preferisci, quello che ti occorrerà è un pò di tempo per provare tutti i moduli che sono a disposizione, e capire quali fanno al caso tuo, ma vedrai che sarà facile e divertente.

Aggiungere degli oggetti alla pagina è semplicissimo e intuitivo.

Per prima cosa aggiungiamo una sezione, e possiamo scegliere se deve essere standard, a tutta pagina, o speciale.

Quest’ultima è un’altra delle innovazioni che Divi ha portato al mondo di wordpress.

Grazie alle sezioni speciali infatti potrai strutturare la pagina creando una combinazione tra moduli e righe.

Come vedi la nuova sezione viene determinata da un diverso colore per favorirne l’individuazione.

Fatto questo possiamo, inserendo una riga, decidere come impostare la nostra struttura, e aggiungere al suo interno quello che desideriamo scegliendo tra uno dei tantissimi moduli a disposizione.

Inserendo una sezione standard, il procedimento è il medesimo, si seleziona la tipologia di struttura e poi si va ad integrare con i vari moduli.

Dopo questa panoramica sul builder, possiamo passare all’atto pratico, dandoci appuntamenteo alla prossima lezione in cui apporteremo delle modifiche reali alla nostra home page.