Divi è sicuramente uno di Temi WordPress piĂ¹ popolare al giorno d'oggi. Uno degli elementi che costituisce la forza di questo tema è il suo builder (Divi Builder), che ci ricorda molto quello di Visuale Compositore.

Il Divi Builder è disponibile in due forme: il "Back-end Builder" standard e il "Visual Builder". Entrambe le interfacce consentono di creare esattamente gli stessi tipi di siti Web con gli stessi contenuti e gli stessi parametri di progettazione. L'unica differenza è l'interfaccia. Il Builder back-end risiede nella dashboard di WordPress ed è accessibile con tutte le altre impostazioni WordPress standard.

Si trova all'interno dell'interfaccia utente di WordPress e sostituisce l'editor di post di WordPress standard. Ăˆ ottimo per apportare modifiche rapide mentre sei all'interno della dashboard, ma è anche limitato dalla dashboard e viene visualizzato come una rappresentazione a blocchi del tuo sito web. Questo tutorial si concentrerĂ  solo sul visual builder.

Scarica DIVI WordPress Theme

divi builder.jpeg

Il nuovissimo Visual Builder, d'altra parte, ti consente di creare le tue pagine sul front-end del tuo sito web! Ăˆ un'esperienza straordinaria e consente una progettazione molto piĂ¹ rapida. Quando aggiungi contenuti o modifichi le impostazioni di progettazione all'interno del visual builder, le modifiche vengono visualizzate immediatamente.

Puoi fare clic sulla pagina e iniziare a digitare. Puoi evidenziare il testo e modificarne il carattere e lo stile. Puoi aggiungere nuovi contenuti, creare la tua pagina e vedere tutto ciĂ² che accade davanti ai tuoi occhi.

uso di-visual-builder.jpg

Come abilitare Visual Builder

Dopo aver effettuato l'accesso alla dashboard di WordPress, puoi navigare in qualsiasi pagina sul front-end del tuo sito Web e fare clic sul pulsante "Attiva Visual Builder" nella barra di amministrazione di WordPress per avviare il generatore. visivo.

come abilitare visual builder.jpeg

Se stai modificando la tua pagina sulla dashboard, puoi passare al visual builder facendo clic sul pulsante "Abilita Visual Builder" che si trova nella parte superiore dell'interfaccia back-end di Divi Builder (nota che devi prima attivare Divi Builder prima che venga visualizzato il pulsante del visual builder).

usa il visual builder Divi.jpeg

Le basi di Visual Builder

La potenza di Divi risiede in Visual Builder, un generatore di pagine che funziona con "Drag And Drop" che ti permette di costruire praticamente qualsiasi tipo di sito web combinando e organizzando i pezzi di contenuto.

Il builder utilizza tre blocchi di costruzione principali: sezioni, righe e moduli. Usarli all'unisono ti consente di creare un numero infinito di layout. Le sezioni sono gli elementi costitutivi piĂ¹ grandi e ospitano gruppi di file. Le file sono interne alle sezioni e servono per ospitare i moduli. I moduli vengono posizionati all'interno delle righe. Questa è la struttura di ogni sito web Divi.

sezioni

Gli elementi costitutivi piĂ¹ semplici e piĂ¹ grandi utilizzati nella progettazione di layout con Divi sono le sezioni. Sono usati per creare grandi gruppi di contenuti e questa è la prima cosa che aggiungi alla tua pagina. Sono disponibili tre tipi di sezioni: normale, speciale e intera.

Le sezioni regolari sono costituite da righe di colonne mentre le sezioni a larghezza intera sono costituite da moduli a larghezza intera che ampliano l'intera larghezza dello schermo. Le sezioni speciali consentono layout laterali piĂ¹ avanzati.

fila

Le righe si trovano all'interno delle sezioni e puoi posizionare un numero qualsiasi di righe all'interno di una sezione. Esistono molti tipi diversi di colonne tra cui scegliere. Dopo aver definito una struttura di colonne per la riga, è possibile posizionare i moduli nella colonna desiderata. Non c'è limite al numero di moduli che puoi inserire in una colonna.

moduli

I moduli sono i pezzi di contenuto che compongono il tuo sito web. Ogni modulo Divi puĂ² adattarsi a qualsiasi larghezza di colonna e sono tutti completamente reattivi.

Costruisci la tua prima pagina

I tre blocchi di base (sezioni, linee e moduli) vengono utilizzati per creare la tua pagina.

costruzione di una pagina Divi.jpg

Aggiungi la tua prima sezione

Prima di poter aggiungere qualcosa alla tua pagina, devi prima aggiungere una sezione. Le sezioni possono essere aggiunte facendo clic sul pulsante blu (+). Quando passi il mouse su una sezione giĂ  esistente nella pagina, sotto verrĂ  visualizzato un pulsante blu (+). Quando fai clic, verrĂ  aggiunta una nuova sezione sotto la sezione su cui stai attualmente passando il mouse.

Se si avvia una nuova pagina, la prima sezione verrĂ  aggiunta automaticamente.

lista delle sezioni divi.jpg

Aggiunta della prima riga

Dopo aver aggiunto la tua prima sezione, puoi iniziare ad aggiungere righe di colonne all'interno. Una sezione puĂ² contenere un numero qualsiasi di righe e puoi combinare e abbinare righe di diversi tipi di colonne per creare una varietĂ  di layout.

Per aggiungere una riga, fare clic sul pulsante verde (+) all'interno di una sezione vuota o fare clic sul pulsante verde (+) che appare quando si passa con il mouse su una riga corrente per aggiungere una nuova riga sotto. Dopo aver fatto clic sul pulsante verde (+), verrai accolto con un elenco di tipi di colonne. Scegli la colonna che preferisci e sei pronto per aggiungere il tuo primo modulo.

come inserire la riga Divi.jpeg

Aggiungi il tuo primo modulo

I moduli possono essere aggiunti all'interno delle righe e ogni riga puĂ² contenere un numero qualsiasi di moduli. I moduli sono gli elementi di contenuto della tua pagina e Divi include oltre 40 diversi elementi che puoi utilizzare per creare.

Puoi utilizzare moduli di base come Testi, Immagini e Pulsanti, o moduli piĂ¹ avanzati come Slider, Portfolio Gallerie e eCommerce Negozi.

Per aggiungere un modulo, fai clic sul pulsante grigio (+) che si trova all'interno di una colonna vuota o fai clic sul pulsante grigio (+) che esiste quando passi il mouse su un modulo nella pagina per aggiungere un nuovo modulo sotto . Dopo aver fatto clic sul pulsante, verrai accolto con un elenco di moduli.

Scegli il modulo che preferisci e verrĂ  aggiunto alla tua pagina e apparirĂ  il pannello di controllo del modulo. Usando questo pannello di controllo, puoi iniziare a configurare il tuo modulo.

inserire un modulo DIVI.jpeg

Questo è tutto per questo tutorial. Con quello che hai imparato oggi, sarai in grado di creare un layout con Divi. Torneremo con tutorial avanzati sull'argomento. Puoi già scaricare il Tema Divi.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" vuoto "layout =" espanso "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "piatto" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] SCARICA IL TEMA DIVI [/ vcex_button] [/ width_column] [» [vc_column] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "vuoto" layout = "espanso" align = "centro" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] SCARICA MODELLI DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Altri tutorial di Divi