Contenitore Flexbox di Elementor: come utilizzarlo e quali errori evitare

Il Contenitore Flexbox di Elementor è una delle funzionalità più utili introdotte negli ultimi tempi su questo page builder. Altri page builder utilizzavano già da tempo il modello Flexbox per gestire il layout degli elementi e finalmente anche Elementor offre questa possibilità.

In questo video ti mostro 7 consigli fondamentali per poter sfruttare al meglio il contenitore Flexbox di Elementor e abbadonare definitivamente la vecchia modalità di creazione delle pagine basata su Sezioni, Colonne e Sezioni Interne.

Nel video ti mostro anche gli accorgimenti da adottare per creare griglie responsive, sfruttando le regole CSS di Flexbox.

Trascrizione del video sul contenitore Flexbox

In questo video voglio darti alcuni consigli su come sfruttare al meglio il Contenitore Flexbox, il widget che manda definitivamente in pensione le sezioni e le colonne di Elementor. Il nuovo widget cambia radicalmente il modo di lavorare su Elementor e, pur essendo più potente, presenta alcune complessità. Per questo, ti consiglio di guardare il video fino alla fine per vedere tutti i consigli ed evitare gli errori più comuni.

Il primo passo è verificare se sul tuo sito è già attivo il Contenitore Flexbox. Se, quando utilizzi Elementor, stai vedendo una cosa di questo tipo, ossia tra i widget vedi ‘sezione interna’ e quando crei una nuova sezione appare uno schema di questo tipo, significa che stai utilizzando ancora il vecchio sistema.

Per abilitare il Contenitore Flexbox, è necessario andare in Elementor, nelle impostazioni, scegliere la sezione ‘caratteristiche’ e tra gli esperimenti in corso abilitare il contenitore flexbox. In pratica, devi vedere questo simbolino verde a fianco della voce ‘contenitore flexbox’. Tieni presente che, a partire da alcune settimane, le nuove installazioni di Elementor abilitano di default il contenitore flexbox, quindi questa opzione è già attiva per tutte le nuove installazioni.

Una volta abilitato il Contenitore Flexbox, la modalità di lavoro su Elementor cambia radicalmente. Andando a creare una nuova sezione, ora possiamo scegliere tra diversi layout. Supponiamo di scegliere questo e vediamo di inserire degli elementi all’interno di questa sezione. Come vedi, cliccando qua, va in ‘modifica contenitore’, quindi non è più ‘modifica sezione’, ma è ‘modifica contenitore’. Inoltre, sono spariti il widget ‘sezione interna’ e sono sparite anche le colonne. Quindi, tutto è un contenitore, non esistono più sezioni, sezioni interne e colonne. Si utilizza solo il contenitore per creare questi blocchi di layout.

Ora, andiamo a inserire all’interno di questo contenitore un’immagine e un’intestazione. Come puoi notare, anche senza aver creato delle colonne, questi due widget si sono posti uno a fianco all’altro. Questo perché il contenitore che contiene questi due widget è impostato sulla direzione riga orizzontale. Se io vado a modificare queste impostazioni, vedi che il contenitore flexbox modifica il comportamento dei widget in esso contenuti.

Per essere più chiaro, vado ad abilitare il navigatore e vedi che qua io ho un contenitore che contiene un’immagine e un’intestazione. Questi sono i due widget contenuti nel contenitore flexbox ed è il contenitore flexbox che decide come i widget al suo interno devono comportarsi.

Altre modifiche che posso fare: posso centrare il contenuto. Vedi che in

questa maniera io posso centrare gli elementi in basso, in alto oppure al centro. Se io volessi aggiungere altri elementi, ad esempio qua vado a inserire del testo, vedi che automaticamente il contenitore flexbox è impostato per affiancarli uno a fianco all’altro. Quindi qua immagine, intestazione e testo.

Qualora volessi creare un blocco che contiene intestazione e testo, uno sopra l’altro, affiancati all’immagine, devo necessariamente inserire un altro contenitore. Quindi, mi sposto, vado ad aggiungere un contenitore. Dopo aver fatto ciò, vado a trascinare l’intestazione dentro il contenitore e anche il widget di testo dentro il contenitore. Questo secondo contenitore è impostato di default sulla colonna verticale, in pratica allinea i widget uno sopra l’altro. Viceversa, se lo imposto anche questo in riga orizzontale, anche in questo caso i widget sono affiancati.

Queste sono, in grandi linee, le basi per iniziare a utilizzare i contenitori flexbox. È necessario capire questa logica per evitare di commettere errori nell’utilizzo di questo strumento, perché è completamente diverso rispetto all’utilizzo di sezioni e colonne precedenti.

Un modo utile di ragionare quando lavori con i contenitori flexbox è non pensare tanto ai widget, ma piuttosto al rapporto padre-figlio tra i vari elementi. Quindi, devi pensare che questo contenitore contiene l’elemento immagine e l’elemento contenitore. Questi sono i suoi due figli diretti. Poi, quello che è contenuto all’interno di quest’altro contenitore è gestito da questo elemento. Quindi, questi elementi rispondono a questo contenitore, questo contenitore e questa immagine rispondono a quest’altro contenitore.

Oltre alle numerose possibilità di personalizzazione e controllo offerte da flexbox, un vantaggio è quello della riduzione della quantità di codice generato da Elementor. Vedi, in questo caso ad esempio, che l’immagine è affiancata senza utilizzare del codice aggiuntivo per la colonna, per la sezione e quant’altro. È semplicemente un widget immagine e basta.

Se, ad esempio, non avessi avuto bisogno di allineare uno sopra l’altro l’intestazione e il testo, ma volessi affiancare solo l’intestazione all’immagine, come ho fatto prima, in pratica mi basta eliminare il contenitore all’interno e tenere semplicemente due widget, senza colonne né nient’altro codice aggiuntivo. Quindi, questo è un risparmio complessivo del codice HTML generato.

Il contenitore flexbox offre una serie molto ampia di opzioni. Ad esempio, in questo caso ho creato un contenitore Flexbox che contiene 6 contenitori e all’interno di ogni contenitore ci sono due intestazioni. Andando a selezionare il contenitore principale nella sezione ‘modifica contenitore layout’, sotto la voce ‘elementi’, ci sono le principali regole di comportamento di un contenitore flexbox, tra le quali la direzione.

Vedi che, cambiando da ‘riga orizzontale’, passo da un allineamento da sinistra a destra a uno dall’alto verso il basso. Però in ordine, quindi dal primo al sesto blocco. Se, ad esempio, scelgo ‘colonna invertita’, senza trascinare o spostare alcun blocco, automaticamente i blocchi vengono ordinati dall’ultimo al primo, sempre dal basso verso l’alto in questo caso. Viceversa, posso anche invertirli in orizzontale, quindi il primo diventa l’ultimo e l’ultimo diventa il primo, tutto senza minimamente intervenire sui singoli blocchi o spostarli manualmente.

Allo stesso modo, posso gestire anche la giustificazione del contenuto, che serve a gestire come vengono distribuiti gli spazi secondo la linea principale, che in questo caso è orizzontale. Al momento sono impostati per la giustificazione al centro, ma posso anche giustificarli dalla partenza, se avvengono tutti allineati dall’inizio del blocco del contenitore, lasciando poi l’eventuale spazio vuoto tutto in fondo. Oppure, posso centrarli, allinearli tutti all’estremità finale, decidere la spaziatura di questo tipo in modo che il primo e l’ultimo vengono spostati all’estremità e vengono gestite poi in maniera uniforme le spaziature tra i vari blocchi interni.

Posso anche spaziare intorno in modo che tra i vari blocchi ci sia uno spazio uguale e poi all’estremità finale e quella iniziale ci sia la metà dello spazio interno. Oppure, posso spaziare uniformemente in modo che la distanza tra gli spazi sia all’inizio sia tra i vari blocchi sia uniforme. È anche prevista poi la possibilità di definire uno spazio tra i vari elementi. Quindi, se io ad esempio legno al centro e vari lo spazio tra gli elementi, vedi che puoi gestire in pixel o con altre unità di misura lo spazio tra i vari elementi. Questo può essere utile ad esempio quando si creano delle griglie che vanno anche a capo.

Utilizzando questi nuovi contenitori, è possibile gestire in modo estremamente personalizzato l’ordinamento degli elementi all’interno del medesimo contenitore. In questo caso, abbiamo già visto che modificando la direzione può invertire l’ordine, ma è anche possibile gestire la posizione di un singolo elemento all’interno di una sequenza in modo molto preciso.

Ad esempio, se noi volessimo mandare in fondo questo terzo blocco, per posizionarlo alla fine ci basta selezionarlo, andare nelle sue impostazioni avanzate e nella voce ordinamento scegliere ‘fine’ e vedi che il terzo blocco viene automaticamente spostato in fondo. Ora annulliamo.

Un’altra possibilità è quella di inserire invece un ordinamento manuale. Quindi, se noi volessimo spostare il secondo il quarto blocco alla fine, possiamo fare in questa maniera: il secondo blocco, andiamo in avanzato, scegliamo ordinamento e scegliamo come ordine personalizzato 1; scegliamo il quarto blocco, avanzato, ordinamento e scegliamo 2. Quindi, volendo, potresti assegnare un numero per ognuno di questi blocchi e decidere manualmente quale posizionare prima e quale dopo in modo molto potente.

Come puoi vedere, tutte le opzioni flexbox, come queste, sono gestibili in modalità responsive. Quindi, potresti dare un’impostazione su desktop, un’altra su mobile, un’altra su tablet, o per gli eventuali altri breakpoint che utilizzi su Elementor. Potresti stabilire un ordinamento su desktop, un altro diverso su tablet, un altro diverso ancora su mobile, per gestire in maniera molto flessibile tutti i vari tipi di layout.

Passiamo poi a vedere quest’altro esempio. In questo contenitore vediamo tre icone. Abbiamo già visto prima le possibilità legate alla giustificazione del contenuto. Quindi, in base alla direzione principale, puoi gestire i vari tipi di giustificazione. Però, oltre alla giustificazione, puoi anche decidere l’allineamento. Quindi, puoi decidere se, ad esempio, all’interno di un contenitore, alcuni di questi elementi debbano essere allineati al centro, oppure sopra, oppure in basso.

L’allineamento, in pratica, va trasversalmente rispetto alla direzione principale. Quindi, se la direzione principale è orizzontale, l’allineamento invece è verticale. Viceversa, se ti sposti in colonna, l’allineamento è orizzontale. Quindi, in base a come gestisci la direzione, puoi gestire anche l’allineamento. Ma non solo, ogni singolo elemento presente in un contenitore può essere allineato in modo diverso rispetto a quello predefinito.

In questo caso, ad esempio, questo contenitore è impostato per utilizzare l’allineamento al centro dei tre elementi. Se però noi ne selezioniamo uno, andiamo nelle sue impostazioni avanzate e decidiamo che questo singolo elemento si allinea in basso, quindi si allinea diversamente rispetto a quello preimpostato del contenitore. Idem, scegliamo l’ultimo, andiamo in avanzato, lo allineiamo in alto, quindi puoi gestire in maniera personalizzata anche questa proprietà.

Ora ti mostro un esempio che dimostra le notevoli potenzialità dell’utilizzo del contenitore flexbox. Vedi, in questo caso, ho creato un contenitore che ho chiamato così, però non lasciarti ingannare da questo nome, è semplicemente un contenitore. Semplicemente cliccando, gli ho dato un nome, ok, e l’ho impostato in modalità riga orizzontale. Ho inserito un widget intestazione, eccolo qua, e un altro widget contenitore che contiene l’immagine, l’intestazione e l’editor di testo.

In pratica, ora, se io vado a selezionare il blocco contenitore, in questo caso questo, e lo vado a duplicare, vedi che duplicandolo lui va ad aggiungere altri contenitori sempre in orizzontale. Quindi, più ne aggiungo, più lui li mantienetutti in orizzontale. È chiaro che questa modalità di allineamento orizzontale può andare bene quando ho due elementi. Ma quando, come in questo caso, comincio ad avere un’intestazione e sette contenitori, diventa illeggibile. Quindi, c’è la necessità di ristrutturare questo contenitore in un’altra maniera. Di default, i contenitori flexbox, quando sono impostati su riga orizzontale, tendono a non andare a capo.

Qualunque cosa io vada a inserire, il contenitore la posiziona a fianco. Per far cambiare comportamento al contenitore, devo selezionarlo, andare nel layout, scegliere l’opzione ‘wrap’ e selezionare il pulsante che istruisce il contenitore a mandare a capo i contenuti quando non c’è spazio sufficiente. Infatti, ora tutti questi contenuti vanno a capo.

Tuttavia, il posizionamento non è quello desiderato perché, ad esempio, ho una sezione qui, un contenuto qui, un contenitore qui a fianco, qui ne ho tre, qui ne ho due con lo spazio in centro. Non mi piace. Con una semplice operazione è possibile risistemare tutto. Seleziono questa intestazione, vado in ‘Avanzato’, scelgo la voce ‘Larghezza’ e la imposto su ‘Larghezza piena’ al 100%. In questo modo, all’interno del mio contenitore non ho nulla a destra e sinistra perché questa sezione va a occupare tutto il 100%, mentre i singoli contenitori, che sono impostati per occupare il 30% dello spazio, si allineano. Quindi, il 30% mi permette di far stare comodamente tre contenitori per ogni riga e, automaticamente, quando arrivo al terzo, il quarto flexbox lo manda a capo.

Se ora andassi a crearne altri tre, uno, due e tre, vedi che in automatico vengono posizionati anche questi in una griglia, senza aver creato alcuna colonna. Un altro aspetto fondamentale da comprendere bene quando utilizzi contenitori flexbox è la scelta della modalità ‘Larghezza contenuto’. Elementor ci consente infatti di scegliere tra due modalità: quella denominata ‘Boxed’ e quella ‘Larghezza piena’.

La prima, denominata ‘Boxed’ o ‘Incorniciata’ se vogliamo usare un termine italiano, può essere utile quando vogliamo delimitare la larghezza massima del contenuto interno di un contenitore. Ad esempio, in questo caso, creo un contenitore, dentro ci metto del testo, dell’immagine e quant’altro. Tutti questi elementi sono contenuti all’interno di un unico contenitore. Se io voglio fare in modo che la larghezza massima di questo contenitore non superi una certa dimensione, scelgo la ‘Larghezza di contenuto’, la modalità ‘Incorniciata’ e, in questo modo, posso decidere la larghezza massima che devono avere i contenuti contenuti in questo contenitore, quindi quelli interni.

Ci sono molti casi in cui non ho bisogno di limitare la larghezza del contenuto interno del mio contenitore e preferisco gestire la larghezza complessiva del contenitore stesso. In questi casi, scelgo ‘Larghezza piena’ come modalità del mio contenitore. Così facendo, posso gestire quanto è largo il mio contenitore. Ad esempio, in questo caso, ho impostato un contenitore al 50% e l’altro al 50%, dividendo equamente lo spazio tra i due.

È importante notare che in questo caso i due contenitori stanno affiancati perché ho impostato a zero la spaziatura tra gli elementi. Quindi, come consiglio generale, quando devi gestire la larghezza di un contenuto, come ad esempio blocchi di testo, scegli la modalità ‘Boxed’ o ‘Incorniciata’. Al contrario, quando vuoi posizionare dei contenitori affiancati e decidere esattamente quanto spazio devono occupare in termini di larghezza, scegli la modalità ‘Larghezza piena’.

Quando si lavora con i contenitori Flexbox, è fondamentale comprendere e padroneggiare l’importanza della larghezza definita di un contenitore o di un elemento. Ricorda che, di default, la larghezza del contenuto nei siti creati con Elementor è di 1140 pixel. Puoi definire e variare questa larghezza andando nelle impostazioni del sito e nel layout. Quindi, per riassumere, 1140 è la larghezza massima del contenuto predefinita in Elementor, che può essere variata, e 20 pixel è lo spazio predefinito tra i vari elementi o widget inseriti in un contenitore.

Infatti, quando creiamo un nuovo contenitore, vedrai che impostando la larghezza di contenuto su ‘Boxed’ (ossia incorniciata) a 1140 – la larghezza predefinita che Elementor eredita dalle impostazioni globali – abbiamo già visto che i contenitori flexbox mettono a disposizione questa opzione chiamata ‘wrap’ che ci consente di definire il ritorno a capo, o meno, degli elementi contenuti in un contenitore. Memori di questa conoscenza, spostiamoci su questo terzo contenitore e facciamo due calcoli.

Memori di questa conoscenza, sapendo che il contenitore è largo 1140 pixel, se vogliamo creare due contenitori interni affiancati, grandi ognuno la metà del contenitore, la prima cosa che ci viene in mente è quella di dividere 1140 per 2, per ottenere 570 pixel. Quindi impostiamo questo contenitore a larghezza piena con una larghezza di 570 pixel e facciamo la stessa cosa per l’altro. Del resto, 570 per due fa 1140: questi contenitori stanno allineati fino a che non impostiamo il ritorno a capo. Ma qualcosa non torna perché, avendo impostato due contenitori grandi 570, dovrebbero stare affiancati, dato che 570 per due fa 1140. Il problema è che di default, quando creo un contenitore, c’è una spaziatura di 20 pixel. Quindi, tra un contenitore e l’altro ci sono 20 pixel e 570 + 570 fa 1140, ma non ho i 20 pixel di spazio, e quindi flexbox manda a capo il secondo contenitore.

Se voglio mantenerli affiancati preservando i 20 pixel di spazio, devo modificare il calcolo in questo modo: 1140 meno 20 pixel, diviso 2. In questo caso, se imposto a 560 un contenitore e a 560 anche l’altro, ecco che sono affiancati. In alternativa, avrei potuto mantenere a 570 la dimensione dei vari contenitori, ma avrei dovuto ridurre a zero la spaziatura degli elementi. Così facendo, gli elementi dei due contenitori sarebbero stati attaccati senza spaziatura, e avrei avuto a disposizione tutto lo spazio senza i 20 pixel.

Questa stessa cosa, qualora volessi ricreare tre contenitori, si complica perché devo calcolare 1140 meno 20 della prima spaziatura meno 20 della seconda, quindi togliere 40 pixel dal totale e dividere per 3. Qui, però, inizierei a ottenere numeri con la virgola. Anche per questa ragione può essere utile ragionare più in termini di percentuali e meno in termini di valori numerici fissi, come i pixel.

Ad esempio, in questo contenitore ho creato quattro sotto-contenitori. Il contenitore è impostato per andare a capo e la spaziatura di default qui non è definita, quindi significa che ci sono 20 pixel tra un contenitore e l’altro. Ogni singolo contenitore è impostato con una larghezza del 25%, quindi 25% + 25% + 25% + 25% dovrebbe fare 100%, quindi dovrebbero stare tutti affiancati. Ma perché non lo fanno? Perché ho sempre i 20 pixel di spazio tra un elemento e l’altro.

Quindi, o scelgo il contenitore e imposto a zero la spaziatura, così tutti e quattro i contenitori stanno appiccicati, oppure ragiono con percentuali diverse. In questo caso, elimino lo zero e riporto a 20 lo standard della spaziatura. Per poter usare le percentuali e mantenere questi quattro contenitori allineati sulla stessa riga, ma in modo flessibile, devo variare la percentuale. Quindi, anziché 25, scelgo un numero inferiore, come ad esempio il 20. Quindi, imposto questo a 20, così come gli altri tre. Ma così facendo, non vado a occupare tutto lo spazio disponibile.

Ecco dove Flexbox mi viene in aiuto: mi basta andare a selezionare il singolo contenitore e, dove ho impostato la larghezza massima al 20%, vado in ‘Avanzato’ e scelgo la dimensione ‘Grow’. Questo istruisce il contenitore a espandersi per occupare tutto lo spazio residuo disponibile. Se faccio la stessa cosa anche per gli altri tre contenitori, come sto facendo in questo momento, vedrai che tutti e quattro si contendono lo spazio disponibile. Essendo impostati tutti e quattro allo stesso modo, lo spazio viene distribuito equamente tra i quattro contenitori, e ognuno andrà ad occupare il 25% dello spazio, fatta eccezione per lo spazio riservato ai 20 pixel di separazione tra un elemento e l’altro.

Andiamo a vedere come si comporta questa cosa in modalità responsive, quindi attivo la modalità responsive e passiamo alla modalità tablet. Come vedi, anche in modalità tablet, viene mantenuta la divisione in quattro colonne. Passando alla modalità smartphone, automaticamente ogni contenitore diventa largo il 100% e quindi occupa tutto lo spazio in larghezza.

Se volessi, però, potrei fare una modifica in modalità tablet per evitare di stringere troppo i contenitori su quattro colonne e trasformarle in due righe da due colonne ciascuna. Quindi, vado a scegliere questo contenitore e vado ad aumentare la larghezza del contenitore: anziché 20%, la aumento fino a, che so, il 35% – 35% anche per il secondo, il terzo e il quarto. In questo modo, ho una griglia perfettamente responsive con quattro colonne su desktop, due su tablet e una colonna su smartphone, senza alcun problema. Volendo, ho anche la possibilità di fare combinazioni un po’ più particolari.

Ad esempio, in questa situazione ho impostato i vari contenitori in modo che il primo occupi il 20% di spazio, il secondo anch’esso il 20%, e così pure il terzo. Però, nelle impostazioni avanzate del singolo contenitore, attivando questa modalità in ‘Dimensione’ cliccando sui tre pallini, ho impostato che l’ultimo abbia una crescita flessibile di 3, il secondo una crescita flessibile di 2 e il primo una crescita flessibile normale, quindi di 1. In pratica, il primo parte dal 20% e poi cresce nello spazio disponibile, il secondo sfrutta il doppio dello spazio disponibile rispetto al primo, e il terzo il triplo dello spazio disponibile rispetto al primo. Quindi, il terzo cresce un po’ di più, il secondo un po’ di più ma meno del terzo, e il primo cresce quello che resta.

Ho quindi a disposizione diverse modalità per gestire le spaziature dei vari contenitori e allo stesso modo posso andare a costruire layout a 2, 3, 4, 5 o 6 colonne. Ad esempio, in questo caso di layout a 6 colonne, ho impostato gli elementi in direzione riga con ritorno a capo e ho impostato il singolo contenitore con una larghezza base del 13,5%, in modalità ‘Crescere’ quindi va a occupare tutto lo spazio disponibile partendo dal 13,5%. Se passo alla modalità tablet, l’ho impostato al 25% e alla modalità smartphone al 35%. Quindi in questo caso posso anche mantenere su smartphone, se lo desidero, due colonne. Altrimenti, se lo imposto al 100% su smartphone, diventa monocolonna.

È importante abituarsi a lavorare in percentuale perché altrimenti, lavorando in pixel, è tutto molto ma molto più complicato e sicuramente meno flessibile. Quello che abbiamo visto in questo video sono tra le principali proprietà messe a disposizione dal contenitore flexbox su Elementor. Ti suggerisco di fare parecchia pratica, considera poi che questo tipo di contenitore è disponibile sia nella versione gratuita sia in quella a pagamento di Elementor.

Considera che anche attivando la modalità contenitore flexbox, le vecchie sezioni e colonne rimangono inalterate fino a che non andrai a modificarle manualmente per trasformarle con questo nuovo tipo di layout e questo nuovo tipo di widget.