L’intestazione (Header) è la prima sezione che gli utenti vedono quando accedono al tuo sito web.
Un’intestazione professionale può rappresentare il tuo brand, semplificare la navigazione e aumentare il tempo di permanenza degli utenti.
In questa guida utilizzeremo Elementor Pro per creare, senza bisogno di programmare, un’intestazione reattiva ed elegante per il tuo sito WordPress.
Per creare un’intestazione in Elementor, devi utilizzare la sezione Theme Builder.
Accedi alla bacheca di WordPress.
Dal menu laterale destro, vai su:
Elementor → Theme Builder (Generatore di Template)
Clicca sull’opzione Header (Intestazione).
Poi premi il pulsante Add New Header (Aggiungi nuova intestazione) per iniziare a crearne una nuov
💡 Nota: per accedere a questa sezione, è necessario avere installata la versione Pro di Elementor.
Dopo aver cliccato su “Add New Header”, Elementor mostrerà diversi modelli predefiniti di intestazione.
A questo punto hai due opzioni:
Usare un template già pronto (veloce e semplice)
Creare un design da zero (personalizzato e completamente modificabile)
Per progettare un’intestazione personalizzata:
Clicca sull’icona “+”.
Scegli una struttura a tre colonne (logo / menu / pulsante).
Ora hai tre colonne. È il momento di riempire il contenuto di ciascuna colonna:
Nella colonna di sinistra, trascina e rilascia il widget Site Logo.
Questo elemento mostrerà il logo impostato in WordPress.
Nella colonna centrale, aggiungi il widget Nav Menu (Menu di navigazione).
Dalle impostazioni sulla destra, seleziona il menu che desideri visualizzare.
Nella colonna di destra, inserisci il widget Button (Pulsante) e imposta il testo, ad esempio “Contattaci” oppure “Inizia ora”.
Elementor offre potenti strumenti per la personalizzazione dello stile:
Modificare il colore di sfondo dell’intestazione: vai su Style → Background → Color
Aggiungere un’ombra sotto l’header: usa l’opzione Box Shadow
Regolare spaziature e margini (Padding / Margin) per organizzare meglio le sezioni
Cambiare il font del menu: dal pannello Typography nelle impostazioni del widget Nav Menu
💡 Suggerimento SEO: nel menu dell’intestazione inserisci solo le pagine principali
(Home, Servizi, Blog, Contatti) per aiutare Google a comprendere meglio la struttura del tuo sito.
Oggi oltre il 70% degli utenti visita i siti web da dispositivi mobili, quindi l’intestazione deve essere completamente responsive.
Per testarla in Elementor:
Nella parte inferiore della pagina, clicca sull’icona Responsive Mode.
Passa tra le visualizzazioni Desktop / Tablet / Mobile.
In modalità Mobile, imposta il menu come Hamburger Menu (menu a scomparsa).
Adatta i font e le dimensioni del pulsante per rendere più facile il clic sui dispositivi mobili.
Se vuoi che l’intestazione rimanga sempre visibile nella parte superiore della pagina durante lo scroll, segui questi passaggi:
Clicca sulla sezione dell’header per aprirne le impostazioni.
Vai alla scheda Advanced → Motion Effects e attiva l’opzione Sticky → Top.
Puoi anche attivare l’opzione “On Scroll Up”, in modo che l’intestazione venga mostrata solo quando l’utente scorre verso l’alto.
Nell’ultima fase devi specificare dove verrà visualizzata l’intestazione.
Clicca sulla freccia accanto al pulsante “Publish”.
Seleziona Display Conditions.
Se vuoi che l’header venga mostrato su tutto il sito, scegli Entire Site.
Infine, clicca su Save & Close per salvare e applicare le impostazioni.
🔹 Usa colori che siano coerenti con il logo e l’identità del tuo brand.
🔹 Mantieni l’altezza dell’intestazione ridotta, così il contenuto principale sarà subito visibile all’utente.
🔹 Scegli font semplici e facilmente leggibili.
🔹 Inserisci le icone dei social media in un angolo dell’intestazione.
🔹 Nella versione mobile, posiziona logo e pulsante al centro per una migliore usabilità.
Seguendo questi passaggi, sei riuscito a creare un’intestazione professionale, responsive e accattivante per il tuo sito WordPress — senza scrivere una sola riga di codice.
Elementor, con la sua interfaccia semplice e le numerose funzionalità, è lo strumento ideale sia per i designer alle prime armi che per i professionisti.
Se è la prima volta che utilizzi Elementor, ti consigliamo di iniziare con i modelli predefiniti e, poco alla volta, personalizzare colori, font e menu, così da acquisire piena padronanza del design.
