Quando costruisci una landing page con Elementor, la griglia su desktop appare perfetta: tre colonne, ordine rigoroso, tutto respira. La apri su tablet e la terza colonna scivola in basso, rompe il ritmo, lascia uno spazio vuoto a destra. Ti suona familiare?

Elementor, di default, manda a capo le colonne che non entrano in una riga sugli schermi stretti. Ma se su tablet ti servissero non tre, ma esattamente due colonne per riga, senza interruzioni e senza spazi vuoti? O su mobile, non una, ma due?

Ecco due metodi funzionanti: quello integrato (per le versioni di Elementor 2024 e successive) e il CSS personalizzato (per il controllo totale su qualsiasi versione). Entrambi sono testati e non entrano in conflitto con l'ottimizzazione DOM.

💡 Panoramica rapida:

• Imposta le larghezze delle colonne in Elementor dalla scheda Avanzate per ogni breakpoint separatamente
• Se le impostazioni standard non bastano, aggiungi CSS personalizzato con flex-wrap e media queries
• Verifica il layout su tutti i dispositivi: le colonne si ridispongono senza interruzioni né spazi vuoti

Il procedimento è mostrato chiaramente in questo video:

1. Metodo integrato: larghezze colonna responsive

A partire da Elementor 3.18+ (e in particolare con il passaggio ai contenitori Flexbox nel 2024), puoi controllare le larghezze delle colonne su ciascun dispositivo senza scrivere una sola riga di codice.

Crea una sezione con colonne

Aggiungi una nuova sezione e scegli una struttura a tre colonne:

Duplica ciascuna delle tre colonne per ottenerne sei. Questo serve affinché su tablet le colonne si ridispongano in due file da due, invece di lasciare la terza da sola:

Per vedere il layout, riempi le colonne con dei numeri usando il widget «Titolo», così l'anteprima mostra subito quale è finita dove:

Impostare la larghezza per ciascun dispositivo

Vai nelle impostazioni di ogni colonna → scheda Avanzate. Nella sezione Larghezza, passa alla modalità responsive (icona tablet/telefono) e imposta i valori secondo la documentazione di Elementor:

• Desktop: tre colonne per riga (la larghezza sarà divisa automaticamente)
• Tablet: due per riga
• Mobile: una per riga (o due, se ti servono due anche su mobile)

Punto chiave: la larghezza si imposta per ognuna delle sei colonne separatamente, Elementor applica il valore a tutte le colonne all'interno di una sezione. Non ci sarà alcun ritorno a capo indesiderato perché su tablet sei colonne danno esattamente due file da due.

2. CSS personalizzato: controllo totale

Il metodo integrato copre la maggior parte degli scenari, ma a volte serve un numero diverso di colonne su tablet (2 invece di 3) e su mobile una disposizione non standard (2 invece di 1). Oppure hai una versione vecchia di Elementor senza larghezze responsive. In quel caso, CSS.

Assegna una classe CSS alla sezione

Apri le impostazioni della sezione → scheda Avanzate → campo Classi CSS. Inserisci una classe univoca, ad esempio elementor-custom-columns:

Aggiungi le regole CSS

Inserisci il codice nelle impostazioni della sezione (scheda Avanzate → CSS personalizzato) oppure nel personalizzatore del tema (Aspetto → Personalizza → Stili aggiuntivi). Ecco la versione attuale:

1
selector.elementor-custom-columns .elementor-container {
2
  flex-wrap: wrap;
3
  justify-content: center;
4
}

Ora, le larghezze delle colonne per ciascun dispositivo tramite media queries. Per le sezioni (Sections) usa il selettore .elementor-top-column, per i contenitori (Containers) .e-con-inner > .e-con:

1
/* Base: three columns on desktop */
2
.elementor-custom-columns .elementor-top-column {
3
  width: 33.33%;
4
}
5
 
6
/* Tablet: two columns */
7
@media (min-width: 768px) and (max-width: 1024px) {
8
  .elementor-custom-columns .elementor-top-column {
9
    width: 50%;
10
  }
11
}
12
 
13
/* Mobile: one column */
14
@media (max-width: 767px) {
15
  .elementor-custom-columns .elementor-top-column {
16
    width: 100%;
17
  }
18
}

Cosa succede qui: flex-wrap: wrap permette alle colonne di andare a capo quando non entrano in una riga, e justify-content: center centra le colonne rimanenti (senza uno spazio vuoto a destra). Le media queries sovrascrivono la larghezza a ogni breakpoint, esattamente con il numero di colonne per riga desiderato.

Risultato sui dispositivi

Su desktop, tre colonne ordinate:

Su tablet, esattamente due per riga, senza interruzioni e spazi vuoti:

Su mobile, una colonna a larghezza piena:

Per chi ha attivato l'ottimizzazione DOM

Se nelle impostazioni di Elementor (Elementor → Impostazioni → Esperimenti) l'opzione Ottimizzazione DOM migliorata è attiva, i selettori cambiano, .elementor-row scompare. CSS adattato per questa modalità:

1
selector.elementor-custom-columns {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
}
6
 
7
.elementor-custom-columns .elementor-top-column {
8
  width: 33.33%;
9
}
10
 
11
@media (min-width: 768px) and (max-width: 1024px) {
12
  .elementor-custom-columns .elementor-top-column {
13
    width: 50%;
14
  }
15
}
16
 
17
@media (max-width: 767px) {
18
  .elementor-custom-columns .elementor-top-column {
19
    width: 100%;
20
  }
21
}

Un esempio di codice verificato per questo scenario è disponibile anche nel GitHub Gist di oooh-boi, funzionante, testato su Elementor 3.19+ con ottimizzazione DOM attiva.

Quale metodo scegliere: tabella comparativa

Se hai una versione recente di Elementor e una griglia standard (2-4 colonne), usa il metodo integrato: è più veloce e non richiede CSS. Se ti serve un layout non standard, stai usando una vecchia versione del plugin o hai attivato l'ottimizzazione DOM, il CSS personalizzato ti dà il controllo totale.

⁉️🤔 Domande frequenti

Perché le colonne vanno a capo con un'interruzione su tablet?

Elementor di default usa flex-wrap: nowrap per la riga di colonne. Quando tre colonne non entrano nella larghezza del tablet, si forma un'interruzione: la seconda colonna sulla prima riga, la terza va sulla seconda e rimane da sola. Con flex-wrap: wrap e larghezze colonna pari a metà riga su tablet, sei colonne si dispongono esattamente in tre file da due, senza interruzioni. justify-content: center centra le colonne se nell'ultima riga ce ne sono meno del necessario. Soluzione: o larghezza responsive tramite UI (metodo 1), oppure flex-wrap: wrap con media queries (metodo 2).

Il metodo funziona con i contenitori (Flexbox Containers)?

Sì, ma i selettori sono diversi. Per i contenitori invece di .elementor-top-column usa .e-con-inner > .e-con, e invece di .elementor-container, il contenitore stesso. Il metodo responsive integrato (n.1) funziona con i contenitori senza modifiche.

È obbligatorio duplicare le colonne?

Sì, se su tablet ti servono meno colonne per riga rispetto al desktop. Ad esempio: desktop 3 colonne, tablet 2. Tre colonne originali non possono essere ridisposte in due file ordinate da due. Sei colonne (ciascuna duplicata) si ridispongono in tre file da due.

Entra in conflitto con i plugin di caching?

Le regole CSS aggiunte tramite CSS personalizzato della sezione o personalizzatore finiscono negli stili inline o in wp_head, passano attraverso qualsiasi plugin di cache (WP Rocket, W3 Total Cache, LiteSpeed) senza problemi. Dopo aver modificato il CSS, svuota la cache.

Cosa fare se le colonne sono troppo strette su mobile?

Verifica che la larghezza non venga ereditata dal breakpoint tablet. In Elementor le impostazioni sono a cascata: il mobile eredita dal tablet, il tablet eredita dal desktop. Imposta esplicitamente la larghezza a ogni breakpoint, anche se il valore coincide con quello superiore.

Vale la pena complicarsi con il CSS nel 2026?

Le impostazioni responsive integrate di Elementor bastano per la maggior parte dei compiti, usale come strumento principale. Ma quando su tablet ti servono non due e non tre, ma per esempio quattro colonne con larghezze disuguali, il CSS personalizzato resta l'unico modo per realizzare esattamente ciò che hai in mente.

Prova entrambi i metodi su una pagina di test: inizia con quello integrato (più veloce) e, se ti manca flessibilità, usa l'approccio CSS. La capacità di impostare media queries per Elementor ti sarà utile anche per altre attività: font personalizzati su dispositivi diversi, nascondere blocchi, spaziature non standard per tablet.