Introduzione: La Struttura è Tutto
Prima di pensare ai colori, ai font e alle animazioni, la prima cosa da padroneggiare in Elementor è la struttura della pagina. Come un architetto disegna le fondamenta prima delle finiture, un web designer deve comprendere come organizzare sezioni, colonne e container per creare layout solidi, flessibili e responsive.
Elementor ha recentemente introdotto i Container Flexbox, un nuovo modo di strutturare le pagine che sostituisce gradualmente il vecchio sistema di Sezioni e Colonne. In questa guida analizzeremo entrambi gli approcci, così potrai scegliere quello più adatto al tuo progetto.
Il Modello Classico: Sezioni e Colonne
Il modello strutturale originale di Elementor si basa su tre livelli gerarchici:
- Sezione — il contenitore più esterno, equivalente a una “riga” nella pagina
- Colonna — suddivisioni interne della sezione (da 1 a 10 colonne)
- Widget — gli elementi funzionali inseriti nelle colonne
Ogni pagina Elementor è composta da una serie di sezioni impilate verticalmente. Ogni sezione contiene almeno una colonna, e ogni colonna contiene uno o più widget.
Creare una Sezione
Per aggiungere una nuova sezione, fai clic sull’icona + nell’area del canvas. Ti verrà chiesto di scegliere la struttura delle colonne:
- 1 colonna — per contenuti a larghezza piena (hero sections, call-to-action)
- 2 colonne — layout classico testo + immagine (50/50 o 60/40 o 70/30)
- 3 colonne — perfetto per servizi, feature o card
- 4+ colonne — per griglie complesse (team, portfolio, statistiche)
Personalizzare le Colonne
La larghezza delle colonne è espressa in percentuale. Puoi modificarla:
- Trascinando il bordo tra due colonne nel canvas
- Numericamente nella tab Layout della colonna selezionata (campo “Larghezza colonna”)
Ogni colonna ha le proprie opzioni di allineamento verticale (alto, centro, basso, spazio tra), sfondo, padding, margini e bordi. Puoi anche impostare un ordine diverso delle colonne su mobile rispetto a desktop.
Sezioni Interne (Inner Section)
Puoi annidare una sezione interna dentro una colonna per creare layout più complessi. Ad esempio, in una struttura a 2 colonne, la colonna destra potrebbe contenere una sezione interna con 2 sotto-colonne. Attenzione a non esagerare con l’annidamento: troppi livelli rendono la pagina difficile da gestire e possono impattare le prestazioni.
Il Nuovo Modello: Container Flexbox
Il Container Flexbox è la grande evoluzione strutturale di Elementor, introdotta come funzionalità sperimentale e ora stabile. Rispetto al modello classico, offre vantaggi significativi:
Vantaggi del Container
- Meno DOM: i container eliminano i wrapper extra delle colonne, riducendo gli elementi HTML nella pagina del 30-50%
- Annidamento infinito: puoi annidare container dentro container senza limitazioni strutturali
- Direzione flessibile: i widget possono disporsi orizzontalmente (riga) o verticalmente (colonna), con opzioni di inversione
- Allineamento Flexbox: justify-content, align-items e align-self nativi per controllo preciso del posizionamento
- Migliori prestazioni: meno codice HTML e CSS generato, caricamento più veloce
Attivare i Container Flexbox
Per abilitare i Container Flexbox:
- Vai su Elementor → Impostazioni → Funzionalità
- Trova l’opzione Flexbox Container
- Impostala su Attivo
- Salva le impostazioni
Una volta attivati, quando aggiungi un nuovo elemento strutturale, verrà creato un Container al posto di una Sezione. Le pagine esistenti con il vecchio sistema continueranno a funzionare.
Come Funziona il Container
Un Container è un singolo elemento che può contenere sia widget sia altri container. Le sue proprietà fondamentali sono:
- Direzione: Riga (orizzontale) o Colonna (verticale). In direzione Riga, i widget si dispongono uno accanto all’altro. In Colonna, uno sotto l’altro
- Wrap: se attivo, gli elementi vanno a capo quando non c’è spazio sufficiente
- Justify Content: come distribuire lo spazio orizzontale (Inizio, Centro, Fine, Spazio tra, Spazio intorno, Spazio equo)
- Align Items: come allineare verticalmente gli elementi (Inizio, Centro, Fine, Stretch)
- Gap: la spaziatura tra gli elementi interni
Full Width vs Boxed
Ogni sezione o container può avere due tipi di larghezza:
Boxed (Contenuto)
Il contenuto è limitato a una larghezza massima (solitamente 1140px, modificabile nelle impostazioni globali). Lo sfondo della sezione può estendersi a tutta larghezza, ma i widget interni restano contenuti. Questo è il layout più comune per la leggibilità del testo.
Full Width (Larghezza Piena)
Il contenuto si estende per tutta la larghezza della finestra del browser. Usalo per:
- Hero sections con immagini di sfondo a tutta larghezza
- Banner o barre promozionali
- Gallerie fotografiche
- Sezioni con design immersivo
Per impostare la larghezza, seleziona la sezione o il container e nella tab Layout troverai l’opzione Content Width (Boxed o Full Width).
Padding e Margin: Spaziatura Interna ed Esterna
Capire la differenza tra padding e margin è fondamentale:
- Padding — spaziatura interna: lo spazio tra il bordo dell’elemento e il suo contenuto. Aumentare il padding rende l’elemento “più spazioso” internamente
- Margin — spaziatura esterna: lo spazio tra l’elemento e gli elementi adiacenti. I margini verticali tra sezioni creano lo spazio di separazione tra le diverse aree della pagina
Entrambi possono essere impostati per ogni lato (sopra, destra, sotto, sinistra) e con valori diversi per dispositivo. L’icona del lucchetto permette di collegare/scollegare i valori dei quattro lati.
Z-Index e Posizionamento Personalizzato
Per layout avanzati, Elementor offre opzioni di posizionamento nella tab Avanzate:
- Z-Index — controlla la sovrapposizione degli elementi. Un valore più alto porta l’elemento “in primo piano”. Utile per sovrapporre sezioni o creare effetti di profondità
- Posizione CSS — puoi impostare la posizione su Relativa o Assoluta. La posizione Assoluta permette di posizionare un elemento in modo libero sopra ad altri elementi, specificando offset orizzontale e verticale
- Overflow — controlla cosa succede quando il contenuto eccede i bordi del container: visibile (default) o nascosto
Layout Responsive
La struttura delle pagine deve adattarsi a schermi di dimensioni diverse. Elementor offre diverse strategie:
- Inversione delle colonne: su mobile, le colonne possono essere invertite (l’ultima colonna appare per prima)
- Larghezze responsive: ogni colonna può avere percentuali di larghezza diverse su desktop, tablet e mobile. Ad esempio, due colonne al 50% su desktop possono diventare entrambe al 100% su mobile (impilate)
- Ordine personalizzato: con i Container Flexbox, puoi impostare l’ordine CSS di ogni elemento per riordinare i contenuti su dispositivi specifici
- Nascondi per dispositivo: puoi nascondere un’intera sezione, colonna o container su dispositivi specifici
Best Practice per la Struttura
- Pianifica prima di costruire: disegna uno schema della pagina su carta o con un wireframe tool prima di aprire Elementor
- Usa i Container: se stai iniziando un nuovo progetto, usa i Container Flexbox anziché le Sezioni classiche
- Limita l’annidamento: non annidare più di 3 livelli di container, la pagina diventa difficile da gestire
- Nomi descrittivi: rinomina sezioni e container nel Navigatore (doppio clic sul nome) per riconoscerli facilmente
- Padding consistente: usa valori di padding verticale coerenti per tutte le sezioni (ad es. 80px su desktop, 40px su mobile)
- Gap al posto degli spaziatori: nei Container Flexbox, usa il gap nativo invece del widget Spaziatore per la spaziatura tra elementi
Conclusione
La struttura è l’ossatura invisibile che determina la qualità di ogni pagina web. Padroneggiare sezioni, container e layout in Elementor ti permette di creare pagine che non solo sono belle, ma anche performanti, manutenibili e perfettamente responsive. Se vuoi passare dal livello base a quello avanzato, dedica tempo a sperimentare con i Container Flexbox: sono il futuro di Elementor.
Per approfondire, leggi la nostra guida su come creare design responsive con Elementor. Per un aiuto professionale nella progettazione del tuo sito, contatta G Tech Group.
Esempi Pratici di Layout
Layout Hero a 2 Colonne
Il layout hero classico usa un container Flexbox con direzione row: colonna sinistra con titolo, testo e CTA, colonna destra con immagine. Su mobile, inverti con Reverse Columns.
Griglia Servizi a 3 Colonne
Container con 3 colonne uguali, ciascuna con Icon Box. Su tablet 2 colonne, su mobile 1 colonna.
Container Annidati
I container Flexbox si annidano per layout complessi: un container esterno in column con container interni in row. Sostituisce le vecchie Inner Sections.
Guide Correlate della Serie Elementor
Continua a esplorare Elementor con le nostre guide: