Il Contenitore Flexbox di Elementor, introdotto nella prima metà del 2023, è una funzionalità che offre molte possibilità per realizzare layout complessi, superando i limiti delle versioni precedenti di questo page builder, basati su sezioni, colonne e sul widget “Sezione interna“.
Questo nuovo contenitore, permette di sfruttare il Flexible Box Layout Model (flexbox) che è un modello di layout previsto dal linguaggio CSS. Flexbox non è un’invenzione di Elementor, però Elementor permette di sfruttare le funzionalità di flexbox senza dover scrivere una sola riga di codice.
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. Ti mostro anche gli accorgimenti da adottare per creare griglie responsive, sfruttando le regole CSS di Flexbox.
Per poter utilizzare il widget Contenitore con Elementor, assicurati che questa funzione sia attiva sul tuo sito WordPress. È sufficiente accedere all’area di amministrazione e andare nella sezione Elementor -> Impostazioni e aprire la scheda Caratteristiche. Qui accertati che la voce Contenitore sia abilitata.
Se questa funzione è attiva, hai la possibilità di iniziare a utilizzare questo widget trascinandolo all’interno della pagina che stai realizzando.
Il Widget Contenitore di Elementor ti sarà proposto anche ogni volta che vuoi creare una nuova sezione, cliccando infatti sul pulsante con il simbolo +, Elementor ti permette di scegliere tra l’inserimento di un Contenitore Flexbox e un Contenitore Griglia. Il widget è sempre il Contenitore, solo che è possibile utilizzarlo in due modalità:
- la modalità Flexbox è basata sul Flexible Box Layout Model;
- la modalità Griglia è basata invece su CSS Grid
In questa guida mi concentrerò esclusivamente sul Contentiore Flexbox. Qui trovi un mio video dedicato al Contenitore Griglia di Elementor.
Proprietà del Contenitore Flexbox
Uno dei vantaggi offerti dal modello flexbox è quello di poter impostare facilmente la disposizioni dei widget al suo interno, senza dover intervenire necessariamente sui singoli elementi in esso contenuti.
Nell’immagine sottostante puoi vedere le proprietà principali del contenitore che puoi gestire attraverso la tradizionale interfaccia di Elementor.
Nel video ti mostro come utilizzare queste proprietà e come abituarsi a lavorare con le percentuali in modo da ottenere facilmente dei layout responsivi, che si adattano perfettamente ai vari dispositivi utilizzati dai visitatori del tuo sito.
Considera che anche se attivi il widget Contenitore, le vecchie sezioni e colonne rimarranno inalterate fino a che non andrai a modificarle manualmente per trasformarle con questo nuovo tipo di layout. Elementor ti permette di convertire le vecchie sezioni in contenitori, senza perdere l’impostazione del layout.
Spaziature fluide per i contenitori
Una possibilità un po’ più avanzata è quella che consiste nel creare delle classi CSS per gestire in modo fluido le spaziature dei contenitori, in particolare per quelli utilizzati per le principali sezioni del sito o di una singola pagina.
Il sistema che ti mostro in questo secondo video è basato su una serie di classi CSS che sfruttano la funzione clamp() per impostare i rientri, ossia il padding utilizzato per i vari contenitori del tuo sito.
Grazie a queste classi è possibile creare una serie di regole facili da applicare che consentono di avere:
- una spaziatura fluida che si ridimensiona in base alla larghezza della finestra del browser;
- una gestione centralizzata delle spaziature dei contenitori usati come sezioni sul tuo sito.
Questo metodo permette di ottenere una maggiore uniformità e risparmiare tempo, evitandoti di dover impostare manualmente i valori dei rientri di un contenitore ogni volta che crei una nuova sezione.
Problema di allineamento nei contenitori
Nel video tutorial inizio illustrando un problema che potresti incontrare se utilizzi Elementor con le impostazioni predefinite.
Considera una pagina che contiene queste 3 sezioni:
- Prima sezione: un contenitore con un widget di intestazione e un editor di testo.
- Seconda sezione: un contenitore esterno che include due contenitori interni, con testo nel secondo contenitore.
- Terza sezione: un contenitore esterno con griglie e contenitori interni per i testi.
Potresti notare che:
- I contenuti non sono allineati correttamente sul lato sinistro.
- I testi iniziano in punti diversi a seconda della struttura dei contenitori.
- Aumenti di rientro causano spostamenti non uniformi.
La causa di questo problema risiede nel fatto che Elementor, di default, imposta un padding (rientro interno) di 10 pixel su ogni lato dei contenitori. Questo comportamento:
- Causa differenze di allineamento quando i contenitori sono annidati.
- Risulta in un layout visivamente disordinato.
La soluzione per evitare questi problemi? È sufficiente impostare il padding dei contenitori a 0 come valore predefinito. Ecco come fare:
- Vai su Impostazioni del sito in Elementor.
- Accedi a Impostazioni layout.
- Imposta la spaziatura interna del contenitore su 0 per tutti i lati.
- Aggiorna e controlla la pagina.
Nota: Se hai già creato molte pagine e sezioni sul tuo sito, questa modifica potrebbe richiedere un intervento manuale sui vari contenitori per impostare i rientri dove necessario.
Passiamo però ora all’argomento centrale del video, ossia la gestione dei rientri (padding) dei contenitori).
Gestione manuale dei rientri (padding)
Per personalizzare il rientro, che tecnicamente si chiama padding:
- Vai su una sezione specifica in Elementor.
- Accedi alla scheda Avanzato.
- Imposta i valori del rientro (es. in rem, una misura relativa).
- Es.: 4 rem sopra, 2 rem a destra/sinistra.
Quali sono i limiti di questo modo di procedere:
- Devi gestire manualmente il padding per ogni contenitore.
- Devi ricordarti i valori che hai inserito in altri contenitori sul tuo sito per mantenere una coerenza nelle spaziature tra gli elementi del tuo sito.
- Cambiare valori per desktop, tablet e mobile richiede interventi individuali.
Metodo alternativo: classi CSS e funzione clamp()
Come ti spiego nel video, una soluzione più efficiente è usare classi CSS con la funzione clamp() per ottenere spaziature fluide, senza scatti bruschi nel passaggio da un viewport a un altro.
Vantaggi
- Controllo globale delle spaziature.
- Passaggi fluidi tra i valori di padding per diverse larghezze di schermo.
- Riduzione della necessità di modifiche manuali.
Esempio di classi CSS
.ele-section-inline {
padding-inline: clamp(1rem, 0.833rem + 0.741vw, 1.5rem) !important;
}
.ele-section-xs {
padding-block: clamp(1rem, 0.833rem + 0.741vw, 1.5rem);
padding-inline: clamp(1rem, 0.833rem + 0.741vw, 1.5rem) !important;
}
.ele-section-s {
padding-block: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
padding-inline: clamp(1rem, 0.833rem + 0.741vw, 1.5rem) !important;
}
.ele-section-m {
padding-block: clamp(1.5rem, 1.167rem + 1.481vw, 2.5rem);
padding-inline: clamp(1rem, 0.833rem + 0.741vw, 1.5rem) !important;
}
.ele-section-d {
padding-block: clamp(3rem, 2.333rem + 2.963vw, 5rem);
padding-inline: clamp(1rem, 0.833rem + 0.741vw, 1.5rem) !important;
}
.ele-section-l {
padding-block: clamp(4.5rem, 3.5rem + 4.444vw, 7.5rem);
padding-inline: clamp(1rem, 0.833rem + 0.741vw, 1.5rem) !important;
}
.ele-section-xl {
padding-block: clamp(6rem, 4.667rem + 5.926vw, 10rem);
padding-inline: clamp(1rem, 0.833rem + 0.741vw, 1.5rem) !important;
}Applicazione delle classi in Elementor
- Incolla il CSS nel file style.css del tema child o nella sezione CSS personalizzato di Elementor.
- Assegna le classi CSS alle sezioni in Elementor:
- Esempio:
.ele-section-xsoppure.ele-section-me così via.
Alcuni strumenti utili
Utilizzando gli strumenti che ti ho linkato qui sotto puoi generare facilmente le funzioni clamp che ti permettono di calcolare dinamicamente i valori in base alla dimensione del viewport.
In questo modo puoi specificare valori minimi e massimi del viewport e la dimensione minima e massima del rientro, evitando scatti bruschi nel layout.
- Clamp Function Calculator: Calcola facilmente i valori per la funzione clamp.
- Pixel to Rem Converter: Per convertire facilmente pixel in unità rem. Per convertire un valore in pixel nel corrispondente valore in rem, ti basta usare la formula
rem = pixel/16
Conclusione
Utilizzando classi CSS centralizzate e la funzione clamp, puoi gestire le spaziature in modo uniforme e professionale. Questo approccio ti consente di risparmiare tempo, evitando modifiche manuali ripetitive.
Come faccio a cambiare una sezione già “strutturata” con vari widget all’interno, in un contenitore?
Grazie dell’aiuto!
Ciao Sergio, in questo video che avevo pubblicato quando il Contenitore Flexbox era ancora in versione beta, puoi vedere come convertire le vecchie sezioni in contenitore.
Ciao. Video chiarissimo. Il mio sito è già online e vorrei passare a utilizzare flexbox.
Domanda n.ro 1: Le pagine già create in sezioni e colonne possono restare così come sono senza essere convertite o vengono “sballate”? Sono parecchie pagine e onestamente non avrei gran voglia di perdere le ore per convertire tutte le sezioni.
Convertirò sicuramente la home page perchè la cambio spesso e quindi ci sta …. ma le altre lascerei così. Mentre utilizzerei flexbox per le nuove pagine che sto predisponendo. Domanda n.ro 2: Con la struttura a sezioni non è possibile per esempio ombreggiare tre sezioni che, posizionate una sopra l’altra, andrebbero visivamente a comporne una unica (mentre le ombre si insinuano nelle giunture …) , mentre con i contenitori mi pare di capire che sia possibile … corretto? Visto che dispongono non solo in orizzontale ma anche in verticale i contenuti.
Domanda nrì.ro 3: Io solitamente metto anche uno sfondo nelle colonne (e non nella sezione intera, in modo che delimiti un po’ il contenuto e lasci invece lo sfondo di default del sito). Con i contenitori è possibile? o il contenitore prende tutta la larghezza della pagina (anche se boxed nelle sezioni, se metto uno sfondo, copre tutta la pagina, non solo dove ci sono le colonne)
Spero di aver scritto decentemente le domande e che si capisca cosa sto chiedendo … Grazie mille
Ciao Anna, le vecchie sezioni puoi anche lasciarle così, non sei obbligata a convertirle. La conversione di solito non sballa il layout. L’unico limite della conversione è che genera un eccesso di contenitori. Quindi, se effettui la conversione ma poi non procedi a una pulizia manuale del layout, non ci sono particolari benefici nella conversione.
Utilizzando i contenitori hai maggiore libertà e puoi inserire i tre contenitori all’interno di un contenitore che utilizza la direzione colonna. In questo modo puoi disporre i 3 contenitori in verticale, applicandogli un’ombra ma mantenendoli all’interno di un unico contenitore con uno sfondo comune.
I contenitori possono avere la larghezza che desideri, quindi non vedo problemi.
Grazie mille!! Che velocità!
Ora ci provo … che Dio me la mandi buona!!!!!!!!!!
Casomai sono sempre in tempo a “tornare indietro” levando la spunta ai flexbox? corretto!?!?
Non esattamente, se disattivi la funzione Contenitore Flexbox su Elementor, tutti i contenitori Flexbox che hai inserito non saranno visibili sul sito. In pratica, spariranno dei contenuti.
Personalmente non vedo alcun motivo per disattivare i contenitori Flexbox per tornare alla primitiva gestione basata su Sezioni e Colonne.
No no, chiaro. Mi sono spiegata male! Volevo solo essere sicura che se la attivo (sul mio sito non è attiva di default, la devo spuntare nelle impostazioni) e poi non è quello che pensavo e quindi la pagina nuova creata con flexbox non mi piace …. tornerò indietro alla vecchia funzione sezioni e colonne. Perderò quindi soltanto la pagina nuova che appunto è ancora una bozza!!! Le vecchie pagine le lascerei così come sono senza convertirle … così se cambiassi idea … perderò soltanto la pagina di esperimento. Poi una volta preso l’occhio … non ci penserò nemmeno più!
Capisco che non vedi motivo ma sapere di poter “disfare” mi lascia sempre più serena nello sperimentare ….