“Ma davvero devo mettermi a studiare Flexbox e Loop Builder di Divi 5? Tanto con Divi si fa tutto a colonne e moduli, no?”

Capisco l’obiezione. Se hai lavorato per anni con layout “a griglia” un po’ rigidi, è normale pensare che queste novità siano solo un altro giro di impostazioni da imparare… per ottenere più o meno lo stesso risultato.

Il punto è che non è così. Flexbox e Loop Builder, messi insieme, ti sbloccano una cosa molto concreta: layout moderni, ordinati e aggiornabili senza dover combattere con colonne che non si allineano, spaziature “a tentativi” e moduli che fanno sempre quasi quello che ti serve.

Se sei un freelance, lavori in una piccola agenzia o segui una PMI, questa combinazione è oro soprattutto quando il sito deve restare gestibile nel tempo: portfolio che si aggiornano da soli, griglie prodotti WooCommerce, elenchi team, pagine eventi, blog con impaginazioni più editoriali.

In pratica:

• Flexbox (cioè un insieme di controlli per decidere come i blocchi si dispongono dentro un contenitore) ti fa gestire allineamenti, spaziature e comportamento responsive senza scrivere codice.
• Loop Builder (cioè lo strumento che ti permette di ripetere un layout e riempirlo automaticamente con contenuti come articoli, prodotti o campi personalizzati) trasforma righe e colonne in contenitori dinamici.

Usati insieme, ti permettono di creare layout avanzati — come portfolio personalizzati, griglie e-commerce pulite o calendari/eventi responsive — riducendo la dipendenza da plugin di terze parti.

Capire Flexbox in Divi 5

Flexbox è un modello CSS (cioè un modo “standard” con cui il browser organizza gli elementi) pensato per disporre i blocchi in modo efficiente, con controllo preciso su spaziatura, allineamento e ordine dentro un contenitore.

Tradotto in pratica dentro Divi 5: invece di incastrarti nel vecchio sistema a griglia (colonne più rigide, allineamenti verticali sempre un po’ “artigianali”), con Flexbox riesci a ottenere:

• Layout responsive più lineari (si adattano meglio ai vari schermi).
• Riordino degli elementi (puoi cambiare l’ordine “visivo” senza toccare la struttura HTML).
• Vero allineamento verticale (hero, card, box: tutto centrato come si deve).
• Colonne/moduli ad altezza uniforme (utile per griglie e card, senza trucchi strani).

In più, in Divi 5 le sezioni “speciali” e “a larghezza piena” vengono messe da parte: al loro posto trovi nuove righe Flex e righe CSS Grid (una “griglia” più strutturata, utile quando ti serve un controllo ancora più da tabella). Risultato: gestisci praticamente tutti i layout con lo stesso approccio, più pulito e prevedibile su ogni dispositivo.

Funzioni e controlli principali

L’integrazione Flexbox di Divi 5 offre un set completo di strumenti per costruire layout dinamici e responsive.

Direzione del layout, a capo e ordine degli elementi

Flexbox ti permette di disporre righe, colonne e moduli:

• in orizzontale o verticale (direzione del layout),
• con la possibilità di mandare gli elementi a capo (utile per griglie responsive),
• e di riordinarli visivamente senza cambiare la struttura HTML.

È perfetto quando vuoi dare priorità a contenuti diversi su mobile rispetto al desktop (es. su desktop immagine a sinistra e testo a destra, su mobile prima il testo e poi l’immagine).

Strutture responsive

Puoi personalizzare dimensioni delle colonne, impostazioni Flex (come espansione o riduzione) e flusso degli elementi per ogni breakpoint (cioè le “soglie” per desktop/tablet/mobile). In pratica, il layout si adatta bene a ogni schermo senza dover creare correzioni manuali ovunque.

Nuovi modelli di riga e annidamento

Divi 5 supporta colonne “illimitate” dentro le righe e righe annidate (cioè righe dentro altre righe). Serve quando vuoi costruire gerarchie complesse, per esempio:

• una sezione “servizi” con 3 card,
• e dentro ogni card un mini layout con icona, titolo, testo e pulsante.

Le impostazioni di Spazio (Gap, cioè “distanza tra gli elementi”) sono regolabili e ti danno un controllo preciso, evitando padding “di fortuna” o CSS personalizzato solo per separare i blocchi.

Strumenti di posizionamento

Flexbox introduce centratura verticale e orizzontale immediata e altezze uniformi per moduli o colonne. Risultato: layout più curati (card tutte uguali, hero centrati, griglie ordinate) con meno tempo perso.

Come usare Flexbox

In Divi 5 puoi partire con Flexbox direttamente nel Visual Builder.

1. Aggiungi una riga.
2. Apri le impostazioni della riga e vai in Design.
3. Nel menu a tendina Layout, seleziona Flex.

Da lì imposti Direzione del layout (Riga, Colonna, Riga inversa o Colonna inversa), Allineamento e A capo, per definire come devono comportarsi gli elementi.

Puoi anche impostare dimensioni e ordine delle colonne per ogni breakpoint, così il layout resta pulito e leggibile su mobile.

Quando hai in mano queste basi, Flexbox diventa un “moltiplicatore”: layout più dinamici e coerenti, pronti per lavorare insieme al Loop Builder.

Padroneggiare il Loop Builder

Il Loop Builder di Divi 5 è la funzione che trasforma layout statici in esperienze dinamiche guidate dai contenuti.

Ti permette di “ciclare” (cioè ripetere automaticamente) elementi come:

• articoli del blog,
• termini/tassonomie (categorie, tag o tassonomie personalizzate),
• utenti,
• campi personalizzati.

E lo fai usando qualunque elemento di Divi come modello. In pratica, puoi trasformare righe, colonne o il modulo Carosello di Gruppo (un modulo che crea uno slider composto da “gruppi” ripetibili) in feed dinamici, integrandoli con prodotti WooCommerce, Advanced Custom Fields (ACF) e tipi di contenuto personalizzati.

Rispetto ai moduli “classici” di Divi (come Blog o Portfolio), che mostrano contenuti dinamici ma con layout abbastanza predefiniti, il Loop Builder ti lascia costruire una visualizzazione su misura direttamente nel Visual Builder: griglie blog, vetrine prodotti, elenco membri del team, ecc.

Include anche la gestione dell’offset (cioè lo “spostamento”: puoi avere più loop nella stessa pagina mostrando set diversi di contenuti). E mantiene tempi di caricamento ragionevoli, cosa utilissima nei siti ricchi di contenuti.

Componenti chiave e personalizzazione

La forza del Loop Builder sta nelle opzioni di personalizzazione, che ti permettono di creare layout dinamici con precisione.

Costruire i template

Crei un template (cioè il modello grafico dell’elemento che si ripete) usando qualunque modulo di Divi. Poi inserisci i tag dinamici (campi che “pescano” i dati dal contenuto) per richiamare titolo, immagine in evidenza, estratto o campi meta personalizzati.

Esempio tipico: una card prodotto con prezzo, immagine e link, tutto stilizzato nel Visual Builder.

Controlli della query

La query è, in parole povere, la “richiesta” con cui decidi quali contenuti mostrare.

Con il Loop Builder definisci cosa visualizzare scegliendo tipo di contenuto e filtri:

• per Categorie,
• per ID specifici,
• tramite Query Meta (cioè filtri basati su campi personalizzati).

Puoi ordinare per data, titolo o campi personalizzati, impostare limiti e aggiungere paginazione per una navigazione più comoda.

Questi controlli ti permettono, ad esempio, di mostrare solo gli ultimi articoli o i prodotti più venduti/valutati (se hai un campo o un criterio che li identifica).

Opzioni avanzate

Il Loop Builder supporta:

• i campi repeater di ACF (cioè liste di dati ripetibili: perfette per schede tecniche o elenchi caratteristiche),
• loop basati su utenti o ruoli (utile per pagine team o autori),
• contenuti basati su termini/tassonomie per griglie categoria o tab.

Per esempio, puoi ciclare i termini di una tassonomia per creare una griglia categorie dinamica, oppure mostrare profili utente con metadati personalizzati come ruolo e bio.

Il risultato è un sistema versatile per layout dinamici e “guidati dai dati”, senza dover essere sviluppatori.

Come usare il Loop Builder

Impostare il Loop Builder in Divi 5 è abbastanza intuitivo:

1. Nel Visual Builder seleziona una colonna.
2. Vai nella scheda Contenuto.
3. Abilita l’interruttore Elemento in loop.

Nelle impostazioni del loop seleziona un Tipo di query e un Tipo di contenuto.

Applica filtri come Categorie o Query Meta, imposta quanti elementi mostrare e scegli l’ordinamento.

Dentro il template del loop (cioè dentro quella colonna “ripetuta”), aggiungi i moduli Divi e inserisci i tag dinamici tramite l’icona Contenuto dinamico.

Il vantaggio vero è che tutto resta dentro l’ecosistema Divi: impaginazione e stile da Visual Builder, contenuti che si aggiornano da soli.

Unire Flexbox e Loop Builder: creare layout avanzati

La combinazione tra Flexbox e Loop Builder in Divi 5 ti permette di costruire siti avanzati e guidati dai contenuti, belli da vedere e pratici da gestire.

Flexbox dà il controllo del layout: elementi che si riordinano in modo intelligente, vanno a capo quando serve e mantengono altezze uniformi. Così il design resta pulito senza “trucchi” pesanti in CSS o aggiustamenti manuali infiniti.

Loop Builder, invece, rende dinamici questi contenitori, inserendo dati in tempo reale (articoli, prodotti, campi ACF, ecc.).

Il risultato tipico è questo: imposti la struttura una volta, poi il sito cresce e si aggiorna senza dover “rimettere mano al design” ogni volta che pubblichi qualcosa.

Esempi pratici e tutorial

Flexbox e Loop Builder danno il meglio quando lavorano insieme: imposti la struttura una volta, poi la riempi automaticamente con contenuti.

Sotto trovi tre esempi operativi con i passaggi principali. Ogni esempio usa Flexbox per controllare il layout e Loop Builder per popolare i contenuti in modo dinamico, con risultati leggeri e ordinati.

Esempio 1: griglia portfolio dinamica

In questo esempio crei un loop sul tipo di contenuto Progetti. Il concetto è lo stesso anche per blog e prodotti: aggiungi una riga Flex a colonna singola e poi abilita il Loop Builder a livello di colonna.

Imposta Articoli per pagina a 9.

Vai nella scheda Design ed espandi il menu Layout. Imposta lo Spazio verticale a 5px.

Ora espandi il menu Dimensioni. Imposta la Classe colonna a 1/3.

Infine espandi il menu Spaziatura. Aggiungi 15px di padding sotto e 25px di padding a sinistra e destra.

Passa nelle impostazioni della riga, scheda Design. Imposta lo Spazio orizzontale e Spazio verticale a 15px. Abilita A capo del layout.

Da qui aggiungi i moduli dentro il template del loop e assegna i tag dinamici (titolo progetto, immagine, categoria, link). Risultato: una griglia portfolio che si aggiorna da sola quando pubblichi nuovi progetti.

Esempio 2: carosello prodotti WooCommerce

Qui l’obiettivo è creare uno slider (carosello) “importante”, a tutta larghezza, con contenuti prodotto che si aggiornano in automatico.

Parti da una singola riga Flex con Colonne uguali.

Nella scheda Design della riga, espandi Dimensioni. Inserisci 100% sia per Larghezza sia per Larghezza massima.

Usando la Vista livelli (il pannello che ti fa vedere la gerarchia di sezioni/righe/moduli), apri la Sezione che contiene la riga. Vai su Design > Spaziatura e imposta 0px di padding a sinistra e destra.

Aggiungi il modulo Carosello di Gruppo alla riga.

Stilizza Frecce e Navigazione a punti in base al tuo design.

Entra nel modulo Carosello di Gruppo. Modifica il Gruppo slide del carosello cliccando l’icona Matita.

Espandi il menu Loop e abilita Elemento in loop. Nel campo Tipo di contenuto seleziona Prodotti.

Vai nel menu Sfondo e passa a Immagine di sfondo. Seleziona Immagine in evidenza prodotto (loop).

Nella scheda Design, espandi Dimensioni e imposta Altezza a 100vh (cioè 100% dell’altezza della finestra). In questo modo il carosello occupa tutta l’altezza della pagina.

Poi imposta i parametri Flex del gruppo: Giustifica contenuto su Centro e Allinea elementi su Centro.

Infine aggiungi i moduli nel gruppo per richiamare i dati WooCommerce: Titolo prodotto (loop), Descrizione prodotto, Prezzo prodotto e Link prodotto.

Risultato: uno slider a larghezza piena e a schermo intero, perfetto per mettere in evidenza prodotti selezionati nella pagina shop o in una landing promozionale.

Esempio 3: pagina loop per il blog

Questo esempio trasforma un archivio blog standard in una pagina più “editoriale”, dove i contenuti si aggiornano da soli ma l’impaginazione resta pulita e moderna. Flexbox gestisce la struttura; il Loop Builder inserisce automaticamente gli articoli.

Per ottenere questo risultato:

1. Aggiungi una riga Flex a colonna singola su una pagina nuova o esistente.
2. Vai nelle impostazioni della Colonna ed espandi il menu Loop.
3. Attiva Elemento in loop.

Trova Articoli per pagina e impostalo a 6.

Vai su Design > Dimensioni. Nel campo Classe colonna seleziona 1/3.

Espandi Spaziatura. Nei campi Padding inserisci 20px sopra, 40px sotto, e 20px a sinistra e destra.

Nella scheda Contenuto della colonna, espandi Sfondo. Poi vai su Immagine di sfondo, clicca l’icona Contenuto dinamico e scegli Immagine in evidenza (loop). Così l’immagine in evidenza dell’articolo diventa lo sfondo della colonna.

Ora regola le impostazioni Flex della riga: vai su Design della riga, apri Layout e inserisci 30px sia per Spazio orizzontale sia per Spazio verticale. Lascia le impostazioni Flex predefinite, ma abilita A capo del layout. Questo “blocca” la struttura a 1/3 e crea due righe da 3 articoli.

Apri Dimensioni e imposta la Larghezza della riga a 90%.

Infine aggiungi i tag di contenuto dinamico: Titolo articolo, Estratto articolo, Data articolo (loop), Termini articolo (loop) e così via. In pochi minuti hai una griglia blog elegante, aggiornata automaticamente quando pubblichi.

Tre casi d’uso reali (con mini procedura)

1) Freelance: portfolio che si aggiorna da solo
1) Crea un tipo di contenuto “Progetti” (o usa “Articoli” con una categoria “Portfolio”).
2) Imposta una riga Flex con A capo del layout attivo e colonne 1/3.
3) Attiva il Loop Builder sulla colonna e inserisci tag dinamici: immagine in evidenza, titolo, categoria e pulsante “Vedi progetto”.

2) Piccolo e-commerce: vetrina “prodotti in evidenza” senza plugin
1) Inserisci un Carosello di Gruppo e abilita il loop sul gruppo slide.
2) Seleziona Prodotti e filtra per categoria o per prodotti specifici (ID).
3) Stila una card coerente: immagine come sfondo, prezzo in evidenza, CTA “Acquista ora”.

3) Agenzia/PMI: pagine categorie più ordinabili e leggere
1) Crea una pagina per ogni categoria principale (es. “Servizi”, “Case study”, “Prodotti”).
2) Inserisci un loop filtrato per categoria e limita a 6/9 elementi, con paginazione.
3) Con Flexbox gestisci spazi, altezze uniformi e riordino su mobile (es. immagine sopra, testo sotto).

Creare layout avanzati con Flexbox e Loop Builder

Flexbox e Loop Builder in Divi 5 cambiano il modo di progettare con Divi: pagine meno rigide e più facili da mantenere, perché la struttura resta stabile mentre i contenuti si aggiornano automaticamente.

Flexbox ti dà la base per un design responsive davvero controllabile; Loop Builder inserisce contenuti in tempo reale senza dover appoggiarti per forza a un plugin esterno.

Che tu stia costruendo portfolio con card tutte uguali, griglie blog su misura o caroselli WooCommerce a schermo intero, l’idea è sempre la stessa: imposti un template pulito, lo colleghi ai contenuti e lo fai scalare.

Conclusione

Flexbox e Loop Builder di Divi 5 ti permettono di creare layout avanzati con più controllo sul responsive e meno compromessi sui moduli predefiniti. Una volta impostato il template, puoi riusarlo e farlo crescere con il sito, senza rifare tutto a mano.

Consiglio pratico: prova prima su una pagina di test. Replica una griglia blog o una vetrina prodotti e ottimizza spaziature, allineamenti e filtri. Se ti blocchi su query, campi personalizzati o struttura generale, ha perfettamente senso farti dare una mano da uno sviluppatore Divi di fiducia per impostare tutto nel modo più pulito.

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