Apri il sito di un’azienda dal telefono, scorri verso il basso per leggere i servizi e, a un certo punto, vuoi tornare al menu o chiamare. Se l’intestazione è rimasta in cima alla pagina, devi risalire con il pollice per diversi secondi. Se invece l’header ti ha “seguito”, compatto e discreto, basta un tocco.
È questo il principio dello sticky header: un’intestazione che resta fissa in alto mentre si scorre la pagina. Con Elementor si può ottenere in pochi clic e, con qualche riga di CSS, renderla anche animata: più alta e trasparente quando la pagina è appena aperta, più bassa e con lo sfondo pieno quando l’utente inizia a scorrere.
In questa guida vediamo come creare un Elementor sticky header passo passo: le impostazioni da usare, il codice per l’effetto di riduzione allo scroll, le varianti più richieste (header trasparente e header che si nasconde) e gli errori che fanno impazzire anche chi usa Elementor da anni.
Cos’è uno sticky header e quando conviene usarlo
“Sticky” in inglese significa appiccicoso: l’header si “incolla” al bordo superiore dello schermo e resta visibile per tutta la navigazione. Il vantaggio è evidente su pagine lunghe, come home page ricche di sezioni, cataloghi o articoli del blog: menu, logo e pulsante di contatto restano sempre a portata di mano, e il visitatore non perde l’orientamento. Ne abbiamo parlato anche nella guida su come migliorare la navigazione del sito.
C’è però un prezzo da pagare: lo spazio. Un’intestazione fissa alta 120 pixel su uno smartphone occupa una fetta importante dello schermo e copre i contenuti. Per questo lo sticky header moderno è quasi sempre animato: quando l’utente scorre si riduce, oppure si nasconde e ricompare solo quando si torna verso l’alto. Su landing page molto brevi, o pagine con un unico obiettivo di conversione, può essere persino superfluo.
Cosa ti serve prima di iniziare
L’effetto Sticky fa parte degli Effetti di movimento di Elementor Pro, così come il Theme Builder con cui si crea un header globale per tutto il sito. Con la versione gratuita puoi ottenere un risultato simile solo tramite CSS personalizzato, usando la proprietà position: sticky, ma perdi le opzioni visuali e la classe per gli effetti allo scroll che vedremo tra poco.
Ti serve inoltre un header già costruito. Se parti da zero, la nostra guida all’header con Elementor ti accompagna nella struttura, mentre per le basi del layout trovi tutto nell’articolo sui container di Elementor.
Come creare uno sticky header con Elementor: la procedura
1. Crea l’header con il Theme Builder
Dalla bacheca di WordPress vai su Modelli › Theme Builder, scegli Header e crea un nuovo modello. Costruisci l’intestazione dentro un unico contenitore principale: all’interno metterai il logo, il menu ed eventualmente un pulsante. Questo dettaglio è importante, perché lo sticky va applicato al contenitore esterno, non ai singoli widget. Prima di pubblicare, imposta le condizioni di visualizzazione su “Intero sito”.
2. Attiva lo Sticky negli Effetti di movimento
Seleziona il contenitore principale, apri la scheda Avanzate e poi la sezione Effetti di movimento (Motion Effects). Qui trovi quattro impostazioni che governano tutto il comportamento dell’header.
- Sticky: scegli In alto (Top). Il contenitore si fermerà sul bordo superiore dello schermo.
- Sticky su (Sticky On): i dispositivi su cui l’effetto è attivo. Di norma si lasciano Desktop, Tablet e Mobile; vedremo più avanti quando conviene toglierne uno.
- Offset: la distanza dal bordo superiore. Per un header si lascia quasi sempre a 0.
- Offset effetti (Effects Offset): quanti pixel bisogna scorrere prima che Elementor “segnali” che lo scroll è iniziato. È il valore chiave per l’animazione: un buon punto di partenza è l’altezza dell’header, per esempio 90 o 100.
A questo punto l’header è già sticky. Salva e prova la pagina in anteprima: scorrendo, l’intestazione resterà in alto. Per i dettagli su tutte le opzioni puoi consultare la documentazione ufficiale di Elementor sullo scorrimento sticky.
3. Assegna una classe CSS e il tag HTML corretto
Per animare l’header ci serve un modo semplice per “chiamarlo” nel CSS. Sempre nel contenitore principale, nella scheda Avanzate, compila il campo Classi CSS con sticky-header. Poi, nella scheda Layout, apri Opzioni aggiuntive e imposta il Tag HTML su header: non cambia l’aspetto, ma rende il codice più corretto per i motori di ricerca e per le tecnologie assistive.
4. Anima l’header allo scroll con la classe elementor-sticky–effects
Ecco il “trucco” su cui si basa l’animazione. Quando l’utente supera il valore impostato in Offset effetti, Elementor aggiunge automaticamente al contenitore la classe elementor-sticky--effects; quando torna in cima, la toglie. Basta quindi scrivere due stati nel CSS: com’è l’header normalmente e com’è quando ha quella classe. Il passaggio tra i due lo gestisce la proprietà transition, che rende il cambiamento morbido invece che a scatto.
Seleziona il contenitore principale, vai su Avanzate › CSS personalizzato (oppure, per tenerlo in un unico posto, su Impostazioni del sito › CSS personalizzato) e incolla questo codice, adattando colori e misure al tuo progetto:
/* Stato iniziale dell'header */
.sticky-header {
min-height: 110px;
transition: min-height .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.sticky-header .elementor-widget-image img {
max-width: 180px;
transition: max-width .3s ease;
}
/* Stato dopo lo scroll (oltre l'Offset effetti) */
.sticky-header.elementor-sticky--effects {
min-height: 70px;
background-color: #ffffff !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}
.sticky-header.elementor-sticky--effects .elementor-widget-image img {
max-width: 130px;
}Il risultato: l’header parte alto e arioso, e dopo i primi pixel di scroll si compatta, il logo si rimpicciolisce e compare una leggera ombra che lo stacca dai contenuti. Questo tipo di dettaglio è una micro-interazione: piccola, ma fa percepire il sito come curato. Lo stesso approccio è descritto anche nella guida di Elementor sullo shrinking sticky header.
Un consiglio pratico: anima solo proprietà “leggere” come altezza, colori, ombre e dimensione del logo, e mantieni la durata tra 0,2 e 0,4 secondi. Animazioni più lunghe sembrano lente; animazioni su troppi elementi rischiano di appesantire lo scroll sui telefoni meno recenti.
Due varianti molto richieste
Header trasparente sopra l’immagine di apertura
È l’effetto in cui l’intestazione è “appoggiata” sopra la prima sezione della pagina, spesso una grande immagine o un video, e diventa piena solo con lo scroll. Per ottenerlo, nel contenitore dell’header imposta lo sfondo trasparente e uno z-index alto (per esempio 99), così resta sopra agli altri elementi. Poi dai all’header un margine inferiore negativo pari alla sua altezza (per esempio -110px): in questo modo la sezione successiva “sale” sotto l’intestazione.
Il CSS visto sopra si occuperà del resto, colorando lo sfondo quando compare la classe degli effetti. Ricorda di usare testi e logo chiari solo se la prima sezione di tutte le pagine ha uno sfondo scuro: altrimenti meglio limitare l’header trasparente alla home page, magari con un secondo modello e le relative condizioni di visualizzazione. Se vuoi approfondire la hero section, abbiamo una guida dedicata.
Header che si nasconde scendendo e ricompare risalendo
È la soluzione più “rispettosa” dello spazio: mentre l’utente legge e scorre verso il basso, l’header scompare; appena accenna a risalire, ricompare. Elementor non ha un’opzione nativa per questo comportamento, ma bastano poche righe di JavaScript. Vai su Elementor › Codice personalizzato, crea un nuovo snippet, posizionalo in fondo al body e incolla:
<script>
document.addEventListener('DOMContentLoaded', function () {
var headers = document.querySelectorAll('.sticky-header:not(.elementor-sticky__spacer)');
var ultimo = window.scrollY;
window.addEventListener('scroll', function () {
var y = window.scrollY;
headers.forEach(function (h) {
h.classList.toggle('header-nascosto', y > ultimo && y > 200);
});
ultimo = y;
}, { passive: true });
});
</script>E aggiungi al CSS dell’header queste due regole:
.sticky-header { transition: transform .3s ease, min-height .3s ease, background-color .3s ease; }
.sticky-header.header-nascosto { transform: translateY(-100%); }Il valore 200 indica dopo quanti pixel l’header può iniziare a nascondersi: così, nella parte alta della pagina, resta sempre visibile. Il selettore esclude l’elemento “segnaposto” che Elementor crea per evitare che i contenuti salti quando l’header diventa fisso.
Sticky header e smartphone: le attenzioni da avere
Sul telefono lo spazio verticale è prezioso, quindi la regola è semplice: header più basso possibile. Un’altezza tra 56 e 70 pixel è di solito sufficiente per logo, icona del menu e magari un pulsante di chiamata. Puoi impostare valori diversi per tablet e mobile direttamente dalle opzioni responsive di Elementor, o con le regole per i breakpoint. Se il menu mobile si apre a tutto schermo, controlla anche che resti utilizzabile con l’header fisso: trovi qualche idea nella guida al menu mobile di Elementor.
In alcuni casi conviene addirittura togliere Mobile dall’impostazione Sticky su: per esempio quando l’header contiene molti elementi che non si possono ridurre, oppure quando il sito ha già una barra di contatto fissa in basso. Meglio un header normale che uno sticky che copre metà dello schermo.
Errori comuni (e come risolverli)
Lo sticky non funziona. Nella maggior parte dei casi l’effetto è stato applicato a un widget o a un contenitore interno invece che a quello principale. Un’altra causa frequente è una regola overflow: hidden su un elemento genitore, che impedisce allo sticky di comportarsi correttamente.
L’header finisce sotto altri elementi. Slider, mappe o video possono avere un livello di sovrapposizione superiore. Aumenta lo z-index del contenitore dell’header (99 o più).
I link interni portano sotto l’header. Se usi link che puntano a sezioni della stessa pagina, il titolo della sezione può finire nascosto dietro l’intestazione fissa. Si risolve con la proprietà CSS scroll-margin-top sulle sezioni di destinazione; ne parliamo anche nella guida sugli ancoraggi in Elementor.
L’effetto parte subito o non parte mai. Controlla l’Offset effetti: con 0 la classe viene aggiunta immediatamente, con un valore troppo alto l’utente deve scorrere molto prima di vedere il cambiamento.
I contenuti “saltano” mentre si scorre. Un salto visibile è spesso causato da animazioni sull’altezza di elementi che spostano il resto della pagina. Oltre a essere fastidioso, peggiora la stabilità visiva misurata dai Core Web Vitals. Verifica la pagina con calma su più dispositivi e, se serve, riduci le proprietà animate.
L’header copre gli elementi selezionati con la tastiera. Chi naviga con il tasto Tab deve sempre vedere l’elemento attivo. Le linee guida di accessibilità WCAG 2.2 dedicano un criterio proprio a questo caso, il 2.4.11 Focus Not Obscured: anche qui scroll-margin-top e un header compatto sono la soluzione più semplice. Per un quadro più ampio leggi il nostro articolo sull’accessibilità.
Domande frequenti su Elementor Sticky Header
Si può fare uno sticky header con Elementor gratuito?
Non con le opzioni visuali, che sono incluse in Elementor Pro. Con la versione gratuita puoi usare il CSS position: sticky aggiunto dal personalizzatore di WordPress, ma senza la classe elementor-sticky--effects per le animazioni allo scroll.
Qual è il valore giusto per l’Offset effetti?
Non esiste un valore unico, ma partire dall’altezza dell’header (per esempio 90 o 100 pixel) funziona quasi sempre: l’animazione parte appena l’intestazione ha finito di “uscire” dalla sua posizione iniziale.
Lo sticky header rallenta il sito?
L’effetto nativo di Elementor è leggero. Il rischio nasce da animazioni complesse, immagini pesanti nell’header o script aggiuntivi: tienili al minimo e verifica sempre la velocità dopo le modifiche.
Posso avere lo sticky solo su alcune pagine?
Sì. Puoi creare più modelli di header nel Theme Builder e assegnarli a pagine diverse tramite le condizioni di visualizzazione, oppure usare le regole di visualizzazione condizionale per i singoli elementi.
In sintesi
Creare un Elementor sticky header richiede tre passaggi: costruire l’header in un unico contenitore con il Theme Builder, attivare lo Sticky “In alto” negli Effetti di movimento e impostare un Offset effetti adeguato. Da lì, la classe elementor-sticky--effects ti permette di animare l’intestazione con poche righe di CSS: riduzione dell’altezza, cambio di sfondo, logo più piccolo.
Le varianti trasparente e a scomparsa aggiungono personalità, ma la regola resta la stessa: l’header deve aiutare la navigazione, non rubare spazio ai contenuti. Prova sempre il risultato su smartphone, con la tastiera e con i link interni prima di pubblicare.
Se vuoi un header su misura per il tuo sito, o hai un progetto Elementor che non si comporta come dovrebbe, scopri il nostro servizio di assistenza Elementor oppure contattaci per parlarne insieme.
