La navigazione è un aspetto essenziale di un buon sito WordPress con un ottimo design. Per questo motivo, vale la pena di pensare a come le persone che navigano il vostro sito interagiscono con le pagine attraverso la navigazione. Un modo per farlo è con uno sticky header.
Lo sticky header (“intestazione fissa”) è la sezione dell’header del sito che rimane ferma in cima allo schermo quando l’utente scorre la pagina. Un’intestazione fissa offre una miriade di vantaggi, ma uno dei principali è che gli elementi di navigazione rimangono sotto gli occhi dell’utente, indipendentemente dalla sua posizione nella pagina. Anche solo per questo motivo, uno sticky header è un elemento dell’interfaccia utente (UI) molto apprezzato.
In questo tutorial vi mostreremo come creare uno sticky header su WordPress. Tratteremo molti aspetti, come esempi sul web, plugin WordPress che possono aiutarvi e una guida su come sviluppare il vostro sticky header. Prima, però, parliamo in modo più dettagliato di cos’è uno sticky header.
Cos’È uno Sticky Header
L’header del vostro sito è un po’ come un banco informazioni. È l’elemento che la maggior parte degli utenti noterà per primo e sarà sempre un punto di riferimento da controllare per scoprire alcune informazioni chiave ed eseguire determinate azioni:
- Per esempio, il vostro logo o il nome del sito si trovano lì, e serviranno come punto di riferimento per i vostri utenti. Nella maggior parte dei casi potranno tornare alla homepage facendo clic sul logo.
- Se sul vostro sito sono presenti degli account utente, l’header di solito offre un link per accedere alle pagine degli account e dei profili.
- Potrebbe essere presente una funzionalità di ricerca, soprattutto se avete un sito di grandi dimensioni con molti contenuti in diverse aree.
- Naturalmente, anche la navigazione del sito è parte integrante dell’header.
In generale, il vostro header è un punto di riferimento per gli utenti. Spesso è la “barra” dei modelli di lettura a forma di F, quindi attira l’attenzione delle persone in modo istintivo.
Forse saprete già cos’è uno sticky header, o magari riuscite a immaginarlo. È il caso in cui la sezione dell’header del vostro sito si “attacca” alla parte superiore dello schermo durante lo scorrimento. A differenza dell’header statico, che rimane al suo posto e scompare durante lo scorrimento, lo sticky header è un elemento sempre visibile.
Sebbene l’approccio tipico per uno sticky header sia quello di applicare una versione statica nella parte superiore dello schermo, ci sono diversi modi per renderlo più usabile, efficiente per lo schermo e dinamico. A seguire, vedremo alcuni esempi reali.
Esempi di Sticky Header sul Web
Gli Sticky Header sono presenti in tutto il web ed è una buona idea fare un po’ di giri sui siti capire qual è il risultato finale. Uno degli esempi più semplici è quello di Hammerhead. Questo sito usa un “menu a scomparsa” e uno sticky header ed è molto semplice. Rimane nella parte superiore della pagina nel suo layout statico:
Un’altra semplice implementazione è quella di Kin. Questa usa un tipico sticky header, ma questa volta con alcuni elementi di design interessanti.
Noterete che il contrasto cambia in base alla parte del sito che scorrete e ci sono anche dei simpatici effetti di transizione:
Non possiamo concludere questa sezione senza menzionare lo sticky header di Kinsta. Anche in questo caso l’header è semplice, ma con un tocco di usabilità che offre un valore aggiunto al visitatore:
Questa volta, vedrete l’header scomparire quando scorrete la pagina verso il basso. Tuttavia, riapparirà quando scorrete nuovamente verso l’alto: si può parlare di “header parzialmente persistente”.
La premessa è che lo scorrimento verso il basso significa che state investendo il vostro tempo nella pagina stessa, quindi probabilmente non avrete bisogno della navigazione, delle pagine di login o di andare altrove. Tuttavia, nel momento in cui scorrete verso l’alto, è più probabile che voglite andare verso un’altra pagina del sito. In questo caso, lo sticky header vi salverà la giornata.
Sono questi piccoli accorgimenti per l’esperienza utente (UX) che fanno sì che le persone vogliano tornare sul vostro sito. Per i vostri progetti di sticky header, dovete considerare cosa potete fare per creare una UX e una UI che si concentri sulle esigenze delle persone.
Perché Dovreste Usare uno Sticky Header per il Vostro Sito
Molti siti usano gli sticky header e ci sono molte buone ragioni per farlo. Possono essere parti cruciali dell’esperienza complessiva del sito e hanno un’influenza notevole su UX e UI.
Dato che gli elementi che includete in un header sono quelli a cui l’utente vorrà sempre accedere, ha senso averli sempre in evidenza. Questo vale soprattutto per i dispositivi e i formati a schermo ridotto.
Sebbene possa sembrare controintuitivo avere un header “sempre attivo” quando lo spazio della finestra è limitato, si tratta solo di un piccolo sacrificio. Il vero vantaggio è che l’utente mobile ha meno motivi per scorrere, il che è fondamentale sui dispositivi più piccoli. Se riuscite a fornire una navigazione del vostro sito senza necessità di scorrere, l’utente potrà muoversi nel contenuto con maggiore facilità.
I Pro e i Contro degli Sticky Header
Abbiamo illustrato alcuni dei vantaggi degli sticky header, quindi riassumiamoli rapidamente:
- Potete offrire una navigazione a cui l’utente può sempre accedere, il che aiuta a preservare il modello di lettura naturale del vostro sito.
- Potete adattare l’header a diverse esigenze, come per esempio contrasti, schemi di colori o persino l’intento dell’utente.
- Avete la possibilità di offrire un valore aggiunto all’utente, sia per i desktop che per gli schermi più piccoli.
Tuttavia, uno sticky header non è una panacea per migliorare la UX e ci sono alcuni aspetti negativi nel suo utilizzo:
- Ne parliamo brevemente, ma questo vale per gli schermi di tutte le dimensioni: dovete destinare dello spazio al vostro header.
- Uno sticky header cattura naturalmente l’attenzione togliendola al vostro contenuto perché i suoi elementi attirano l’attenzione.
- Il lavoro di sviluppo di un buon sticky header è maggiore perché dovete implementarlo, assicurarvi che funzioni con i diversi browser e verificare che non ci siano bug sugli schermi più piccoli.
Tuttavia, se riflettete sulle vostre scelte di design, sulle esigenze degli utenti e sugli obiettivi del sito, potete mitigare o eliminare tutti questi svantaggi, mantenendo i punti positivi. Un modo per farlo è quello di usare i plugin di WordPress.
3 Plugin Che Vi Aiutano a Creare Sticky Header
Nelle prossime sezioni vi mostreremo alcuni dei principali plugin per sticky header per WordPress. In seguito, parleremo della possibilità che questo tipo di soluzione sia adatta a voi. In ogni caso, un plugin può aiutarvi a implementare la funzionalità senza bisogno di codice, il che è prezioso se il vostro tema non lo prevede.
Inoltre, grazie al plugin potete sfruttare l’esperienza di progettazione e sviluppo di una persona esperta. Chi si occupa di sviluppo farà alcune delle scelte tecniche più importanti per voi e le inserirà in un’interfaccia intuitiva e facile da usare.
1. Sticky Menu e Sticky Header
Il plugin Sticky Menu & Sticky Header di Webfactory è una buona prima scelta, grazie alla sua ricchezza di funzioni, all’utile flessibilità e al prezzo conveniente.
Il vantaggio è che potete “attaccare” allo schermo qualsiasi elemento del vostro sito. Questo può essere utile in molti modi, ma significa che implementare uno sticky header è molto semplice.
Il plugin è inoltre dotato di una serie di potenti opzioni che vi aiutano a implementare uno sticky header:
- Potete impostare il livello desiderato di posizionamento “in alto”. Ciò significa che potete aggiungere spazio all’area sopra l’header per adattarla ai vostri obiettivi di design.
- Ci sono anche altre opzioni di posizionamento, come per esempio l’uso della proprietà CSS z-index per progettare il sito “front-to-back”
- Potete attivare lo sticky header solo sulle pagine che selezionate, il che potrebbe essere utile se avete delle landing page o altri contenuti non adatti.
Sticky Menu & Sticky Header include anche una modalità di debug, per aiutarvi a correggere eventuali elementi non adesivi. La modalità dinamica vi aiuterà anche a risolvere i problemi legati ai design responsive.
La notizia migliore è che Sticky Menu & Sticky Header può essere scaricato e usato gratuitamente. Inoltre, c’è una versione premium che non richiede conoscenze tecniche.
Con la versione gratuita del plugin, dovrete conoscere il selettore dell’elemento per poterlo specificare nelle opzioni. Tuttavia, la versione premium (49-199 dollari all’anno) offre un selettore di elementi visivo per evitare questo problema.
2. Options for Twenty Twenty-One
Anche se non ne raccomanderemmo uno per la maggior parte dei siti incentrati sui clienti, i temi predefiniti di WordPress includono abbastanza opzioni per i blog e per altri tipi di siti simili.
Twenty Twenty-One è uno dei temi predefiniti più interessanti, ma non dispone della funzionalità di sticky header. Se volete aggiungere questa funzione, il plugin Options for Twenty Twenty-One può fare al caso vostro.
Questa edizione del plugin è una delle tante. Ogni tema predefinito recente ne ha una versione, ma non ne esiste ancora una per Twenty Twenty-Two. In ogni caso, la funzionalità di base del plugin offre molti extra:
- C’è uno strumento di Full Site Editing (FSE), pronto per il lancio completo.
- Potrete modificare la dimensione dei caratteri del corpo, rimuovere le sottolineature dei link ipertestuali e altre semplici personalizzazioni.
- Potete lavorare con le larghezze massime dei contenitori e degli elementi, senza dover ricorrere al codice.
Ci sono molte altre opzioni per la navigazione, i contenuti, il footer e l’header. Per quest’ultima, potete nasconderla alla vista, renderla a tutta larghezza, aggiungere un’immagine e un colore di sfondo e tante altre modifiche.
Mentre il plugin principale è gratuito, per accedere alle opzioni dello sticky header è necessario un aggiornamento premium (25-50 dollari). Questo vi permette di regolare le impostazioni degli header sia per i dispositivi mobili che per quelli desktop dal Personalizza di WordPress:
Dato il nome, non dovete aspettarvi che questo plugin funzioni con un tema diverso da Twenty Twenty-One (o qualsiasi altro tema scegliate). Tuttavia, se usate questo tema predefinito e non volete toccare il codice, sarà l’ideale per aiutarvi ad aggiungere uno sticky header al vostro sito.
3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu
Ecco un plugin che mette le carte in tavola. Il plugin myStickymenu di Premio offre quasi tutto ciò che vorreste includere nel vostro sticky header e contiene molte unzionalità.
Ha un numero sorprendente di recensioni positive sulla Directory dei plugin WordPress: 799 recensioni a cinque stelle per una media di 4,9. Questo è dovuto in parte alle numerose funzioni che mette a disposizione:
- Offre flessibilità. Per esempio, potete creare una barra di benvenuto, uno sticky menu e un header.
- Il plugin si adatta alla reattività del vostro sito. Ciò significa che non dovrete implementare ulteriori funzionalità mettendo mano al codice.
- Infatti, per usare al meglio il plugin non è necessario che voi conosciate il codice.
- Il plugin myStickymenu è compatibile con molti dei principali plugin per la creazione di pagine, come Elementor, Beaver Builder, il Block Editor nativo, Divi Builder e molti altri.
Avete anche una serie di opzioni di personalizzazione per far funzionare il vostro sticky header come desiderate. Per esempio, potete scegliere di creare un header parzialmente persistente, modificare aspetti semplici come i colori dello sfondo, le scelte tipografiche e molto altro ancora.
Inoltre, grazie ai diversi modi in cui potete presentare il vostro sticky header (come le opzioni del menu e della barra di benvenuto), potete scegliere come e dove visualizzarlo sul vostro sito.
Anche se la versione gratuita di myStickymenu potrebbe essere sufficiente per le vostre esigenze, esiste anche una versione premium (25-99 dollari all’anno) che offre più modi per disattivare lo sticky header in base a condizioni specifiche, timer per il conto alla rovescia, la possibilità di aggiungere più barre di benvenuto e altre opzioni di personalizzazione.
Come Creare un Sticky Header in WordPress
Nel resto di questo tutorial vi mostreremo come creare uno sticky header in WordPress. Ci sono un paio di approcci che potete adottare e li affronteremo entrambi. Tuttavia, il nostro primo passo vi aiuterà a prendere una decisione.
Da lì, lavorerete al vostro sticky header usando il metodo che preferite e poi applicherete alcuni dei nostri consigli per rendere il vostro header più efficiente e utilizzabile in futuro.
1. Decidete Come Creare il Vostro Sticky Header
Uno dei motivi per cui WordPress è così flessibile per tutti i tipi di utenti è il suo ecosistema di plugin e l’estensibilità open-source. Per questo motivo, potete scegliere una soluzione standard o crearne una personalizzata.
Il vostro primo compito è quello di decidere se volete usare un plugin o scavare nel codice per implementare il vostro sticky header. Vediamo le due soluzioni:
- Plugin. Questo è un metodo approvato da WordPress, soprattutto se non avete le conoscenze tecniche necessarie. Offre flessibilità, ma siete in balia di ciò che la sviluppatrice o lo sviluppatore ritiene importante e della sua capacità di programmazione.
- Codifica. Se avete una visione chiara in mente, potreste voler codificare uno sticky header per il vostro sito. Ovviamente dovrete avere le competenze tecniche necessarie per realizzarlo (soprattutto i CSS), ma i risultati saranno esattamente quelli che desiderate. Tuttavia, dovrete occuparvi di una maggiore manutenzione e il suo successo dipenderà dalle vostre capacità di codifica.
Diremmo che per la maggior parte degli utenti di WordPress, un plugin è la soluzione ideale per creare uno sticky header. Si adatta bene alla piattaforma ed è più facile da risolvere in caso di problemi. Tuttavia, nei prossimi passi tratteremo una soluzione di codifica oltre all’opzione del plugin.
2. Scegliete Se Modificare il Vostro Tema Attuale o Sceglierne Uno Dedicato
Il prossimo aspetto che dovrete considerare è se modificare il vostro tema attuale o sceglierne uno che abbia già la funzionalità di sticky header tra le sue caratteristiche. Questo aspetto è importante se il vostro tema non ha la funzionalità per gestire uno sticky header.
Molti temi e plugin di page builder includono un’opzione per lo sticky header, per via dei vantaggi e per offrire flessibilità al design. Alcuni dei temi e dei plugin più grandi e generici offrono questa funzionalità come standard, come Elementor, Astra, Divi, Avada e molti altri.
Per prendere questa decisione, dovrete considerare alcuni aspetti del vostro tema e del vostro sito attuale:
- Il vostro sito ha già l’aspetto che desiderate o ha bisogno di una rinfrescata?
- Il tema attuale è facile da personalizzare? La documentazione di sviluppo dovrebbe indicarvelo.
- Volete un’implementazione complessa dello sticky header o una più semplice?
In base alle risposte che darete a questo punto, sceglierete l’uno o l’altro. Se avete bisogno di un nuovo tema, potete scegliere quello che offre l’implementazione dello sticky header. Tuttavia, se volete rimanere con il vostro tema attuale e questo non ha ancora la funzionalità di sticky header, dovrete rimboccarvi le maniche e seguire uno dei seguenti passi.
2a. Usare un Plugin con un Tema Specifico
Se non avete esperienza di sviluppo, vi consigliamo di scegliere un plugin per aggiungere la funzionalità di sticky header al vostro sito. Ci sono troppe variabili da considerare, costruire e mantenere. Al contrario, un plugin ha già una base di codice che tiene conto di questi elementi, quindi offre un’opzione quasi ideale per la maggior parte delle circostanze.
Per questa parte del tutorial useremo il plugin myStickymenu, in quanto offre un set di funzionalità completo e ricco per la maggior parte dei casi di utilizzo. Tuttavia, l’utilizzo generale sarà lo stesso per la maggior parte dei plugin che userete.
Una volta installato e attivato il plugin, dovrete andare nelle opzioni del tema. Per alcuni plugin, questo si trova nel Personalizza di WordPress; per altri, in un pannello di amministrazione dedicato. In questo caso, userete un pannello di amministrazione personalizzato all’indirizzo myStickymenu > Dashboard di WordPress:
Tuttavia, la schermata predefinita mostra le impostazioni della barra di benvenuto, che per questo tutorial non vogliamo. Per questo motivo, fate clic sul pulsante per disattivare la barra e passate alla schermata delle impostazioni dello sticky header:
Anche se ci sono molte opzioni, vi serve solo il pannello della Sticky Class. Una volta attivato lo sticky header, inserite il tag HTML relativo all’header nel campo corrispondente al menu a tendina Other Class or ID:
Una volta salvate le modifiche, queste verranno applicate al vostro sito. Da qui, potete esaminare alcune funzionalità di stile. Per esempio, potete impostare un effetto di transizione a dissolvenza o a scorrimento, impostare lo z-index, lavorare con le opacità, i colori e i tempi di transizione, oltre a una serie di altre opzioni.
2b. Scrivere il Codice per Creare il Vostro Sticky Header
È quasi superfluo dire che questa sezione è dedicata a chi ha esperienza di sviluppo. Vedrete più avanti che il codice in sé è così semplice che è difficile da credere. Tuttavia, dato il lavoro aggiuntivo, la manutenzione e la cura generale per creare uno sticky header personalizzato, dovrete attingere anche ad altri aspetti della vostra esperienza.
Tuttavia, prima di iniziare, avrete bisogno di quanto segue:
- Un editor di codice decente, anche se in questo caso (e a seconda dell’implementazione) potreste usare l’editor di testo predefinito del sistema operativo (OS).
- Dovrete avere accesso ai file del vostro sito, di cui dovrete fare un backup e poi scaricarli in un ambiente di sviluppo WordPress locale.
È bene ribadire che non dovete lavorare sui file del vostro sito live. Lavorate invece in un ambiente di staging o in una configurazione locale e caricate i file sul vostro server live dopo averli testati.
Inoltre, dovrete usare un tema figlio, poiché state apportando modifiche personalizzate al vostro tema principale. Questo vi aiuta a organizzare il codice e ad assicurarvi che le modifiche rimangano (letteralmente) inalterate se il tema viene aggiornato.
Implementare uno Sticky Header con il Codice: Trovare i Tag Header Corretti
Detto questo, potete iniziare. Il primo compito è quello di trovare i tag HTML giusti per la navigazione. Il risultato dipenderà dal tema che usate, anche se il tag header è una scelta sicura nella maggior parte dei casi. Il modo migliore per scoprirlo è usare gli strumenti di sviluppo del vostro browser e selezionare l’header:
È probabile che non sia così semplice come un solo tag, quindi vi consigliamo di dare un’occhiata alla documentazione del vostro tema (o di parlare direttamente con lo sviluppatore) per scoprire i tag di cui avete bisogno in caso di difficoltà.
Implementare uno Sticky Header con il Codice: Lavorare con i Fogli di Stile
Successivamente, dovrete creare o aprire un file style.css all’interno della cartella del vostro tema figlio. Questo file aggiungerà il vostro CSS a quello dell’installazione principale e, dove i tag si ripetono, lo sovrascriverà.
All’interno di questo file, aggiungete i metadati tipici necessari per registrare il tema figlio:
Successivamente, dovrete aggiungere il codice per abilitare lo sticky header. Questo richiede una certa conoscenza dell’ereditarietà dei CSS e, a seconda del tema che usate, potrebbe essere un’esperienza esasperante.
Per esempio, il tema Twenty Twenty-Two usa due tag per l’header e può essere difficile trovare la giusta combinazione di CSS per far funzionare il codice sull’elemento giusto. Questo succede anche con la finestra di dialogo delle classi di template all’interno dell’Editor blocchi (se usate la funzionalità FSE):
In ogni caso, il codice di cui avete bisogno sarà lo stesso:
Akhil Arjun offre una soluzione in due righe:
header {
position: sticky; top: 0;
}
Tuttavia, potreste anche prendere in considerazione l’utilizzo della proprietà position: fixed, che richiede qualche riga di codice in più:
header {
position: fixed;
z-index: 99;
right: 0;
left: 0;
}
Questo usa z-index per portare l’header nella parte anteriore dello stack, poi un attributo fisso per farla rimanere in cima allo schermo.
Potrebbe essere necessario aggiungere una nuova classe per applicare lo sticky header. In ogni caso, questo dovrebbe implementare le fondamenta del vostro sticky header. Una volta che l’avrete realizzato, dovrete lavorare ulteriormente sul design per renderlo compatibile con il resto del sito.
Suggerimenti per Rendere i Vostri Sticky Header Più Efficaci
Una volta trovato un metodo per creare uno sticky header, dovrete capire come perfezionarlo. Ci sono molti modi per migliorare il design di base e fare in modo che risponda alle esigenze dei visitatori del vostro sito.
Una buona analogia per il vostro sticky header è quella di assicurarvi che sia come un buon arbitro sportivo. Per la maggior parte del tempo, non vi accorgerete della sua presenza. Tuttavia, quando un giocatore o un allenatore ha bisogno di loro, fanno una chiamata e sono presenti.
Il vostro sticky header dovrebbe fare lo stesso: rimanere nell’ombra o lontano dalla mente fino a quando l’utente non ne ha bisogno. Potete ottenere questo risultato con alcune regole empiriche che (come sempre) potete decidere di infrangere se il design lo richiede:
- Mantenete la compattezza. Lo spazio sullo schermo sarà limitato, quindi cercate di mantenere l’header di piccole dimensioni. Potreste implementare una soluzione in cui l’header si ridimensiona in modo dinamico, in base all’area del sito in cui è presente.
- Usate header e menu nascosti sugli schermi piccoli. Per estensione, potete scegliere di nascondere un menu, come nell’esempio precedente di Hammerhead. Questo aiuta a mantenere l’header compatto e si collega al punto successivo.
- Non introducete distrazioni. Maggiore è il numero di elementi sullo schermo, più questi si contendono l’attenzione. Se lo sticky header non ha bisogno di mostrare un elemento, rimuovetelo: il vostro contenuto ne gioverà, così come le metriche del sito.
- Garantite un contrasto. Si tratta di un trucco che proviene dal manuale delle chiamate all’azione (CTA). Se usate un contrasto per lo sticky header nel suo complesso e per i suoi singoli elementi, potete attirare l’attenzione dove vi serve o portarla altrove.
In generale, il vostro sticky header farà solo ciò che vi serve e non di più. A volte dovrete mantenere le cose al minimo, altre volte dovrete riempirle di link, loghi e moduli di iscrizione. In ogni caso, se tenete conto dell’UX e dell’UI, prenderete sempre una decisione orientata all’utente.
Riepilogo
L’usabilità e l’UX del vostro sito sono così importanti che dovrebbero essere la prima, la seconda e la terza cosa da definire quando lo progettate e lo costruite. La navigazione del sito è solo un aspetto, ma dovete trovare il modo migliore per far muovere l’utente all’interno del sito senza problemi. Uno sticky header è un buon modo per raggiungere questo obiettivo.
Se fissate l’header nella parte superiore dello schermo, l’utente avrà sempre a portata di mano gli elementi di navigazione. Questo è particolarmente utile sui dispositivi che richiedono lo scorrimento per muoversi all’interno dei contenuti, ma offre vantaggi indipendentemente dal fattore di forma. Se usate WordPress, potete scegliere un plugin o un codice per implementare uno sticky header. Tuttavia, potreste trovare la funzionalità nel vostro tema preferito, nel qual caso potreste usare questa soluzione e ridurre la flessibilità.
Pensate che lo sticky header sia un elemento essenziale per la UX e la UI di un sito web e, in caso contrario, cosa è essenziale per voi? Fatecelo sapere nella sezione commenti qui sotto!
Lascia un commento