Se stai costruendo un sito con Elementor, prima o poi ti trovi a fare i conti con uno dei problemi più comuni del web design: il menu su mobile non funziona come dovrebbe.
L’hamburger che non risponde al tap, le voci di menu troppo piccole, il pannello che si sovrappone al contenuto. Sono situazioni che capitano spesso, soprattutto quando ci si concentra sul design desktop e si lascia il mobile come “sistemerò dopo”.
Il problema è che “dopo” spesso non arriva — e intanto gli utenti abbandonano il sito.
In questa guida vediamo come configurare correttamente l’Elementor mobile menu, partendo dal widget nativo fino all’utilizzo dei popup per una soluzione più avanzata e flessibile.
Ti spieghiamo il perché di ogni scelta, non solo il come.
In realtà esiste anche un terzo modo per creare i menu di navigazione: l’Elementor Mega Menu. Ma per questo vi rimandiamo al precedente articolo già pubblicato nella nostra Elementor Academy Elementor Mega Menu: cos’è, quando usarlo e come crearlo.
Cos’è il menu mobile su Elementor
Elementor gestisce la navigazione attraverso il widget Nav Menu, che puoi inserire nell’header del tuo sito, e ovunque tu ritieni utile inserire degli elementi di navigazione.. Questo widget è pensato per adattarsi alle diverse dimensioni dello schermo: su desktop mostra le voci in orizzontale, su mobile le comprime in un menu a tendina, attivato dal classico pulsante a tre linee — il cosiddetto hamburger menu.
Il punto di rottura tra visualizzazione desktop e mobile viene definito dai breakpoint, cioè le soglie di larghezza dello schermo oltre le quali il layout cambia. Elementor ti permette di personalizzarli nelle impostazioni del sito.
Esistono principalmente due approcci per gestire il menu mobile su Elementor:
- Il menu nativo — quello integrato nel widget Nav Menu, semplice da configurare e sufficiente per la maggior parte dei siti.
- Il menu tramite popup — una soluzione più avanzata, che sfrutta il Popup Builder di Elementor Pro per creare esperienze visivamente più ricche e personalizzate.
Vediamoli entrambi nel dettaglio.
Metodo 1 — Il menu mobile nativo di Elementor
Come funziona il Nav Menu widget
Il widget Nav Menu è il punto di partenza per qualsiasi menu su Elementor. Una volta inserito nel tuo header, puoi collegarlo a qualsiasi menu WordPress creato da Aspetto → Menu.
Su mobile, il widget attiva automaticamente la modalità “hamburger”: le voci di menu scompaiono e al loro posto compare un’icona che, al tap, apre un pannello con tutte le voci.
Questo comportamento è gestito interamente da Elementor, senza bisogno di plugin aggiuntivi.
Guida passo passo alla configurazione
Passo 1 — Aggiungi il widget Nav Menu all’header
Apri l’header con Elementor (se usi Elementor Pro con il Theme Builder, vai su Template → Theme Builder → Header). Cerca il widget “Nav Menu” e trascinalo nella posizione desiderata.
Passo 2 — Collega il menu WordPress
Nel pannello di sinistra, alla voce Menu, seleziona il menu WordPress che vuoi visualizzare. Se non hai ancora creato un menu, fallo prima da Aspetto → Menu nella dashboard di WordPress.
Passo 3 — Imposta il breakpoint di attivazione
Vai nella scheda Layout del widget. Troverai l’opzione Breakpoint, che definisce da quale larghezza di schermo il menu passa alla modalità mobile. Puoi scegliere tra Tablet, Mobile o un valore personalizzato.
In alternativa, puoi modificare i breakpoint globali da Elementor → Impostazioni → Stile.
Passo 4 — Personalizza l’icona hamburger
Sempre nella scheda Layout, trovi le opzioni per l’icona dell’hamburger:
- Scegli tra icone predefinite o carica la tua
- Imposta la dimensione
- Scegli se mostrare anche la scritta “Menu” accanto all’icona (utile per l’accessibilità)
Passo 5 — Stilizza il pannello mobile
Passa alla scheda Stile e scorri fino alla sezione Mobile Dropdown. Da qui puoi personalizzare:
- Colore di sfondo del pannello
- Colore e dimensione del testo delle voci
- Spaziatura tra le voci
- Divisori tra le voci di menu
- Allineamento del testo (sinistra, centro, destra)
Ricorda di passare alla visualizzazione mobile nell’editor di Elementor (icona del telefono in basso) per vedere l’anteprima in tempo reale.
Limitazioni del menu nativo
Il menu nativo di Elementor è pratico e funziona bene per la maggior parte dei casi. Tuttavia ha alcune limitazioni:
- Le animazioni di apertura e chiusura sono basilari e poco personalizzabili.
- Non puoi facilmente aggiungere elementi extra al pannello mobile (es. un pulsante CTA, i social icon, un campo di ricerca).
- Il pannello si apre sempre “a tendina” verso il basso: non puoi facilmente creare un menu fullscreen o a slide laterale senza intervenire con CSS personalizzato.
Se queste limitazioni non ti riguardano, il menu nativo è perfetto. Se invece vuoi qualcosa di più, passa al metodo 2.
Metodo 2 — Elementor mobile menu con i Popup di Elementor
Perché usare un popup al posto del menu nativo
I popup di Elementor (disponibili con Elementor Pro) sono template completi che si aprono sopra la pagina. Possono contenere qualsiasi widget: testo, immagini, pulsanti, icone social, form — e naturalmente anche un Nav Menu.
Usare un popup come menu mobile ti dà una libertà creativa molto maggiore. Puoi creare:
- Un menu fullscreen che occupa tutto lo schermo, con un’animazione di ingresso elegante.
- Un pannello laterale (sidebar menu) che scorre da destra o sinistra.
- Un menu arricchito con elementi aggiuntivi, come un pulsante “Contattaci”, i link ai social o un logo.
Quando conviene questa soluzione
Opta per il menu popup quando:
- Il tuo sito ha un design ricercato e il menu nativo risulta troppo “generico”.
- Vuoi aggiungere elementi extra al menu mobile (CTA, social, ricerca).
- Desideri animazioni di apertura/chiusura personalizzate.
- Stai creando un sito per un brand che richiede un’esperienza utente di alto livello.
Se invece hai un sito semplice, un blog o un e-commerce con tante voci di menu, il menu nativo è probabilmente la soluzione più rapida e leggera.
Guida passo passo
Passo 1 — Crea il popup
Vai su Template → Popup nella dashboard di WordPress e clicca su Aggiungi nuovo. Scegli un template di partenza oppure parti da zero con un canvas vuoto.
Passo 2 — Inserisci il Nav Menu nel popup
All’interno del popup, trascina il widget Nav Menu e configuralo come hai visto nel Metodo 1. Aggiungi tutti gli altri elementi che vuoi includere (logo, pulsanti, social icon).
Passo 3 — Imposta le condizioni di visualizzazione
Nelle impostazioni del popup, sotto Condizioni, scegli Tutto il sito. Questo fa sì che il popup sia disponibile su ogni pagina.
Passo 4 — Configura il trigger
Sotto Trigger, rimuovi eventuali trigger automatici (come “Al caricamento della pagina”) e seleziona Nessuno. Il popup verrà aperto manualmente tramite un pulsante nell’header.
Passo 5 — Collega il pulsante hamburger nel header
Nell’header, aggiungi un widget Pulsante o Icona da usare come hamburger per il mobile. Assicurati di mostrarlo solo su mobile (usa le impostazioni di visibilità responsive di Elementor per nasconderlo su desktop).
Clicca sul pulsante per aprire le sue impostazioni, vai su Link e seleziona Popup → Apri popup. Scegli il popup che hai appena creato.
Passo 6 — Gestisci chiusura e overlay
Nel popup, abilita la chiusura tramite:
- Pulsante X (aggiungi un’icona di chiusura nel template del popup, con il link impostato su “Chiudi popup”)
- Clic sull’overlay (attivabile nelle impostazioni del popup, sotto Overlay)
Testa sempre il comportamento su un dispositivo reale, non solo nell’anteprima dell’editor.
Vantaggi creativi e di UX
Con il menu popup hai pieno controllo sull’esperienza utente:
- Animazioni: scegli tra slide, fade, zoom e altre animazioni di ingresso.
- Fullscreen: imposta la larghezza e altezza del popup al 100% per un effetto fullscreen totale.
- Brand consistency: puoi replicare colori, font e stile del tuo brand in modo molto più preciso rispetto al menu nativo.
- Accessibilità migliorata: con più spazio a disposizione, puoi rendere le voci di menu più grandi e facili da toccare.
Confronto tra i due metodi per creare l’Elementor mobile menu
| Caratteristica | Menu nativo | Menu popup |
| Facilità di configurazione | ✅ Molto semplice | ⚠️ Richiede più passaggi |
| Richiede Elementor Pro | ❌ No (basta la versione free) | ✅ Sì |
| Personalizzazione grafica | ⚠️ Limitata | ✅ Totale |
| Animazioni | ⚠️ Base | ✅ Avanzate |
| Elementi aggiuntivi (CTA, social…) | ❌ Non supportati | ✅ Supportati |
| Impatto sulle performance | ✅ Leggero | ⚠️ Leggermente più pesante |
| Adatto a siti semplici | ✅ Perfetto | ⚠️ Forse eccessivo |
| Adatto a siti con design avanzato | ⚠️ Può essere limitante | ✅ Ideale |
In sintesi: se stai costruendo un sito vetrina o un blog, il menu nativo è più che sufficiente. Se lavori su un progetto con un design curato o hai bisogno di più flessibilità, il menu popup è la scelta giusta.
Errori comuni e best practice per Elementor mobile menu
Lavorando con l’Elementor mobile menu, ci sono alcuni errori che si ripetono spesso. Ecco quelli da evitare — e come farlo.
1. Breakpoint impostati in modo non coerente
Se usi breakpoint diversi in punti diversi del sito, il menu potrebbe attivarsi in momenti “strani”, ad esempio su un tablet in orizzontale dove il menu desktop sarebbe ancora leggibile. Uniforma i breakpoint nelle impostazioni globali di Elementor e rispetta quelli impostati ovunque.
2. Menu che si sovrappone ai contenuti
Capita spesso con il menu nativo: il pannello a tendina si apre ma rimane “sotto” ad altri elementi della pagina. Controlla lo z-index degli elementi dell’header e, se necessario, aggiusta il valore CSS per il wrapper del menu.
3. Tap target troppo piccoli
Le voci del menu mobile devono essere abbastanza grandi da essere toccate comodamente con il pollice. Google raccomanda una dimensione minima di 48×48 pixel per gli elementi interattivi. Aumenta il padding delle voci di menu nelle impostazioni di stile del widget.
4. Non testare su dispositivi reali
L’anteprima mobile nell’editor di Elementor è utile, ma non sostituisce un test su un vero smartphone. Comportamenti come lo scroll, il tap e le animazioni possono essere diversi. Testa sempre su Android e iOS prima di pubblicare.
5. Animazioni troppo elaborate
Un’animazione lenta o pesante sul menu mobile peggiora la percezione della velocità del sito. Scegli animazioni brevi (0.2–0.3 secondi) e leggere. Evita effetti che rallentano l’apertura del menu: l’utente vuole navigare, non assistere a uno spettacolo.
6. Dimenticare l’accessibilità
Un menu accessibile è un menu che funziona anche per chi usa screen reader o ha difficoltà motorie. Assicurati che il pulsante hamburger abbia un attributo aria-label descrittivo e che le voci di menu siano raggiungibili via tastiera.
Conclusione
L’Elementor mobile menu è uno degli elementi più importanti della UX del tuo sito. Un menu che funziona male su mobile significa utenti frustrati, frequenza di rimbalzo alta e, in ultima analisi, meno conversioni.
La buona notizia è che Elementor ti dà tutti gli strumenti per farlo bene — sia con il menu nativo, rapido da configurare e perfetto per la maggior parte dei progetti, sia con i popup, ideali quando vuoi più controllo e personalizzazione.
Scegli l’approccio giusto in base al tuo progetto, testa sempre su dispositivi reali e tieni d’occhio i dettagli: dimensioni dei tap target, breakpoint coerenti, animazioni leggere.
Se hai bisogno di supporto per configurare il menu del tuo sito o vuoi una revisione professionale del tuo progetto Elementor siamo qui per aiutarti.
Scopri il nostro servizio di Assistenza Elementor o contattaci per un progetto su misura.
FAQ — Domande frequenti sull’Elementor mobile menu
Il menu mobile di Elementor funziona anche con la versione gratuita?
Sì. Il widget Nav Menu, incluso il comportamento su mobile con il pulsante hamburger, è disponibile anche nella versione gratuita di Elementor. La versione Pro non è necessaria per il menu nativo. Diventa invece indispensabile se vuoi usare i popup come menu mobile.
Come faccio a nascondere il menu desktop su mobile e mostrare solo l’hamburger?
Nel widget Nav Menu, nella scheda Layout, puoi impostare il breakpoint di attivazione del menu mobile. Sotto quella soglia, le voci desktop scompaiono automaticamente e viene mostrato l’hamburger. Non devi nascondere manualmente nulla.
Posso usare un menu diverso per desktop e mobile con Elementor?
Non direttamente con un solo widget Nav Menu. Ma puoi inserire due widget Nav Menu separati nell’header — uno configurato per desktop e uno per mobile — e usare le impostazioni di visibilità responsive di Elementor per mostrarne uno solo per dispositivo. In alternativa, il menu popup per mobile risolve il problema in modo più elegante.
Il menu popup rallenta il sito?
Un popup Elementor aggiunge un piccolo overhead di codice, ma l’impatto sulle performance è generalmente minimo se il popup è ben costruito. Evita di inserire immagini pesanti o widget inutili nel popup del menu. Se la velocità è una priorità assoluta, il menu nativo è la scelta più leggera.
Come faccio a cambiare il colore dell’icona hamburger in Elementor?
Vai nelle impostazioni del widget Nav Menu, scheda Stile, sezione Hamburger Icon. Troverai le opzioni per il colore dell’icona, sia nello stato normale che al passaggio del mouse. Se vuoi colori diversi a seconda della pagina (es. bianco su header trasparente, nero su header colorato), dovrai usare il CSS personalizzato o le varianti del template dell’header.
