La funzione flexbox di Divi 5 serve a riorganizzare i contenuti della sezione di apertura in modo adattivo in base al dispositivo, così quello che funziona bene su desktop non diventa un pasticcio su smartphone.

E visto che oggi gran parte delle visite arriva proprio da mobile, questa cosa conta eccome.

In pratica, con Flexbox integrato in Divi puoi spostare testo, immagini e colonne nel modo giusto a seconda della larghezza dello schermo.

Il bello è che lo fai dal builder, con pochi clic, usando anche i punti di interruzione personalizzabili per decidere cosa succede su desktop, tablet e telefono.

In questo articolo vedremo come costruire e riordinare una sezione di apertura con Flexbox, per capire bene come funziona il sistema e come sfruttarlo al meglio nel lavoro di tutti i giorni.

Come Riordinare i Contenuti della Sezione di Apertura per Ogni Dispositivo

L'obiettivo è riordinare i contenuti della sezione di apertura, cioè il blocco principale in cima alla pagina, su ogni dispositivo (desktop, tablet e smartphone) per ottenere un risultato coerente e visivamente efficace su qualsiasi schermo.

Non mi concentrerò tanto sul design della sezione in sé, ma su come usare le impostazioni di Flexbox in Divi, cioè il sistema che controlla l'ordine e la disposizione degli elementi.

Pronti? Via.

In Divi, Flexbox è integrato come sistema di struttura predefinito. Quando aggiungi una nuova riga, la modalità flexbox è già selezionata in automatico.

Se invece stai lavorando con un pacchetto di layout o con un sito di partenza già configurato, potrebbe servirti attivarla a mano.

Per farlo ti basta aprire la scheda Progettazione nelle impostazioni della riga, espandere il menu Struttura e impostare Stile della struttura su Flex.

Da qui puoi accedere ai controlli di Flexbox: Direzione della struttura (cioè la direzione degli elementi, riga o colonna), Giustifica contenuto (l'allineamento sull'asse principale), Allinea elementi (l'allineamento sull'asse secondario) e A capo della struttura (se gli elementi vanno a capo oppure restano tutti su una sola riga).

Tutte queste impostazioni sono adattive: puoi configurarle in modo diverso per ogni punto di interruzione direttamente nel Builder Visuale, cioè nell'editor visuale di Divi.

Per esempio: su desktop puoi tenere gli elementi affiancati in orizzontale, mentre su smartphone puoi impilarli uno sotto l'altro, senza toccare una riga di codice.

Abilitare i punti di interruzione adattivi in Divi

Prima di iniziare, assicurati di abilitare tutti e sette i punti di interruzione adattivi, cioè le soglie di larghezza dello schermo in cui la struttura può cambiare.

Questo passaggio ti serve per controllare davvero come appare il sito su dispositivi di dimensioni diverse.

Individua il menu a tre puntini nella barra degli strumenti in alto, al centro dell'editor visuale, e selezionalo per aprire le impostazioni.

Quando compare il pannello Punti di interruzione adattivi globali, attiva i punti di interruzione che vuoi abilitare.

Poi clicca su Salva e infine su Aggiorna, così quelle viste verranno aggiunte al costruttore visuale.

Oltre alla vista Desktop predefinita, hai a disposizione sei punti di interruzione aggiuntivi, cioè sei diverse dimensioni di schermo su cui puoi lavorare in modo separato.

Si parte dal formato Ultra Wide, pensato per schermi molto larghi, e si arriva al Phone Wide, cioè lo smartphone in orizzontale, passando per le viste Tablet e Phone.

Le modifiche fatte su ciascuna vista vengono salvate in modo indipendente, quindi quello che fai su una non va a sballare le altre.

Caratteristiche principali di Flexbox

• Direzione della struttura: puoi scegliere tra riga orizzontale, riga inversa, colonna verticale e colonna inversa (Riga, Riga inversa, Colonna, Colonna inversa) per controllare il flusso degli elementi. È utile, per esempio, quando vuoi invertire l'ordine dei contenuti su mobile.
• Allineamento orizzontale e verticale: le opzioni Giustifica contenuto e Allinea elementi ti permettono di posizionare gli elementi con precisione. Puoi centrarli, spingerli agli estremi, distribuirli con spazio uguale tra loro (Spazio tra), con spazio anche ai lati (Spazio intorno, Spazio uniforme) oppure farli estendere per riempire lo spazio disponibile (Allunga).
• Gestione dell'andata a capo (a capo): controlla cosa succede quando lo spazio non basta. Puoi far andare gli elementi a capo su una nuova riga (A capo), invertire l'ordine di quella riga (A capo inverso) oppure tenerli tutti su un'unica riga senza interruzioni (Nessun a capo).
• Elementi annidati: puoi inserire righe e moduli uno dentro l'altro senza limitazioni, creando strutture a più livelli, come griglie con contenuti sovrapposti.
• Integrazione adattiva: funziona insieme ai punti di interruzione e all'editor adattivo di Divi, quindi puoi impostare direzioni, allineamenti e ordini delle colonne diversi per desktop, tablet e mobile.
• Modelli di struttura: sono disponibili modelli di riga predefiniti basati su Flexbox, utili per costruire rapidamente sezioni di apertura e altre strutture comuni.

Ordine di visualizzazione e modelli di struttura

Una delle funzioni più utili di Flexbox per il riordinamento adattivo è il campo Ordine di visualizzazione.

In Divi puoi assegnare un valore numerico alle singole colonne dentro una riga Flex, cioè un contenitore flessibile. Questi valori ti permettono di scambiare la posizione delle colonne senza usare impostazioni di visibilità o CSS personalizzato.

Per esempio: puoi tenere un'immagine a sinistra e il testo a destra su schermo grande.

Poi puoi impostare la colonna del testo su ordine 1 e quella dell'immagine su ordine 2 su schermo piccolo, così il testo appare per primo.

Nel campo Ordine di visualizzazione puoi inserire qualsiasi valore numerico.

Il valore predefinito è 0: gli elementi con numeri più bassi appaiono prima nel flusso visivo, quelli con numeri più alti vengono dopo.

Sono consentiti anche i valori negativi, che portano un elemento prima di quelli con valore 0 o superiore.

Ad esempio, assegnare -1 a una colonna la porta in cima, mentre un valore 1 la sposta dopo gli elementi con ordine 0.

Questi valori di ordine sono completamente adattivi.

Puoi impostarli separatamente per ogni dimensione dello schermo direttamente nel costruttore visuale.

In questo modo hai un controllo preciso sull'ordine di visualizzazione degli elementi, senza dover modificare la struttura del documento e senza intervenire a mano nel codice.

Vantaggi di Flexbox

Flexbox in Divi semplifica parecchio la progettazione adattiva, perché ti permette di riordinare gli elementi tra un dispositivo e l'altro con facilità.

Grazie alle opzioni di ordine di visualizzazione e direzione del contenuto, puoi dare priorità a quello che deve apparire prima.

Tipo: mettere il testo sopra l'immagine su mobile, senza duplicare sezioni, senza nascondere moduli e senza scrivere codice a mano.

Aumenta anche la flessibilità generale del layout: gli elementi possono crescere, ridursi o distribuirsi automaticamente per adattarsi allo spazio disponibile.

Il risultato sono impaginazioni fluide, che si adattano meglio a schermi diversi e a quantità di contenuto variabili.

Anche il codice generato resta più pulito e leggero, e questo aiuta sia la velocità della pagina sia la reattività del builder visuale, soprattutto quando la struttura diventa più complessa o annidata.

Ad esempio, in una sezione di apertura con testo a sinistra e immagine a destra, puoi invertire l'ordine su smartphone in pochi clic, direttamente dall'anteprima del builder visuale e senza toccare una riga di codice.

I controlli sono intuitivi, le anteprime sono immediate e le opzioni per ogni dispositivo rendono le modifiche veloci da fare e facili da capire.

Cosa Sono i Modelli di Struttura?

A completare l'ordine di visualizzazione ci sono i Modelli di Struttura di Divi.

Questi strumenti ti permettono di cambiare la disposizione delle colonne in base alle dimensioni dello schermo. Quindi, per esempio, due colonne affiancate su desktop possono diventare una singola colonna su smartphone, così i contenuti restano più leggibili e ordinati.

Ad esempio, una struttura a due colonne su Desktop può essere trasformata in una struttura a una colonna per tablet e mobile, offrendo un'esperienza di navigazione migliore ai visitatori del sito.

I modelli di struttura sono configurazioni predefinite, come colonne uguali, colonne asimmetriche o righe sovrapposte, che puoi applicare con un clic dalla scheda Contenuto della riga.

Ogni modello imposta automaticamente il modo in cui le colonne si distribuiscono nello spazio, usando Flex o CSS Grid come base tecnica.

Per esempio: se vuoi che su desktop il testo e l'immagine stiano affiancati in parti uguali, ti basta selezionare il modello a due colonne uguali senza toccare il codice.

Puoi applicare un modello diverso per ogni punto di interruzione.

Questo significa che la stessa riga può trasformarsi completamente su Tablet, Phone o schermi molto larghi, senza duplicare i contenuti e senza ricorrere al CSS.

Riordinare i contenuti per tablet e smartphone

Con tutti i punti di interruzione personalizzabili attivati, possiamo regolare ogni vista per offrire la migliore esperienza di navigazione su ciascun dispositivo.

Se non hai capito ancora bene il meccanismo, non preoccuparti: adesso lo vediamo passo passo.

Regola il punto di interruzione Tablet Wide

In questo layout è presente una riga a due colonne con una riga annidata nella seconda colonna.

Per iniziare, fai clic sul punto di interruzione Tablet Wide, cioè la modalità di visualizzazione per tablet di grandi dimensioni.

Nella scheda Contenuto, clicca il pulsante Applica Modello di Struttura che trovi sotto gli elementi della colonna.

Quando appare la finestra di dialogo Reimposta la struttura delle colonne di Tablet Wide, seleziona un modello predefinito per modificare la struttura delle colonne della riga.

In questo esempio viene scelto un modello a colonna sfalsata (Colonna sfalsata) per distribuire meglio il contenuto nella seconda colonna.

Nella vista Tablet Wide, vai alla scheda Progettazione.

Apri il menu Struttura per accedere alle impostazioni di allineamento della riga. Nel campo Allinea elementi, cioè l'allineamento degli elementi, scegli Inizio per posizionare tutti i contenuti nella parte alta della riga.

Regola il punto di interruzione Tablet

Clicca sul punto di interruzione Tablet, cioè la modalità di visualizzazione per tablet standard.

Nel punto di interruzione Tablet Wide, cioè su tablet con schermo più largo, la riga a tre colonne composta da una colonna più stretta affiancata a una sezione con due colonne interne ha ancora abbastanza spazio.

Nel punto di interruzione Tablet, invece, il contenuto risulta troppo compresso.

Quindi clicca di nuovo su Applica Modello di Struttura e seleziona una riga a colonna singola tra le opzioni delle Colonne uguali.

Scorri fino alla Riga Annidata.

Clicca di nuovo il pulsante Applica Modello di Struttura e seleziona una riga a colonna singola.

Ed è qui che entra in gioco davvero il riordinamento delle colonne.

Seleziona la riga, cioè la struttura che contiene le colonne, e clicca per modificare le impostazioni della prima colonna.

Espandi il menu a discesa Ordine e imposta l'Ordine di visualizzazione su 1.

Scorrendo la sezione, noterai che le colonne sono state invertite.

In questo modo il contenuto segue un flusso più naturale nella lettura.

Ripeti gli stessi passaggi per riordinare eventuali altre righe presenti nella sezione di apertura.

Test e ottimizzazione su tutti i dispositivi

Una volta completato il riordinamento, arriva la parte che tanti saltano e poi si pentono: il test della sezione principale della pagina su tutte le dimensioni dello schermo.

Scorri ogni vista e fai le eventuali correzioni necessarie.

Verifica poi il risultato nella pagina pubblicata usando la funzione Anteprima di Divi.

Puoi anche testare la struttura su dimensioni di schermo diverse con applicazioni di terze parti come Sizzy, oppure controllare il risultato direttamente su dispositivi fisici reali.

E qui, onestamente, spesso saltano fuori i dettagli più fastidiosi: piccoli problemi che sul builder sembravano invisibili e invece su uno smartphone vero si vedono subito.

In questa fase controlla eventuali problemi di allineamento e fai le ultime correzioni usando le impostazioni Flexbox di Divi: Allinea elementi, cioè l'allineamento verticale degli elementi, e Giustifica contenuto, cioè la distribuzione orizzontale dello spazio.

Per la spaziatura, usa i controlli Distanza orizzontale, che regolano lo spazio tra le colonne, e Distanza verticale, che regolano lo spazio tra le righe.

Ad esempio, se su mobile il testo e l'immagine ti sembrano troppo attaccati, aumenta la Distanza verticale per dare più respiro alla struttura.

Quando tutto appare corretto su ogni dispositivo, salva le modifiche e pubblica la pagina.

A questo punto hai riordinato con successo i contenuti della sezione principale senza duplicare sezioni e senza ricorrere a stili personalizzati, sfruttando le potenzialità di Flexbox in Divi.

Ordine visivo e ordine di lettura: cosa devi tenere sotto controllo

Riordinare gli elementi di una sezione di apertura con Flexbox è una tecnica potente, sì, ma va usata con attenzione.

La distinzione tra ordine visivo e ordine di lettura viene spesso sottovalutata, e ignorarla può creare problemi reali sia per l'accessibilità sia per l'esperienza utente.

Quando ha senso riordinare

Su mobile, l'utente scorre in verticale e consuma i contenuti nell'ordine in cui li incontra.

In questo contesto, mettere il messaggio principale — titolo e sottotitolo — prima dell'immagine ha perfettamente senso: il visitatore capisce subito il contesto, e solo dopo vede l'elemento visivo.

Allo stesso modo, la CTA deve restare vicina al messaggio che la giustifica, non finire in fondo alla pagina dopo elementi decorativi.

Il rischio del disallineamento visivo-semantico

Flexbox cambia solo l'ordine visivo degli elementi nel browser.

I lettori di schermo e i motori di ricerca, invece, leggono la pagina nell'ordine in cui è scritto il codice.

Quindi, se sposti visivamente il titolo sopra l'immagine ma nel codice il titolo viene dopo, un utente che naviga con uno screen reader riceverà i contenuti in un ordine diverso da quello che tu vedi sullo schermo.

Non è un problema teorico.

Può compromettere la comprensione del messaggio e ridurre l'accessibilità della pagina.

Come gestirlo correttamente

• Progetta l'ordine della pagina pensando prima alla logica di lettura, non alla resa visiva su desktop.
• Usa Flexbox per adattare la presentazione visiva ai punti di interruzione, senza stravolgere la gerarchia semantica.
• Verifica sempre che il titolo e la CTA abbiano un ordine coerente sia visivamente sia nel codice.
• Testa la pagina con uno screen reader o con uno strumento di analisi dell'accessibilità dopo ogni riordino significativo.

Usata con criterio, questa tecnica migliora l'esperienza su ogni dispositivo.

Usata male, invece, può confondere gli utenti e penalizzare l'accessibilità.

Conclusione

Flexbox in Divi offre un sistema di struttura adattiva solido e flessibile, molto utile quando devi gestire l'ordine dei contenuti nelle sezioni di apertura su dispositivi diversi.

Grazie ai controlli per la direzione della struttura, all'ordine di visualizzazione e ai modelli predefiniti, puoi adattare la gerarchia visiva per ogni punto di interruzione senza ricorrere a stili personalizzati.

Quindi, in pratica, questa funzione ti permette di far lavorare meglio la tua hero su desktop, tablet e smartphone, mantenendo i contenuti ordinati, leggibili e coerenti con il modo in cui le persone scorrono davvero la pagina.

Se stai lavorando a un progetto che richiede questo tipo di controllo sulla struttura della pagina o vuoi capire come applicarlo bene al tuo caso specifico, scrivimi.
Se hai dubbi, puoi anche partire da una domanda semplice e ragionarci insieme.

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