La navigazione è uno degli elementi più critici di qualsiasi sito web. Un menu ben progettato guida l’utente attraverso i contenuti, migliora l’esperienza utente e aumenta il tempo di permanenza sul sito. Con Elementor Pro e il Theme Builder, puoi creare header personalizzati con sticky effect, transparent header, shrink on scroll e mega menu avanzati. In questa guida vediamo come implementare ogni funzionalità.
Creare un Header Personalizzato
Il primo passo è creare un header custom con il Theme Builder:
- Vai su Template → Theme Builder
- Seleziona Header e clicca Aggiungi Nuovo
- Scegli un template dalla libreria o parti da zero
- Progetta l’header con logo, menu, pulsante CTA e eventuali icone social
- Pubblica e imposta le Conditions (Entire Site per applicarlo a tutto il sito)
Struttura Tipica dell’Header
Un header professionale tipicamente include:
- Logo – Widget Site Logo o Image, allineato a sinistra
- Menu principale – Widget Nav Menu con le voci principali, centrato o allineato a destra
- CTA Button – Un pulsante d’azione (“Contattaci”, “Preventivo Gratuito”) all’estrema destra
- Icone secondarie – Ricerca, carrello, account, social (opzionali)
Il Widget Nav Menu
Il widget Nav Menu di Elementor Pro è il cuore della navigazione. Supporta i menu creati in Aspetto → Menu di WordPress e offre numerose opzioni di personalizzazione:
Configurazione Base
- Menu – Seleziona quale menu WordPress visualizzare
- Layout – Orizzontale (default), Verticale o Dropdown
- Align – Allineamento del menu (sinistra, centro, destra, giustificato)
- Pointer – Effetto indicatore sulle voci attive e hover (underline, overline, framed, double line, background, text)
- Animation – Animazione del pointer (fade, slide, grow, drop in, none)
Styling del Menu
Nella tab Style puoi personalizzare ogni aspetto:
- Typography – Font, dimensione, peso, trasformazione (uppercase, capitalize)
- Text Color – Colore del testo per stato normale, hover e attivo
- Pointer Color – Colore dell’indicatore
- Spacing – Spaziatura tra le voci del menu
- Submenu – Stile del dropdown (sfondo, bordo, ombra, larghezza, animazione apertura)
Hamburger Menu su Mobile
Su dispositivi mobili, il menu orizzontale deve trasformarsi in un hamburger menu (le tre linee). Il widget Nav Menu di Elementor gestisce automaticamente questa trasformazione:
Configurazione Mobile
- Breakpoint – Scegli a quale larghezza il menu diventa hamburger (Tablet: 1024px, Mobile: 767px, o un valore custom)
- Toggle Button – Personalizza l’icona hamburger (colore, dimensione, allineamento)
- Full Width – Il menu mobile si espande a larghezza piena dello schermo
- Animation – Animazione di apertura del menu mobile (slide down, slide up, fade, none)
- Close Icon – Mostra un’icona X per chiudere il menu aperto
Menu Off-Canvas
Per un’esperienza mobile più moderna, puoi creare un menu off-canvas che scivola dal lato dello schermo. Con Elementor, combina il widget Nav Menu con il widget Popup Builder: crea un popup con il menu, imposta l’animazione slide-in da sinistra/destra, e usa il pulsante hamburger come trigger.
Sticky Header
Lo sticky header (header fisso) rimane visibile in cima alla pagina quando l’utente scrolla verso il basso. È una best practice per la navigazione perché mantiene il menu sempre accessibile.
Attivare lo Sticky Effect
- Seleziona il container principale dell’header nell’editor
- Vai nella tab Advanced → Motion Effects
- Attiva Sticky e seleziona “Top” come posizione
- Imposta l’Offset (distanza dal bordo superiore, solitamente 0)
- Scegli su quali dispositivi attivare lo sticky (desktop, tablet, mobile)
- Imposta lo z-index a un valore alto (es. 9999) per assicurarti che l’header resti sopra tutti gli altri elementi
Shrinking Header (Riduzione su Scroll)
Un effetto molto elegante è l’header che si riduce quando l’utente scrolla la pagina: il logo diventa più piccolo, il padding si riduce e lo sfondo diventa più opaco. Per implementarlo con Elementor:
- Nella tab Advanced del container header, aggiungi una classe CSS:
shrink-header - Nella sezione Custom CSS del container o nelle Site Settings, aggiungi le regole CSS che definiscono lo stato ridotto
- Usa
transition: all 0.3s easeper un’animazione fluida
In alternativa, puoi usare i Scrolling Effects nella tab Motion Effects per animare automaticamente il padding e la dimensione del logo basandosi sulla posizione dello scroll. Imposta l’effetto “Transform → Scale” sul logo con viewport percentuale per ottenere il ridimensionamento progressivo.
Transparent Header
L’header trasparente è un design molto comune nelle landing page e nei siti moderni: l’header si sovrappone alla hero section con sfondo trasparente, e diventa opaco (con sfondo colorato) quando l’utente inizia a scrollare.
Come Implementarlo
- Imposta lo sfondo del container header come trasparente
- Attiva lo Sticky nelle Motion Effects
- Aggiungi Custom CSS per lo stato “sticky attivo”:
.elementor-sticky--active { background-color: #ffffff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } - Per il testo, inverti i colori: bianco su sfondo trasparente, scuro su sfondo opaco. Usa la classe
.elementor-sticky--activeper targetizzare lo stato sticky
Questo effetto crea un impatto visivo notevole: l’utente vede la hero section a schermo intero senza interruzioni, e l’header appare gradualmente durante lo scroll.
Mega Menu con Elementor
Il mega menu è un dropdown espanso che può contenere colonne multiple, immagini, icone, CTA e molto altro. È essenziale per siti con molte pagine e categorie (e-commerce, portali informativi, siti aziendali complessi).
Metodo 1: Sub-menu con Colonne
Per mega menu semplici, usa i sub-menu nativi di WordPress con styling avanzato:
- In Aspetto → Menu, crea una struttura con voci principali e sotto-voci su più livelli
- Nel widget Nav Menu di Elementor, stila il dropdown con larghezza maggiore del normale
- Usa Custom CSS per organizzare le sotto-voci in colonne:
.elementor-nav-menu--dropdown { columns: 3; }
Metodo 2: Mega Menu con Plugin
Per mega menu complessi con immagini, icone e layout personalizzati, usa un plugin dedicato come JetMenu (Crocoblock) o Max Mega Menu:
- Crea il contenuto del mega menu usando l’editor Elementor come qualsiasi altra pagina
- Inserisci colonne, immagini, icone, pulsanti CTA e qualsiasi widget
- Associa il template al menu item corrispondente
- Il risultato è un dropdown che può contenere design complessi e interattivi
Contenuti del Mega Menu
Un mega menu efficace può includere:
- Colonne di link – Categorie organizzate in gruppi logici con heading
- Immagini prodotto – Anteprime dei prodotti o categorie in evidenza
- CTA – Banner promozionale con pulsante (“Nuova Collezione”, “Offerta del Mese”)
- Icone – Icone accanto a ogni voce per una navigazione più intuitiva
- Post recenti – Ultimi articoli del blog nella sezione “Risorse” del menu
CTA Button nell’Header
Un pulsante CTA nell’header è fondamentale per la conversione. Ecco le best practice:
- Colore contrastante – Il pulsante deve risaltare rispetto al resto dell’header
- Testo orientato all’azione – “Prenota una Consulenza”, “Richiedi Preventivo”, non “Clicca Qui”
- Dimensione contenuta – Abbastanza grande da essere notato ma non da dominare l’header
- Responsive – Su mobile, il pulsante può essere incluso nel menu hamburger o posizionato come elemento fisso in basso allo schermo
Performance dell’Header
L’header viene caricato su ogni pagina del sito, quindi le sue performance sono cruciali:
- Logo leggero – Usa SVG per il logo (scalabile senza perdita di qualità e peso minimo) o un PNG ottimizzato sotto i 20KB
- Evita script pesanti – Non caricare animazioni JavaScript complesse nell’header
- CSS inline – Se lo sticky header causa CLS (Cumulative Layout Shift), imposta un’altezza fissa per il container header
- Preload fonts – Pre-carica i font usati nell’header per evitare il flash of unstyled text (FOUT)
Conclusione
Un header ben progettato con sticky effect, navigazione intuitiva e mega menu è la chiave per un’esperienza utente eccellente. Con Elementor Pro, hai tutti gli strumenti per creare header professionali che funzionano perfettamente su desktop, tablet e mobile. Sperimenta con le diverse opzioni e trova la combinazione perfetta per il tuo progetto.
Hai bisogno di un header professionale con mega menu e navigazione avanzata? Il team di G Tech Group progetta siti web con navigazione ottimizzata per le conversioni e l’esperienza utente. Contattaci per discutere del tuo progetto.
Guide Correlate della Serie Elementor
Continua a esplorare Elementor con le nostre guide: