Guida Definitiva agli Sticky Header di Elementor

Che siate aspiranti sviluppatrici o sviluppatori web o stiate avviando un ecommerce, i vostri siti web probabilmente condividono alcuni elementi essenziali. Per esempio, ogni sito ha bisogno di un header chiaro per aiutare le persone a navigare tra le diverse pagine. Tuttavia, se usate un page builder come Elementor per accorciare il lavoro di codifica, vi starete chiedendo se è ancora possibile creare uno sticky header di Elementor sofisticato ma facile da usare.

Per fortuna, usare un header Elementor può fornire ai vostri utenti un modo semplificato per esplorare il vostro sito web. Con questo popolare page builder potete costruire un’ampia varietà di header che non scompaiono quando gli utenti scorrono il sito. Questa caratteristica è ciò che li rende sticky, che significa ‘appiccicosi’.

In questo articolo, parleremo di come funziona uno sticky header e dei suoi vantaggi. Poi vi mostreremo come creare uno sticky header di Elementor sia con la versione gratuita che con quella a pagamento. Infine, vi forniremo ulteriori opzioni di personalizzazione per i vostri sticky header usando i CSS. Iniziamo!

Un’Introduzione agli Sticky Header di Elementor

Non esistono due siti web uguali. Tuttavia, ci sono alcune caratteristiche che accomunano i siti di qualità.

Se state gestendo un sito a più pagine, uno di questi elementi è un header. Con questo termine intendiamo la barra orizzontale con informazioni utili che si trova in cima a qualsiasi pagina web.

Di solito un header include il vostro menu di navigazione e pagine come Chi Siamo o Contatti:

Quando le persone esplorano la vostra pagina, probabilmente si aspettano un header organizzato che le guidi nella navigazione del vostro sito. Dato che la User Experience (UX) è la chiave per il successo di un sito web, fareste bene a creare un header intuitivo e diretto. È qui che uno sticky header progettato con Elementor può fare una grande differenza.

Come Funziona uno Sticky Header

Prima di imparare come funziona uno Sticky Header di Elementor, diamo un’occhiata a come si comporta un header standard quando si scorre una pagina:

Come potete vedere nell’esempio qui sopra, questo header contiene una complessa barra di navigazione con categorie come Vendite, Abbigliamento, Scarpe e altro. Queste schede aiutano senza dubbio le persone a trovare quello che stanno cercando. Tuttavia, quando si scorre la pagina verso il basso, l’header scompare.

Gli utenti possono trovare questo comportamento frustrante, perché richiede loro di scorrere indietro fino alla parte superiore della pagina per accedere al menu di navigazione. Per fortuna, uno sticky header offre una soluzione semplice.

Rimanendo sempre in posizione all’inizio della pagina (come se vi fosse appiccicato sopra con l’adesivo) uno sticky header può migliorare in modo netto l’esperienza utente del vostro sito web:

Quando il design del vostro sito include uno sticky header, i vostri utenti possono saltare rapidamente a nuove pagine senza perdere tempo a scorrere.

Inoltre, con questo elemento fisso, potete tenere il vostro logo davanti e al centro in ogni momento. Questa caratteristica può aiutare gli utenti a ricordare il vostro brand più facilmente e incoraggiarli a rimanere sul vostro sito più a lungo.

Quando Dovreste Considerare l’Uso di uno Sticky Header

Le persone avranno meno probabilità di perdersi quando esplorano siti più grandi con uno sticky header. Per questo potreste voler approfittare di questa caratteristica se il vostro sito ha molte pagine. Ecco perché vedrete spesso sticky header sui siti di ecommerce.

Uno sticky header può essere particolarmente utile se volete includere una funzione di ricerca nel vostro header. In questo modo, quando gli utenti stanno scorrendo la pagine e si rendono conto che non riescono a trovare quello che stanno cercando, possono inserire rapidamente una query nella barra di ricerca.

Inoltre, uno sticky header può essere un elemento rivoluzionario se gestite un blog monetizzato che mostra tutti i vostri articoli nella homepage. In generale, questo header può assicurare che il vostro sito web sia mantenibile e scalabile.

Tuttavia, se il vostro sito ha una sola pagina, non ha molto senso trasformare il vostro header in questo modo. Inoltre, se avete una buona quantità di pagine sul vostro sito, ma ognuna di esse è relativamente breve, probabilmente non avete nemmeno bisogno di uno sticky header.

Nel complesso, uno sticky header riduce il tempo di scorrimento e aumenta l’usabilità del sito e la navigazione. Se non avete la sicurezza che questa caratteristica gioverebbe al vostro sito web, potreste voler fare un rapido controllo della lunghezza delle vostre pagine e poi decidere.

Come Creare uno Sticky Header di Elementor

Per questo tutorial, vi guideremo attraverso i passaggi per creare uno sticky header di Elementor. Assumiamo che abbiate già installato e attivato il plugin Elementor sul vostro sito.

Parleremo di come potete creare questo header sia con la versione gratuita che con Elementor Pro. Sarete probabilmente felici di sapere che non avrete bisogno di imparare l’HTML o di modificare significativamente il codice per fare tutto questo!

Come Creare uno Sticky Header con Elementor (Gratuito)

La versione gratuita di Elementor offre alcune potenti funzioni per la costruzione di pagine. Tuttavia, se volete apportare modifiche ai vostri header e footer, avrete bisogno di alcuni strumenti aggiuntivi (anch’essi gratuiti).

Detto questo, vediamo come potete creare uno sticky header con Elementor!

Passo 1: Installare e Attivare i Vostri Plugin Essenziali

Per fortuna alcuni affidabili strumenti possono facilmente espandere la funzionalità della versione gratuita di Elementor.

Navigate nella vostra bacheca di WordPress per trovare il vostro primo strumento. Andate su Plugins > Aggiungi nuovo e cercate ElementsKit Elementor addons tramite la funzione di ricerca:

Installate e attivate questo plugin come fareste normalmente. Quando finite questo procedimento, verrete reindirizzati alla pagina principale dei plugin:

Ora fate nuovamente clic su Aggiungi nuovo per individuare il plugin Sticky Header Effects for Elementor dalla barra di ricerca:

Ripetete il procedimento di installazione e attivazione di questo strumento e tutto sarà pronto per il prossimo passo!

Passo 2: Creare il Vostro Menu

Prima di poter creare qualsiasi tipo di header, avrete bisogno di un menu di navigazione. Faremo un semplice menu con gli elementi più comuni: includeremo un logo, delle pagine e una call to action (CTA).

Per creare il vostro menu nella bacheca di WordPress, andate su Aspetto > Menu. Accanto al campo Nome del menu, date al vostro menu un nome descrittivo. Noi lo chiameremo “Sticky Header Menu”:

Assicuratevi di scegliere Header come opzione in Gestione posizioni. Potreste anche voler selezionare la casella per aggiungere automaticamente nuove pagine al vostro menu.

Avrete poi bisogno di aggiungere alcune pagine al vostro menu. Nella sezione Pagine sulla sinistra, spuntate le caselle di tutte le pagine che vorreste includere, poi fate clic su Aggiungi al menu:

Poi vedrete le vostre pagine trasferite al menu sulla destra. Andate avanti e fate clic su Salva menu in basso a destra dello schermo:

Come potete vedere, abbiamo aggiunto alcune pagine di base, tra cui Contact Us, About, e Sample page. Potreste voler riordinare le vostre pagine in modo che la sequenza risulti intuitiva per i visitatori.

Passo 3: Creare l’Header

Ora il vostro menu di navigazione esiste, ma non potete accedervi da nessuna parte. Questo perché dovete creare un header apposito.

Per farlo, andate alla scheda ElementsKit nel vostro menu di sinistra. Se non l’avete già fatto, a questo punto dovete cliccare su alcune pagine “per iniziare”.

Ogni persona avrà preferenze diverse, quindi prendetevi tutto il tempo per selezionare le caratteristiche che volete attivare. Comunque, assicuratevi che il modulo Header Footer sia impostato su ON:

Ora andate su ElementsKit > Header Footer:

Questa pagina sarà vuota perché non avete ancora nessun template di header o footer. Fate clic su Add new nella parte superiore dello schermo per creare il vostro primo template di header:

Nella schermata precedente, inserite un nome descrittivo e assicuratevi che Header sia selezionato nel campo Type. Dato che state usando la versione gratuita, questo header apparirà su tutto il sito.

Attivate/disattivate l’interruttore su ON e fare clic su SAVE CHANGES. Ora verrete reindirizzati alla pagina con la lista dei vostri template, dove potrete vedere il vostro nuovo template per l’header:

Potreste anche notare un’icona verde attiva accanto a questo header. Tuttavia, non è ancora attivo.

Per completare l’header, passate sopra l’elenco dei template e fate clic su Edit in Elementor, proprio sotto il suo nome. Questo vi porterà alla schermata di Elementor Builder.

Qui fate clic sull’icona ElementsKit:

Nella schermata seguente, selezionate la scheda Sections:

Scorrete un po’ in basso per trovare una sezione header che vi piace, poi fate clic su Insert. Noi abbiamo scelto Header – Section 5:

Come probabilmente potete vedere, il nostro menu di navigazione non è visibile. Quindi andiamo avanti e aggiungiamolo al nostro template di header. Per farlo, passate il mouse sulla sezione del menu di navigazione del vostro header. In questo caso è proprio al centro:

Fate clic su quest’area e nel pannello di sinistra dovrebbero apparire le impostazioni del menu. Ora, individuate il campo Select menu. Nel menu a tendina, scegliete il menu che avete creato in precedenza:

A questo punto, dovreste vedere il menu popolarsi nel vostro template di header. Fate clic su UPDATE nell’angolo in basso a sinistra dello schermo e il vostro header standard è terminato.

Vediamo come funziona in azione:

Come potete vedere, il nostro header è bellissimo. Tuttavia, scompare quando scorriamo verso il basso. Vediamo come possiamo renderlo “sticky”.

Passo 4: Rendere l’Header “Sticky”

Per il nostro passo finale, andate su ElementsKit > Header Footer > Edit with Elementor. Poi selezionate il vostro header e fate clic sull’icona centrale tratteggiata con sei punti:

Quando ci passate sopra, vedrete che questo vi permette di modificare la sezione. Una volta che ci fate clic sopra, le vostre opzioni di modifica appariranno nel pannello di sinistra.

Fate clic sulla scheda Advanced e scorrete verso il basso fino a Sticky Header Effects. Ci sarà un messaggio di avvertimento che dice che il plugin non controlla lo sticky header, ma potete ignorarlo. Dato che abbiamo aggiunto anche il plugin Sticky Header Effects for Elementor, funzionerà benissimo.

Ora abilitate lo sticky header di Elementor spostando l’interruttore su ON:

A seconda del vostro tema, il vostro sticky header potrebbe apparire trasparente. Se questo è il caso, potreste voler fare un cambiamento stilistico.

Nel vostro pannello Edit section, sotto Style, andate su Background > Color e assicuratevi di aver selezionato una tonalità che risalti sullo sfondo normale:

Poi fate clic su UPDATE. Ora potete vedere l’anteprima del vostro sito per dare un’occhiata al risultato finale:

Questo è tutto! Abbiamo creato un semplice sticky header di Elementor, ma anche solo questo può dare un nuovo aspetto al vostro sito.

Come Creare uno Sticky Header con Elementor Pro

Quando usate Elementor Pro, creare uno sticky header è un po’ più semplice. Potete aggiungere questa caratteristica al vostro sito in soli tre semplici passi.

Passo 1: Creare il Vostro Menu

Per creare il vostro menu, andate su Appearance > Menu nella vostra bacheca di WordPress:

Date al vostro menu un nome descrittivo, selezionate Menu primario accanto alla posizione di visualizzazione e poi fate clic su Crea menu:

A questo punto, dovreste avere alcune pagine esistenti sul vostro sito web. Selezionate le pagine che vorreste includere nel vostro menu dal pannello di sinistra.

Poi fate clic su Aggiungi al menu, seguito da Salva menu:

Ora le vostre pagine dovrebbero essere popolate sul lato destro sotto Struttura del menu.

Passo 2: Creare il Vostro Header

Successivamente, avremo bisogno di creare la nostra base. Creiamo un classico header.

Per iniziare, individuate la scheda Elementor nella vostra barra laterale sinistra. Appena sotto, andate su Templates > Theme builder. La pagina seguente sarà simile a questa:

Come potete vedere, con Elementor Pro, potete facilmente iniziare a progettare ogni elemento del vostro sito.

Fate clic sull’icona più (+) sull’elemento Header. Ora dovreste vedere un pop-up che mostra più blocchi di header tra cui potete scegliere:

Se avete già salvato un template di header, potete selezionarlo nella scheda My Templates. Altrimenti, potreste voler utilizzare uno dei blocchi di sezione inclusi in Elementor Pro.

Quando avete fatto la vostra selezione, passate il mouse sul blocco desiderato e fate clic su Insert:

Qui vedrete che questo blocco è dotato di un proprio logo, ma il nostro menu di navigazione si è popolato automaticamente. Ora fate clic su PUBLISH:

La seguente schermata vi chiederà di definire le vostre impostazioni di pubblicazione. Qui, selezionate ADD CONDITION per decidere dove volete visualizzare il vostro header:

Probabilmente vorrete selezionare Entire site accanto a INCLUDE. Potete anche escludere alcune aree del sito facendo clic sulla freccia accanto a INCLUDE e passando all’alternativa. Quando le vostre selezioni vi soddisfano, fate clic su SAVE & CLOSE.

A questo punto, un messaggio pop-up apparirà nell’angolo in basso a destra del vostro schermo. Se non scompare prima che possiate farci clic sopra, selezionate l’opzione per visualizzare il vostro sito live.

In alternativa, tornate alla vostra bacheca di WordPress e visualizzate l’anteprima del sito facendo clic sull’icona della casa nell’angolo in alto a sinistra e poi selezionando Visit site:

Come potete vedere, il nostro header è ora funzionante, ma quando scorriamo la pagina verso il basso, scompare. Vediamo cosa possiamo fare per cambiare questo comportamento!

Passo 3: Rendere l’Header Sticky

Ora vediamo come creare uno sticky header di Elementor con lo strumento pro!

Andate su Template > Theme Builder e selezionate l’header che avete appena creato. Poi fate clic su Edit accanto all’icona della matita nella schermata seguente. Questo vi riporterà all’editor di Elementor.

Passate sopra il vostro modello di header, poi fate clic sull’icona tratteggiata con sei puntini al centro. Questo aprirà il vostro pannello Edit section sulla sinistra:

Ora, passate alla scheda Advanced e individuate la sezione Motion Effects. Qui, abilitate l’opzione Scrolling Effects spostando l’interruttore su ON:

Poi, scorrete la sezione Motion Effects per trovare il campo Sticky. Nel menu a tendina, selezionate Top:

Ora fate clic su UPDATE. Tenete presente che a seconda della combinazione di colori del vostro tema, lo sticky header di Elementor potrebbe sembrare trasparente:

Se questo è il caso e non vi piace come appare, potete sempre cambiare il colore di sfondo. Nel vostro pannello Edit section, andate su Style > Background e selezionate Classic come tipo di sfondo.

Ora, selezionate un nuovo colore di sfondo per il vostro template di header. Potete scegliere una tonalità che sia complementare al resto della pagina ma che crei anche un bel contrasto:

Questo è solo un esempio: stiamo solo scegliendo un colore grigio per rendere il nostro header meno trasparente.

Ora fate clic su UPDATE per salvare le modifiche. Andate avanti e visualizzate l’anteprima con il risultato finale:

Questo è tutto! Probabilmente vorrete modificare lo stile e i colori in base al vostro brand. Assicuratevi solo di salvare sempre le vostre modifiche quando avete finito.

Come Usare i CSS per Migliorare il Vostro Sticky Header di Elementor

Quando aggiungete uno sticky header Elementor sul vostro sito web, il design del vostro sito può apparire rigenerato. Tuttavia, potrebbero interessarvi ulteriori personalizzazioni o caratteristiche più dinamiche.

Ora che sapete come creare uno sticky header di base, vediamo come far evolvere ancora di più il vostro design. Potete farlo usando il codice CSS (Cascading Style Sheets) in WordPress.

Se siete principianti o non avete esperienza di programmazione, non preoccupatevi. Migliorare il design è un gioco da ragazzi con Elementor.

Per farlo, andate su Templates > Theme Builder > Header:

Sotto Edit section > Advanced > Custom CSS, potete aggiungere un piccolo snippet CSS per apportare modifiche stilistiche.

Tipi di Sticky Header di Elementor

Ecco alcuni popolari miglioramenti che potreste voler considerare per il vostro sticky header di Elementor!

Sticky Header Trasparente

Alcuni temi possono impostare automaticamente gli sticky header come trasparenti. Tuttavia, se volete farlo con i CSS, potete usare uno snippet di codice come questo:

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Copiate e incollate questo codice nel campo CSS personalizzato e regolate i campi secondo le vostre preferenze. Questo snippet modifica il colore di sfondo, la trasparenza e l’altezza del vostro header, con un effetto di animazione:

Le possibilità per questo tipo sono infinite.

Sticky Header Che Si Restringe

Un’altra scelta popolare è un header che si ingrandisce o si restringe mentre le persone scorrono la pagina. Ecco il codice di cui avrete bisogno per questo tipo di sticky header di Elementor:

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

Se non vi sentite a vostro agio con un codice così esteso, potete consultare la guida di Elementor per creare uno sticky header che si restringe.

Con questo design, otterrete questo effetto:

Anche se l’effetto di questo header è delicato, la sua raffinatezza può dare al vostro design un tocco più professionale.

Fade-In / Fade-Out (Dissolvenza)

Oltre a queste opzioni alla moda, c’è anche la funzione fade-in / fade-out (chiamata anche ‘reveal’), che prevede cioè la dissolvenza dell’header durante lo scorrimento. Ha un aspetto simile a questo:

Per questo effetto, non avrete bisogno di toccare il codice. Navigate fino al vostro header nel costruttore di temi. Poi andate su Edit section > Advanced > Motion Effects > Scrolling Effects:

Qui fate clic sull’icona della matita accanto al campo Transparency e cambiate la direzione in Fade In o Fade Out. Poi, regolate il design secondo le vostre preferenze.

Ci sono molte opzioni per questi effetti di trasparenza, quindi vi consigliamo di leggere la documentazione di Elementor. In questo modo sarete in grado di ottenere l’esatto aspetto che desiderate.

Riepilogo

Lavorare con un costruttore di siti web è un’ottima alternativa al pagare professionisti veterani dello sviluppo web per creare il vostro sito. Con alcuni dei migliori software di progettazione di siti web, potete facilmente gettare le basi per costruire qualsiasi sito web. Questi includono sticky header pratici ma belli.

Uno sticky header può creare un’esperienza più piacevole per i vostri utenti. Potete scegliere tra vari stili dinamici di header, tra cui quello che diventa trasparente o si restringe. Ancora meglio, potete creare questi splendidi header sia con Elementor Pro che con la sua versione gratuita.

Progettare il vostro sito web è uno dei primi passi per lanciarlo. Tuttavia, avrete prima bisogno di un hosting affidabile. Date un’occhiata ai piani di hosting gestito di Kinsta per vedere come possiamo ottimizzare le prestazioni del vostro sito!