Chi ha imparato Elementor qualche anno fa ragiona per sezioni e colonne: una sezione a tutta larghezza, dentro le colonne, nelle colonne i widget. Chi inizia oggi vede invece i container. I due sistemi convivono, e questo genera confusione. Ecco come inquadrarli.
La differenza in una frase
Il vecchio sistema aveva tre livelli fissi — sezione, colonna, widget. Il container è un livello, annidabile a piacere, che internamente lavora con Flexbox, il modello di layout con cui oggi viene costruito praticamente ogni sito moderno.
Che cosa migliora
Meno annidamento, meno markup. Un blocco a una colonna richiedeva prima sezione e colonna, quindi due livelli per un solo blocco di contenuto. Con i container è uno. Su un'intera pagina questo si somma in un HTML sensibilmente più leggero — cosa che giova ai tempi di caricamento e rende la struttura più leggibile.
Un allineamento che funziona davvero. Allineare in basso tre riquadri con altezze di testo diverse, con le colonne, era un lavoro di bricolage fatto di altezze minime uguali e ritocchi manuali. Con Flexbox sono due clic: direzione, allineamento, fatto.
Comportamento invece di indovinare numeri. Stabilisce se gli elementi stiano in fila o uno sotto l'altro, come si distribuiscano, se vadano a capo quando lo spazio si stringe. Il layout reagisce allo spazio disponibile invece di essere legato a valori percentuali fissi — cosa che proprio sui tablet fa la differenza.
Ordine modificabile liberamente. Sul desktop l'immagine deve stare a sinistra, sul telefono però sopra il testo? Con Flexbox è un'impostazione, non una doppia costruzione.
Le quattro impostazioni che le servono davvero
Il container ha molte opzioni. Nella pratica lavora quasi esclusivamente con quattro:
Direzione — affiancati (riga) o uno sotto l'altro (colonna). L'interruttore più importante in assoluto.
Allineamento — come stanno gli elementi trasversalmente rispetto alla direzione. In una riga: in alto, al centro, in basso.
Distribuzione — come viene ripartito lo spazio lungo la direzione. «Spazio in mezzo» è il valore che le serve per le intestazioni con logo a sinistra e menu a destra.
Spaziatura — la distanza fra gli elementi. Sostituisce gli spazi interni che prima si mettevano su ogni singola colonna, e lo fa in modo più affidabile.
Una volta capite queste quattro, costruisce il novanta per cento di tutti i layout. Il resto è rifinitura.
Una struttura che ha dato buoni risultati
Per una normale sezione di contenuto uso un container esterno, direzione colonna, a tutta larghezza con lo sfondo. Dentro, un container interno, limitato in larghezza e centrato — è la sua area di testo. E lì dentro, dove serve, un container in direzione riga per gli elementi affiancati.
Questo schema — fuori la cornice, dentro la limitazione di larghezza, dentro ancora i contenuti — regge molto a lungo e resta comprensibile anche dopo mesi.
Dovrebbe ricostruire le pagine esistenti?
No. Perlomeno non senza un motivo.
Elementor offre una conversione da sezioni a container. Spesso funziona bene, ma non sempre senza perdite — soprattutto con pagine ricche di spaziature personalizzate, margini negativi o CSS proprio. Ricostruire una pagina che ha un bell'aspetto e funziona non le porta un visitatore in più e può costare mezza giornata di ritocchi.
Il mio metodo: il nuovo si costruisce con i container, l'esistente resta com'è. Se una vecchia pagina viene comunque rivista nei contenuti, colga l'occasione per ricostruirla. Così il sito migra a poco a poco, senza che debba farne un progetto di ristrutturazione.
Se invece converte: prima un backup, e dopo verifichi ogni pagina su telefono e tablet. Che cos'altro possa andare storto in questi casi è spiegato in Aggiornare Elementor senza rompere il layout.
L'effetto collaterale che apprezzo di più
Meno annidamento significa meno HTML per pagina. Non è un miracolo prestazionale — i tempi di caricamento dipendono molto di più da immagini e script. Ma è un passo nella direzione giusta, e non costa nulla, perché sta costruendo comunque. Le leve maggiori per i tempi di caricamento stanno in Elementor e i Core Web Vitals.
Elementor Pro: i container ci sono in entrambe le versioni. Pro diventa rilevante solo quando vuole usare questa struttura anche per intestazione, footer e layout degli articoli. Scopri Elementor Pro
Se sta iniziando ora
Non impari nemmeno il vecchio sistema. Sezioni e colonne le capiterà di incontrarle ancora a lungo in guide e video più datati — può leggerle senza usarle. Cominci direttamente con i container; le risparmia di imparare un modello per poi doverlo disimparare.
È esattamente così che procedo anche nel mio corso Elementor: Flexbox fin dall'inizio, perché è lo stato dell'arte su cui lavorerà nei prossimi anni.
Tag