Hai aperto il Visual Builder di Divi e ti sei trovato davanti pannelli, icone, barre, menu, stati responsive… e magari hai pensato: “Ok, da dove parto senza cliccare a caso per mezz’ora?”.

Bene: iniziamo da qui.

In questa guida vediamo com’è organizzata l’interfaccia di Divi 5 e, soprattutto, a cosa ti serve ogni zona mentre costruisci una pagina.

Niente giro turistico delle funzioni “perché sì”: guardiamo quello che userai davvero per creare, sistemare o consegnare un sito fatto bene.

L’obiettivo è semplice: darti una mappa chiara. Così sai dove mettere le mani, quando usare un pannello, quando ignorarlo serenamente e come evitare piccoli disastri da builder tipo: “Perché il mobile è esploso se io stavo modificando il desktop?”.

Succede. Meglio saperlo prima.

Interfaccia del Visual Builder di Divi: mappa rapida

Partiamo da una cosa semplice: l'interfaccia di Divi 5 si divide in quattro aree principali. Capite queste, tutto il resto diventa molto più leggibile.

Tre strumenti da imparare subito

Se vuoi partire senza perderti, tieni d'occhio questi tre strumenti. Nei progetti veri fanno risparmiare tempo, nervi e qualche "ma dov'era finita quella cosa?".

• Tasto destro sul canvas → apre le azioni rapide: copia, incolla stile, duplica, elimina, salva, estendi attributi. Meno caccia alle icone, più lavoro.
• Selezione multipla → selezioni più moduli insieme e li sposti o modifichi in blocco. Molto utile sulle pagine lunghe.
• Scheda Avanzate → trovi attributi HTML, elementi semantici e wrapper personalizzati. Non è solo la zona "per smanettoni": serve anche per accessibilità e struttura pulita.

Prova a guardarla così: il Canvas è dove costruisci, la Barra laterale è dove regoli, la Page Bar è dove gestisci la pagina e i salvataggi, la Builder Bar è la cassetta degli attrezzi.

Com’è organizzata l’area di lavoro di Divi 5

Divi 5 lascia molto spazio alla pagina. Le barre restano fisse, i pannelli si aprono quando servono e il canvas resta al centro, perché è lì che vedi davvero cosa stai costruendo.

Il punto è non vedere l’interfaccia come un mucchio di pulsanti.

Ogni area ha un compito preciso. Quando lo capisci, smetti di andare a tentativi e inizi a muoverti con una logica.

La Page Bar

La Page Bar è la barra in alto. Da qui gestisci impostazioni generali, canvas, viste responsive, salvataggi, anteprime e uscita dal Builder.

È la zona da controllare quando ti chiedi: “Sto modificando la pagina giusta? Sto guardando il dispositivo giusto? Ho salvato?”. Domande banali, sì. Finché non perdi venti minuti di modifiche.

La Builder Bar

La Builder Bar è a sinistra e raccoglie gli strumenti per navigare, organizzare e velocizzare il lavoro: Livelli, Ispettore, Gestore Pagine, Command Center, variabili, preset e impostazioni del Builder.

Usala quando la pagina diventa lunga o complessa. Se stai cercando un modulo sepolto a metà layout, non scrollare come in una caccia al tesoro: apri la Vista Livelli e vai dritto al punto.

Il Canvas

Il Canvas è l’area centrale. Qui costruisci la pagina e vedi il risultato in tempo reale.

Quello che modifichi qui è molto vicino a quello che vedrà il visitatore sul sito pubblicato.

È anche il posto dove userai il clic diretto, il tasto destro, la selezione multipla, gli spostamenti e le modifiche veloci. In pratica: il banco da lavoro.

La Barra laterale

La Barra laterale mostra le impostazioni dell’elemento selezionato. Clicchi su un pulsante? Vedi le impostazioni del pulsante. Clicchi su una riga? Vedi quelle della riga.

Se non selezioni nulla, trovi le impostazioni della pagina.

Qui fai il lavoro di precisione: testi, immagini, colori, spaziature, animazioni, classi, attributi. Tutto quello che porta una bozza a diventare una pagina ordinata.

Pannelli personalizzabili

I pannelli non devono stare per forza dove li trovi. Puoi agganciarli a destra o a sinistra, tenerli flottanti oppure raggrupparli in schede.

Sembra un dettaglio, ma cambia parecchio se lavori su schermi piccoli o layout pieni di elementi.

Consiglio pratico: se lavori sul design, tieni aperta la Barra laterale. Se sistemi la struttura, usa Livelli e Canvas. Se hai troppi pannelli aperti, chiudi quello che non serve.

Il builder non deve diventare una cabina di pilotaggio della NASA.

La Page Bar: pagina, responsive, salvataggi

La Page Bar è il punto da cui controlli la pagina nel suo insieme. La userai soprattutto per impostazioni generali, viste responsive e azioni finali come salvataggio, anteprima o uscita.

Menu della Page Bar

Cliccando sull’icona a forma di ingranaggio apri il menu centrale della pagina. Da qui puoi entrare nelle impostazioni della pagina, salvare il layout nella libreria, importare o esportare layout, svuotare la pagina, vedere la cronologia e tornare a pagine modificate di recente.

Quando usarlo? Quando non stai lavorando su un singolo modulo, ma sulla pagina nel suo complesso.

Navigazione del Canvas

Il Selettore del Canvas e la Vista Griglia del Canvas servono a gestire più aree di lavoro nella stessa pagina. Ogni pagina parte con un Canvas Principale, ma puoi crearne altri.

Pensali come tavoli separati: su uno costruisci la pagina, su un altro prepari un popup, su un altro ancora lavori a un menu esteso.

Così non mescoli tutto nello stesso spazio e non finisci con un layout che sembra una soffitta dopo un trasloco.

Puoi passare da un canvas all’altro con il selettore, oppure usare la vista a griglia per vederli tutti insieme.

Strumenti responsive e viewport

La sezione responsive ti permette di vedere e modificare la pagina per diversi schermi. Di base hai tre stati: Computer, Tablet e Telefono. Con i tre puntini puoi attivare breakpoint aggiuntivi. Queste opzioni fanno parte dell'editor responsive di Divi 5, pensato per gestire stati e breakpoint in modo più rapido e preciso rispetto alle versioni precedenti.

Un breakpoint è una dimensione di schermo a cui Divi applica regole specifiche.

Tradotto: puoi avere un titolo grande su desktop e più piccolo su mobile, senza duplicare il modulo.

Se lavori su casi più delicati, per esempio smartphone piccoli o monitor molto larghi, puoi attivare fino a sette breakpoint.

Non usarli per complicarti la vita: usali quando hai davvero bisogno di controllare meglio un formato specifico.

Puoi anche trascinare il bordo del Canvas per simulare larghezze diverse e vedere come reagisce il layout mentre cambia lo spazio disponibile.

Se ti serve una misura precisa, puoi inserirla direttamente nel campo dedicato. Per esempio: 360px per controllare uno smartphone piccolo.

Azioni e pubblicazione

Sul lato destro della Page Bar trovi salvataggio, annulla, ripristina, cronologia, importazione, esportazione, anteprima e uscita. Alcune icone vanno abilitate dalle Impostazioni del Builder.

Il punto pratico è questo: se lavori spesso su layout complessi, attiva le icone che usi davvero.

Non serve vedere tutto. Serve trovare subito quello che ti evita di rifare lavoro.

Annulla, ripristina e cronologia

Con annulla e ripristina torni avanti e indietro nelle modifiche recenti. Con la Cronologia vedi l’elenco dei passaggi fatti durante la sessione.

Usala quando qualcosa “non torna” e non sai quale passaggio ha creato il problema. Invece di smontare tutto, torni al punto giusto.

Portabilità e Libreria

Con Esporta e Importa puoi scaricare un layout e riutilizzarlo altrove. Per esempio: hai costruito una landing su un sito di test e vuoi portarla sul sito definitivo.

Esporti da una parte, importi dall’altra, e la struttura è pronta.

Il cestino svuota il layout. Usalo solo quando vuoi davvero ripartire da zero.

Sì, davvero davvero.

Con Aggiungi alla Libreria salvi l’intero layout oppure singoli elementi come sezioni, righe o moduli. Puoi organizzarli con categorie ed etichette: molto utile quando il progetto cresce e vuoi evitare ventisette “Layout nuovo, copia finale definitivo 2”.

Anteprima, uscita e salvataggio

La modalità Anteprima nasconde l’interfaccia del Builder e ti mostra la pagina come la vedrebbe un visitatore. Usala prima di consegnare una bozza o fare uno screenshot.

Dal menu di uscita puoi tornare all’elenco delle pagine, aprire la pagina in una nuova scheda, modificarla o rientrare nella bacheca WordPress.

Il pulsante Salva ti permette di salvare la pagina oppure impostarla come bozza, in attesa di revisione o privata.

La Builder Bar: strumenti per orientarti e lavorare più velocemente

La Builder Bar è la barra laterale sinistra. Ti aiuta a non lavorare “a vista” quando la pagina diventa complessa.

Se il Canvas è il banco da lavoro, la Builder Bar è la cassetta degli attrezzi. Non userai tutto sempre, ma quando serve devi sapere dove pescare.

Aggiungere un layout e accedere alla Divi Library

In alto trovi il pulsante per inserire layout predefiniti, elementi salvati nella Libreria Divi o layout generati con Divi AI.

Puoi partire da un elemento già salvato, da un layout pronto oppure da una richiesta scritta all’intelligenza artificiale.

Se riusi spesso lo stesso footer, lo prendi dalla libreria invece di ricostruirlo ogni volta.

Vista Livelli

La Vista Livelli mostra la pagina come un albero: sezioni, righe, colonne e moduli. Puoi cercare, espandere, rinominare e riorganizzare gli elementi senza scorrere tutta la pagina.

Quando usarla? Appena la pagina supera le tre o quattro sezioni. Se stai cercando il modulo “Testo” dentro una landing lunga, la Vista Livelli ti evita il pellegrinaggio verticale.

Consiglio pratico: rinomina i livelli principali. “Hero”, “Servizi”, “Testimonianze”, “FAQ” sono meglio di una lista infinita di “Sezione”, “Riga”, “Modulo”.

Anche il tuo io del futuro ringrazia.

L'Ispettore

L'Ispettore raccoglie in un unico punto le proprietà dell'elemento o dell'area selezionata: colori, font, dimensioni, spaziature, preset e altre impostazioni.

È utile quando vuoi capire "cosa sta succedendo" senza aprire dieci pannelli. Se una pagina ha tre tonalità di blu leggermente diverse — classico piccolo orrore — l'Ispettore ti aiuta a trovarle e uniformarle. Se vuoi evitare queste incongruenze a monte, la soluzione più efficace è lavorare con i colori globali in Divi: aggiorni il colore base e tutte le varianti collegate si allineano in automatico.

Puoi usarlo anche per modifiche in blocco: trovi un colore usato più volte dentro una sezione e lo aggiorni una volta sola.

Il Gestore Pagine

Il Gestore Pagine ti permette di aprire, creare, duplicare o eliminare pagine senza uscire dal Builder e tornare ogni volta alla bacheca WordPress.

Comodo quando lavori su più pagine dello stesso sito: home, servizi, contatti, landing. Passi da una all’altra senza spezzare il ritmo.

Nel pannello trovi un elenco ricercabile di pagine, articoli e progetti. Clicchi su una voce e Divi la apre direttamente nel Builder.

Divi può anche iniziare a caricare una pagina quando ci passi sopra con il mouse, prima ancora del clic.

Piccolo trucco pratico: quando clicchi, aspetti meno.

Dal Gestore Pagine puoi aggiungere nuove pagine, duplicare quelle esistenti o eliminare quelle che non servono più.

Il Command Center

Il Command Center serve a trovare comandi scrivendo quello che ti serve. Invece di aprire menu su menu, digiti “sezione”, “layout”, “library”, “bordo” o il nome di un modulo e arrivi prima all’azione.

È molto utile se lavori da tastiera o se conosci già il nome della funzione che stai cercando.

La ricerca filtra comandi, impostazioni, elementi, azioni di pagina e navigazione. Scrivi una parola e Divi ti mostra le opzioni collegate.

Puoi cliccare sul punto del Canvas in cui vuoi lavorare, digitare il nome di un modulo e premere Invio per inserirlo.

Puoi usarlo anche per saltare direttamente a impostazioni come ombre, bordi o spaziature, senza cercarle a mano nella sidebar.

Il Command Center non lavora solo sul Canvas: puoi aprire pagine, passare al Theme Builder o salvare il layout nella Libreria.

Puoi anche creare strutture più articolate con comandi testuali. Per esempio, scrivendo riga > colonna > elemento blurb > pulsante e usando Cmd/Ctrl + Invio, Divi genera la struttura direttamente.

Le Interazioni

Oltre alla navigazione rapida offerta dal Command Center, Divi 5 mette a disposizione un sistema dedicato alle animazioni e ai comportamenti dinamici degli elementi: le interazioni di Divi 5.

Il modello si basa su una triade logica: trigger → effetto → target. Il trigger è l'evento che avvia l'animazione (per esempio lo scroll, il click o l'hover); l'effetto è la trasformazione visiva applicata (dissolvenza, traslazione, scala, rotazione); il target è l'elemento della pagina su cui quell'effetto viene eseguito.

Questa struttura ti permette di costruire micro-animazioni precise senza scrivere codice. Puoi far apparire un titolo mentre entra nel viewport, animare un'icona al passaggio del mouse o far reagire un intero blocco all'interazione con un elemento diverso, semplicemente combinando trigger, effetto e target nel pannello dedicato.

Il sistema è particolarmente utile quando vuoi curare la UX senza appesantire il progetto con plugin aggiuntivi: tutto rimane all'interno dell'editor, con anteprima in tempo reale sul Canvas.

Vista Struttura

La Vista Struttura mostra la pagina come uno schema pulito, senza immagini, colori e dettagli visivi. Serve quando vuoi guardare solo gerarchia e organizzazione dei contenuti.

Usala quando il design ti distrae e devi capire se la pagina è costruita bene: sezioni giuste, righe ordinate, moduli al posto corretto.

Modalità X-Ray

La modalità X-Ray mantiene visibili contenuti e immagini, ma aggiunge i contorni degli elementi. Così vedi i contenitori nascosti o trasparenti che influenzano il layout.

È perfetta quando qualcosa “spinge” il contenuto ma non capisci cosa. Troppo spazio sopra una sezione? Attivi X-Ray e vedi quale contenitore sta occupando quello spazio.

Attivala quando il layout diventa fitto, soprattutto con sezioni sovrapposte, sfondi trasparenti o moduli annidati.

Icone al passaggio del mouse

L’opzione Action Icons On Hover decide se mostrare le icone di modifica quando passi il mouse su un elemento. Se la disattivi, l’interfaccia si pulisce e vedi meglio il design reale.

Utile per screenshot, presentazioni al cliente o controlli visivi senza distrazioni.

Parent Action Icons On Hover riguarda invece le icone dei contenitori principali, come sezioni e righe. Su layout pieni di moduli annidati, nasconderle rende tutto più leggibile.

Impostazioni del Builder

Dalle Impostazioni del Builder decidi come si comporta l’interfaccia: vista iniziale, pannelli, cronologia, icone visibili, tema chiaro o scuro, caricamento anticipato e altre preferenze.

Non devi configurare tutto subito.

Parti da ciò che impatta davvero il lavoro quotidiano: vista predefinita, posizione dei pannelli, icone della Page Bar e cronologia.

Modalità di visualizzazione predefinita

Puoi scegliere se aprire il Builder in Desktop, Tablet, Phone o Wireframe. Se lavori soprattutto sul mobile, partire già da quella vista ti evita un passaggio ogni volta.

Intervallo degli stati della cronologia

Questa impostazione decide ogni quanto Divi salva uno stato nella cronologia. Con un intervallo breve torni indietro a passi piccoli; con uno lungo ogni punto di recupero contiene più modifiche.

Se fai modifiche delicate, meglio un intervallo breve. Ti dà più margine se qualcosa va storto.

Posizione predefinita dei pannelli

Puoi decidere se i pannelli si aprono a destra, a sinistra, nell’ultima posizione usata o come finestre flottanti. Scegli in base al tuo modo di lavorare e alla dimensione dello schermo.

Flusso di creazione della pagina

Quando crei una nuova pagina puoi partire da una pagina bianca, dalla libreria dei layout oppure da Divi AI. Se lavori spesso con strutture già pronte, aprire subito la libreria ti fa risparmiare clic.

Icone della Page Bar

Puoi mostrare o nascondere icone come annulla, ripeti, cronologia, importazione, esportazione, svuota layout e aggiungi alla libreria.

Consiglio pratico: tieni visibili le azioni che usi spesso. Nascondi quelle rare, soprattutto su schermi piccoli.

Mostra i moduli disabilitati al 50% di opacità

Questa opzione attenua gli elementi disabilitati, per esempio quelli nascosti su mobile, invece di farli sparire del tutto. Così capisci cosa c’è nella pagina anche se non è attivo in quello stato.

Se l’opzione è disattivata, i moduli disabilitati scompaiono dal layout.

Raggruppa le impostazioni in pannelli chiusi

Questa opzione mantiene chiuse le schede Contenuto, Design e Avanzate finché non le apri tu. Utile se vuoi una sidebar più ordinata.

Aggiungi contenuto segnaposto ai nuovi moduli

Attivandola, Divi inserisce testi e immagini segnaposto nei nuovi moduli. Utile quando vuoi vedere subito la struttura del layout, anche prima dei contenuti finali.

Caricamento anticipato

Con il caricamento anticipato, Divi inizia a preparare una pagina prima ancora che tu la apra, per esempio quando passi il mouse su un link.

Risultato pratico: passaggi più rapidi tra una pagina e l’altra.

Modalità dell’interfaccia

Puoi scegliere tra tema chiaro e tema scuro per l’interfaccia del Builder. Non cambia il sito: cambia solo l’ambiente in cui lavori.

Combinazione di colori

Puoi cambiare il colore principale dell’interfaccia scegliendo tra blu, viola, rosso, verde o arancione. Anche qui: cambia il Builder, non il design del sito.

Mostra i layout del Theme Builder

Puoi mostrare o nascondere aree globali come header e footer mentre lavori sulla pagina. Se vuoi concentrarti solo sul contenuto centrale, nasconderle può aiutare.

Abilita la Barra di Amministrazione

Questa opzione mantiene visibile la barra nera di WordPress mentre lavori nel Builder. Comoda se usi spesso i collegamenti rapidi della bacheca.

Aiuto e scorciatoie

La sezione Aiuto raccoglie video tutorial per iniziare e approfondire l’uso del Builder. Utile quando vuoi capire una funzione senza uscire dal contesto di lavoro.

Trovi anche le scorciatoie da tastiera. Se lavori spesso con Divi, impararne anche solo cinque o sei cambia il ritmo: salvare, annullare, duplicare, aprire strumenti, senza prendere sempre il mouse.

Modalità chiara/scura

L’ultima voce della Builder Bar permette di passare rapidamente da modalità chiara a modalità scura senza entrare nelle impostazioni.

Variabili e preset: prima metti ordine

Qui Divi smette di essere solo un editor visuale e diventa uno strumento più solido per gestire un sistema di design.

Tradotto semplice: invece di impostare colori, font e spaziature a mano su ogni modulo, crei valori riutilizzabili.

Così, se domani cambia il colore del brand, non devi aprire trenta pagine una per una. Che è sempre una bella notizia.

Il Gestore delle Variabili

Il Gestore delle Variabili ti permette di salvare variabili riutilizzabili: colori, font, numeri, testi, immagini e link.

Esempio pratico: definisci una volta il colore principale del brand e lo usi su pulsanti, titoli e sfondi. Se cambia, aggiorni la variabile e Divi aggiorna tutto ciò che la usa.

Puoi creare colori relativi con il modello HSL, cioè tonalità, saturazione e luminosità.

In pratica, colleghi una versione più chiara o più scura al colore principale. Così resta coerente anche quando cambi il colore base. I colori relativi in HSL sono uno degli strumenti più potenti di Divi 5 per mantenere una palette armoniosa senza doverla ridefinire ogni volta da zero.

Le variabili numeriche possono contenere valori fluidi, cioè misure che cambiano in base alla dimensione dello schermo.

Per esempio, un testo può stare tra 16px e 24px, adattandosi gradualmente tra mobile e desktop.

Quando lavori per un cliente, questa è una delle prime cose da impostare bene. Nomi chiari, valori coerenti, niente --color-1 buttato lì come se qualcuno dovesse capirlo per telepatia.

Il Gestore dei Preset

I preset sono gruppi di impostazioni salvate e riutilizzabili. In Divi 5 puoi salvare sia preset completi di elemento sia preset più specifici per gruppi di opzioni.

La differenza è utile: puoi salvare un pulsante intero, oppure solo la tipografia, oppure solo colori e spaziature.

Così non sei costretto a riapplicare tutto ogni volta.

Un preset di elemento agisce sull’intero modulo. Per esempio, puoi creare il preset del pulsante principale del sito, con colore, font, bordo e ombra.

Un preset per gruppi di opzioni salva solo una parte dello stile. Per esempio, una tipografia da usare su più moduli senza portarsi dietro colori, bordi o ombre.

Puoi combinare più preset sullo stesso elemento. Su un bottone, per esempio, puoi applicare un preset di colore e un preset di spaziatura.

Se poi modifichi un preset dal Preset Manager, si aggiornano tutti gli elementi che lo usano.

In pratica: variabili e preset sono il modo più pulito per evitare siti incoerenti e difficili da mantenere. Definiscili all’inizio del progetto, non quando la pagina è già diventata una giungla.

Il Canvas: dove costruisci davvero la pagina

Il Canvas è l’area in cui lavori visivamente sulla pagina. In Divi 5 diventa più rapido grazie a clic diretto, tasto destro, selezione multipla, gestione degli attributi e modifiche in blocco.

Il principio è semplice: meno passaggi inutili, più azioni direttamente sull’elemento che stai guardando.

Menu contestuali con il tasto destro

Con il tasto destro apri un menu rapido su sezioni, righe, colonne e moduli. Da lì puoi duplicare, eliminare, spostare, copiare, incollare, ispezionare, aggiungere elementi e salvare nella libreria.

All’inizio sembra un dettaglio. Poi lo usi per mezz’ora e ti chiedi perché prima passavi sempre dai pannelli.

Modifica con un clic

Con la modifica a un clic, basta cliccare su un modulo, una riga, una colonna o una sezione per aprire le sue impostazioni nella Barra laterale.

Clicchi su un pulsante e il pannello del pulsante si apre subito.

Niente caccia all’icona dell’ingranaggio.

Selezione multipla di moduli

La selezione multipla serve quando vuoi spostare o gestire più moduli insieme. Tieni premuto Shift e clicca sui moduli che vuoi selezionare.

È utile per riorganizzare card, spostare blocchi ripetuti o sistemare una sezione senza intervenire pezzo per pezzo.

Dopo averli selezionati, puoi trascinarli nella posizione desiderata.

Estendi attributi

Extend Attributes permette di copiare e applicare stili, contenuti e preset a più elementi. Non copia per forza tutto: scegli tu cosa estendere.

Esempio: hai cambiato bordo e colore di un pulsante e vuoi applicare solo quelle modifiche agli altri pulsanti, lasciando intatti i testi. Lo fai da qui.

Puoi aggiornare tutti i pulsanti mantenendo diverso il testo di ciascuno.

Puoi decidere il livello di applicazione: gruppo, colonna, riga, sezione o pagina intera.

Qui serve attenzione: se scegli “pagina”, la modifica si propaga ovunque.

Puoi anche estendere attributi tra tipi di moduli diversi. Per esempio, lo stile del pulsante dentro un Contact Form può essere applicato ai moduli Button della pagina.

Gestione degli attributi

Oltre a estendere gli attributi, puoi copiarli e incollarli da un elemento all’altro. Dal clic destro scegli Copia attributi.

Poi fai clic destro su un altro modulo e scegli Incolla attributi. Divi ti chiede cosa vuoi incollare: tutto, solo stili, solo contenuti o parti specifiche.

Se il modulo copiato usa un preset, puoi incollare anche quello. Comodo quando vuoi rendere coerenti elementi simili senza rifare ogni impostazione a mano.

Modifica in blocco con l’Ispettore

L’Ispettore ti permette di vedere e modificare in blocco stili e contenuti di un’area selezionata. Selezioni una sezione, apri l’Ispettore e trovi colori, font, spaziature e preset usati al suo interno.

Vuoi cambiare tutti i titoli di una sezione da blu a nero? Invece di aprire ogni modulo, modifichi il colore dall’Ispettore e aggiorni tutto insieme.

Lo stesso vale per colori ripetuti dentro una sezione: l’Ispettore li individua e ti permette di sostituirli in modo rapido.

La Barra Laterale: Contenuto, Design e Avanzate

La Barra laterale è il pannello dove modifichi ciò che hai selezionato. Cambia in base all’elemento attivo: modulo, colonna, riga, sezione o pagina.

Qui trovi tre schede importanti: Contenuto, Design e Avanzate. Per lavorare bene in Divi, devi sapere quando usare ciascuna.

Breadcrumb di navigazione

Quando selezioni un modulo, in alto nella sidebar trovi i breadcrumb: modulo, colonna, riga, sezione. Ti permettono di risalire velocemente al contenitore superiore.

Utile quando non vuoi modificare il modulo, ma la colonna o la riga che lo contiene. Senza cliccare a caso nel Canvas sperando di prendere il livello giusto.

Selettore di stato responsive

Il selettore responsive ti dice quale versione dell’elemento stai modificando: desktop, tablet, mobile, hover o sticky.

Questo è importante: se sei nello stato mobile e cambi un margine, stai cambiando quel margine per mobile.

Prima di modificare, controlla sempre lo stato attivo.

Le schede Contenuto, Design e Avanzate hanno anche ricerca interna e filtri per trovare impostazioni modificate, variabili in uso e campi specifici.

Scheda Contenuto

La scheda Contenuto gestisce testi, immagini, link e dati dell’elemento. Qui trovi anche icone rapide per Editor Responsivo, Contenuti Dinamici e Divi AI.

Esempio pratico: vuoi una descrizione più breve su smartphone. Clicchi sull’Editor Responsivo accanto al campo testo e modifichi solo la versione mobile.

Preset degli elementi

Accanto al nome del modulo trovi l’icona dei Preset degli Elementi. Da qui applichi rapidamente uno stile salvato per quel tipo di modulo.

Se un preset è già applicato, Divi mostra il suo nome. Così capisci subito se quell’elemento segue uno stile condiviso o se è stato modificato a mano.

Puoi applicare un preset esistente, crearne uno nuovo dagli stili correnti o aggiungerne uno da zero.

Utile quando hai appena costruito un pulsante buono e vuoi riutilizzarlo senza rifarlo ogni volta.

Gestire layout a livello di riga e colonna

Le impostazioni di riga e colonna controllano la struttura del layout. Qui trovi strumenti utili per adattare la disposizione ai diversi dispositivi.

Template di struttura

Con Apply Structure Template puoi cambiare la disposizione delle colonne per ogni dispositivo. Per esempio: tre colonne su desktop e una colonna su mobile.

Se su tablet vuoi passare da tre colonne a una, selezioni la vista tablet e applichi un nuovo template di struttura solo per quel dispositivo.

Ordine delle colonne

Il menu Ordine nelle impostazioni della colonna decide in che sequenza appaiono le colonne quando si impilano su tablet o mobile.

È utile nei layout alternati. Su desktop hai immagine-testo, poi testo-immagine. Su mobile potresti ritrovarti immagine-testo-testo-immagine, che non è proprio il massimo.

Con l’ordine delle colonne sistemi la sequenza.

Scheda Design

La scheda Design controlla l'aspetto visivo: colori, spaziature, tipografia, bordi, dimensioni e disposizione. In Divi 5 include anche strumenti CSS come flexbox e CSS Grid, quest'ultimo particolarmente utile per costruire layout responsive complessi con pieno controllo sulla struttura della pagina.

Impostazioni componibili

Le Impostazioni Componibili ti permettono di applicare opzioni di design anche a sotto-elementi specifici di un modulo.

Nel modulo Blurb, per esempio, puoi intervenire direttamente sul titolo: sfondo, spaziatura, bordo, dimensioni. Non devi modificare tutto il blocco.

Accanto al titolo del gruppo di impostazioni trovi l’icona dei preset e quella delle impostazioni componibili.

Cliccando sull’icona, puoi aggiungere opzioni come sfondo, spaziatura, bordi e dimensioni al sotto-elemento selezionato.

Il risultato è semplice: più controllo senza aggiungere codice o strutture inutili.

Unità avanzate

Le Unità Avanzate rendono i campi numerici più flessibili. Puoi usare px, em, rem, %, vw e altre unità.

Invece di impostare sempre 16px, puoi usare 1.2rem o una misura più adatta al comportamento responsive del sito.

Puoi usare anche funzioni CSS come clamp(), calc(), min() e max().

Tradotto: puoi creare valori che si adattano allo schermo.

Per esempio, clamp(14px, 2vw, 20px) significa: non scendere sotto 14px, non superare 20px, e nel mezzo adattati alla larghezza dello schermo.

Puoi anche collegare una variabile di design a un campo. Se modifichi la variabile, tutti gli elementi collegati si aggiornano.

Layout avanzati: flexbox e CSS Grid

Divi 5 usa strumenti CSS più robusti per gestire layout solidi. I due principali sono flexbox e CSS Grid.

In breve: flexbox è ottimo per allineare elementi in una direzione — controllando proprietà come gap, justify-content e align-items — mentre Grid è più adatto quando devi gestire righe e colonne contemporaneamente.

Flexbox

Con flexbox puoi disporre gli elementi in riga o in colonna, gestire allineamento, distribuzione e spaziatura.

Per esempio, puoi mettere tre card affiancate su desktop e farle impilare su mobile. L’opzione Wrap decide se gli elementi vanno a capo quando non c’è più spazio.

Con Justify Content e Align Items controlli come gli elementi si distribuiscono dentro il contenitore: centrati, allineati ai bordi o distanziati in modo uniforme.

Con Gap gestisci la distanza tra gli elementi senza aggiungere margini manuali ovunque.

CSS Grid

CSS Grid serve quando vuoi controllare righe e colonne nello stesso layout. È utile per strutture più complesse, non solo per elementi in fila.

Puoi definire quante righe e colonne deve avere la griglia. Per esempio, 3 righe e 2 colonne per ottenere sei celle ordinate.

Con Grid puoi costruire layout con intestazione a tutta larghezza, contenuto centrale e sidebar. Poi puoi ridisporre tutto su mobile in modo più leggibile.

Quando usare Flexbox e quando Grid

Dopo aver visto i due strumenti separatamente, è utile capire quando conviene scegliere l'uno o l'altro. Ecco alcuni criteri pratici:

• Usa Flexbox quando devi allineare elementi su un singolo asse — una riga di bottoni, un menu orizzontale, una serie di card in fila.
• Usa Grid quando il layout ha due dimensioni: righe e colonne che devono coordinarsi, come una pagina con header, sidebar e contenuto principale.
• Preferisci Grid per strutture che cambiano forma su mobile in modo significativo, perché ridisporre le aree è più diretto.
• Combina i due quando necessario: Grid per la struttura generale, Flexbox per i dettagli interni a ogni cella.

La scelta tra grid o flexbox dipende quindi dalla direzione del layout: se è mono-direzionale, Flexbox basta; se serve controllo su entrambi gli assi, Grid è la soluzione giusta.

Scheda Avanzate

La scheda Avanzate serve quando vuoi più controllo su struttura, codice, accessibilità e comportamento dell’elemento.

Qui trovi attributi HTML, z-index, elementi semantici, wrapper personalizzati, interazioni e funzioni più tecniche.

Non devi usarla sempre, ma quando serve ti evita parecchi giri inutili.

Attributi

Puoi aggiungere attributi HTML personalizzati oltre a ID e classi. Per esempio, aria-label="Apri il menu di navigazione" per migliorare l'accessibilità, oppure data-animation="fade-in" per collegare comportamenti JavaScript.

Elementi semantici e wrapper HTML personalizzati

Gli Elementi Semantici ti permettono di scegliere tag HTML più significativi del classico div: article per un contenuto autonomo, aside per contenuti secondari, nav per un blocco di navigazione.

Questo aiuta l'accessibilità, la struttura e la comprensione della pagina da parte dei motori di ricerca.

I Custom HTML Wrappers ti permettono invece di avvolgere un modulo con HTML personalizzato. Per esempio, puoi aggiungere <div class="evidenziato"> prima del modulo e </div> dopo.

Gli stili CSS per questi wrapper vanno inseriti nelle impostazioni avanzate della pagina, nel campo CSS personalizzato. Se hai creato <div class="mio-wrapper">, puoi scrivere .mio-wrapper { padding: 20px; }.

Usali quando hai davvero bisogno di controllare il markup intorno a un modulo. Non sono giocattoli da provare a caso: un wrapper sbagliato può creare HTML non valido o problemi di accessibilità.

Interazioni

Le interazioni ti permettono di creare animazioni attivate dal movimento del mouse, come spostamenti, rotazioni, scalature o inclinazioni.

Puoi usarle anche con canvas separati per creare popup, pannelli laterali o menu estesi. Per esempio, un menu che compare al passaggio del mouse su una voce di navigazione.

Menu Elementi

Il menu Elementi permette di inserire moduli dentro altri moduli. In pratica abilita strutture annidate più flessibili.

Per esempio, puoi inserire un modulo Pulsante dentro un modulo Blurb, invece di creare strutture separate.

Menu Loop

Il menu Loop introduce il Loop Builder. Serve a creare blocchi che si ripetono automaticamente per contenuti dinamici, come articoli, prodotti o progetti.

Prima eri più vincolato a moduli specifici come Blog o Portfolio. Con il Loop Builder puoi creare una card personalizzata con immagine, titolo e pulsante, e farla ripetere per ogni articolo.

Errori comuni nel Visual Builder di Divi 5

Divi 5 è più fluido, ma alcune trappole restano. Te le segnalo adesso, così magari le eviti prima di passarci un pomeriggio sopra.

Confondere gli stati responsive

Prima di modificare un valore, controlla se sei su desktop, tablet o mobile. Se cambi un margine in modalità mobile, quella modifica vale per mobile.

Sembra ovvio, ma è uno degli errori più frequenti.

Controllo veloce: prima di toccare spaziature, font o dimensioni, guarda lo stato responsive attivo.

Mischiare preset e modifiche manuali

I preset funzionano bene se li rispetti. Se inizi a sovrascrivere ogni elemento a mano, perdi coerenza e ti ritrovi con un sito difficile da mantenere.

Regola pratica: se uno stile è ricorrente, aggiorna il preset. Se è un’eccezione vera, modificala manualmente.

Ma non mescolare tutto a caso.

Dare nomi poco chiari alle variabili

Variabili come --color-1 o --spacing-a sembrano innocue oggi. Tra tre settimane saranno un rebus. Meglio nomi descrittivi come --color-brand-primary o --spacing-section-vertical.

Un minuto in più nel nome ti risparmia tempo quando dovrai rimettere mano al progetto.

Usare Extend Attributes sul livello sbagliato

Extend Attributes è potente, ma va usato con attenzione. Se applichi una modifica alla pagina intera invece che alla singola sezione, potresti aggiornare elementi che non volevi toccare.

Prima di confermare, controlla sempre l’ambito: modulo, colonna, riga, sezione o pagina.

Usare wrapper HTML senza controllare la struttura

I wrapper HTML personalizzati sono utili, ma possono creare problemi se inserisci tag non adatti al contesto. Per esempio, un <section> nel punto sbagliato può rompere la struttura HTML.

Usali quando sai perché ti servono. E poi controlla l’output nel browser, soprattutto se il sito deve essere accessibile e pulito.

Beh, niente panico: sono errori risolvibili.

Però conoscerli prima ti evita la classica domanda da builder: “Perché non funziona se prima funzionava?”.

In pratica

Conoscere l’interfaccia di Divi 5 non significa imparare a memoria ogni icona. Significa capire quale strumento usare nel momento giusto.

La Page Bar ti aiuta a gestire la pagina, il responsive e i salvataggi. La Builder Bar ti fa navigare e lavorare più veloce. Il Canvas è dove costruisci. La Barra laterale è dove rifinisci.

Variabili e preset tengono il progetto ordinato. Flexbox, Grid e scheda Avanzate ti danno più controllo quando il layout diventa complesso.

Il punto pratico è questo: un sito Divi fatto bene non è una somma di moduli messi uno sotto l’altro. È una struttura pensata, coerente e facile da mantenere.

Se stai lavorando a un sito Divi e vuoi capire se la build è solida, possiamo guardarla insieme: struttura, prestazioni, accessibilità, preset, variabili e organizzazione generale.

Se hai un caso concreto, scrivimi e vediamo cosa funziona meglio per te.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes come base.