Ciao ragazzi
Oggi vi porto un altro tutorial del template Divi 3.
Il modello è uno dei modelli più semplici e avanzati esistenti per WordPress.
Divi nella sua versione 3 ha aggiunto la possibilità di modificare direttamente nell'ambiente visivo, in questo modo è molto più facile applicare il formato desiderato poiché stiamo vedendo il risultato direttamente mentre lo stiamo modificando.
Ecco il video tutorial:
Iscriviti a un canale mi:
Se creiamo una nuova voce o pagina troviamo una schermata simile alla seguente:
Possiamo modificare da questa stessa schermata con il magnifico editor di Divi stesso, che è lontano anni luce da quello che WordPress porta di default, come vedremo in altri tutorial.
Ma se quello che vogliamo è utilizzare il visual builder di Divi 3, clicchiamo su "Utilizza Visual Builder" e ci porterà alla pagina così come viene visualizzata ma con la possibilità di modificarla direttamente.
Divi utilizza la seguente gerarchia durante la creazione del contenuto:
sezioni: È un blocco di informazioni che può essere composto da più righe di informazioni. Normalmente ogni blocco di informazioni correlate tra loro va nello stesso blocco.
Righe: Ogni riga può avere il proprio layout delle informazioni come puoi vedere nell'immagine sopra.
Moduli: In ogni casella di layout possiamo aggiungere contenuti specifici, aggiungiamo ogni contenuto specifico con un modulo:
E come puoi vedere, offre molti moduli per aggiungere diversi tipi di contenuti a seconda delle nostre esigenze.
Mentre digiti nel campo "cerca", i moduli vengono filtrati.
In questo esempio aggiungerò una diapositiva video o come viene tradotto "Slider video":
Quando facciamo clic abbiamo molte opzioni di personalizzazione e un pulsante dove dice "Aggiungi nuovo elemento", è qui che aggiungeremo l'URL del video che desideriamo:
E se salviamo cliccando sul pulsante verde possiamo vedere in tempo reale il risultato che stiamo ottenendo:
Se clicchiamo sui cerchi verdi aggiungiamo righe e se clicchiamo sui cerchi blu quelle che aggiungiamo sono nuove sezioni.
Abbiamo 3 tipi di sezioni:
Tipi di sezioni in DIVI 3
Pieno: Sono le sezioni normali, quelle che useremo di più. Crea uno spazio per aggiungere le tue righe e i tuoi moduli.
Speciale: A differenza di quello normale, lascia uno spazio per aggiungere una barra laterale o una barra laterale all'interno della sezione. In questo modo quando crei una riga hai meno spazio per visualizzare i moduli poiché hai anche uno spazio per aggiungere moduli in una nuova barra laterale che viene generata:
Lo spazio arancione è dove andrebbe la barra laterale all'interno della sezione stessa.
Intera larghezza: Genera uno spazio che occupa l'intera larghezza, senza margini. Questo tipo di sezione ha un bell'aspetto aggiungendo un'immagine sullo sfondo che occupa l'intero browser. In questo tipo di sezione, ti chiede direttamente quale modulo vuoi aggiungere:
E infine, mentre stiamo modificando con il costruttore visivo abbiamo un cerchio viola in basso che se ci clicchiamo sopra abbiamo le opzioni generali:
Da qui possiamo scegliere diverse opzioni:
Formato di visualizzazione: Nelle icone a sinistra possiamo scegliere di visualizzare in anteprima la pagina in formato computer, tablet o mobile e quindi possiamo modificare il design in formati specifici.
Possiamo salvare il design, uscire e un'opzione che mi piace molto è la cronologia delle modifiche per poter tornare a qualsiasi versione precedente di quelle che abbiamo utilizzato. È l'opzione dell'icona dell'orologio:
Finora il tutorial sul visual builder o sul visual builder DIVI.
Spero vi sia piaciuto 😉
saluti
Oscar