Cos’\u00c8 uno Sticky Header<\/h2>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/header-section.png\")
Una sezione dell\u2019header del sito web di Kotaku.<\/figcaption><\/figure>\nL\u2019header del vostro sito \u00e8 un po’ come un banco informazioni. \u00c8 l’elemento che la maggior parte degli utenti noter\u00e0 per primo e sar\u00e0 sempre un punto di riferimento da controllare per scoprire alcune informazioni chiave ed eseguire determinate azioni:<\/p>\n
\n- Per esempio, il vostro logo o il nome del sito si trovano l\u00ec, e serviranno come punto di riferimento per i vostri utenti. Nella maggior parte dei casi potranno tornare alla homepage facendo clic sul logo.<\/li>\n
- Se sul vostro sito sono presenti degli account utente<\/a>, l\u2019header di solito offre un link per accedere alle pagine degli account e dei profili.<\/li>\n
- Potrebbe essere presente una funzionalit\u00e0 di ricerca<\/a>, soprattutto se avete un sito di grandi dimensioni con molti contenuti in diverse aree.<\/li>\n
- Naturalmente, anche la navigazione del sito<\/a> \u00e8 parte integrante dell’header.<\/li>\n<\/ul>\n
In generale, il vostro header \u00e8 un punto di riferimento per gli utenti. Spesso \u00e8 la “barra” dei modelli di lettura a forma di F<\/a>, quindi attira l’attenzione delle persone in modo istintivo.<\/p>\nForse saprete gi\u00e0 cos’\u00e8 uno sticky header, o magari riuscite a immaginarlo. \u00c8 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 \u00e8 un elemento sempre visibile.<\/p>\n
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\u00f9 usabile, efficiente per lo schermo e dinamico. A seguire, vedremo alcuni esempi reali.<\/p>\n\n
Esempi di Sticky Header sul Web<\/h2>\n
Gli Sticky Header sono presenti in tutto il web ed \u00e8 una buona idea fare un po\u2019 di giri sui siti capire qual \u00e8 il risultato finale. Uno degli esempi pi\u00f9 semplici \u00e8 quello di Hammerhead<\/a>. Questo sito usa un “menu a scomparsa” e uno sticky header ed \u00e8 molto semplice. Rimane nella parte superiore della pagina nel suo layout statico:<\/p>\n![](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/hammerhead-site-gif.gif\")
lo sticky header del sito Hammerhead.<\/figcaption><\/figure>\nUn’altra semplice implementazione \u00e8 quella di Kin<\/a>. Questa usa un tipico sticky header, ma questa volta con alcuni elementi di design interessanti.<\/p>\nNoterete che il contrasto cambia in base alla parte del sito che scorrete e ci sono anche dei simpatici effetti di transizione:<\/p>\n![\"Lo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kin-site-gif.gif\")
Lo sticky header del sito web di Kin.<\/figcaption><\/figure>\nNon possiamo concludere questa sezione senza menzionare lo sticky header di Kinsta<\/a>. Anche in questo caso l\u2019header \u00e8 semplice, ma con un tocco di usabilit\u00e0 che offre un valore aggiunto al visitatore:<\/p>\n![\"Lo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kinsta-site-gif.gif\")
lo sticky header del sito web di Kinsta.<\/figcaption><\/figure>\nQuesta volta, vedrete l\u2019header scomparire quando scorrete la pagina verso il basso. Tuttavia, riapparir\u00e0 quando scorrete nuovamente verso l’alto: si pu\u00f2 parlare di “header parzialmente persistente”.<\/p>\n
La premessa \u00e8 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, \u00e8 pi\u00f9 probabile che voglite andare verso un’altra pagina del sito. In questo caso, lo sticky header vi salver\u00e0 la giornata.<\/p>\n
Sono questi piccoli accorgimenti per l’esperienza utente (UX) che fanno s\u00ec 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.<\/p>\n
Perch\u00e9 Dovreste Usare uno Sticky Header per il Vostro Sito<\/h2>\n
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.<\/p>\n
Dato che gli elementi che includete in un header sono quelli a cui l’utente vorr\u00e0 sempre accedere, ha senso averli sempre in evidenza. Questo vale soprattutto per i dispositivi e i formati a schermo ridotto<\/a>.<\/p>\nSebbene possa sembrare controintuitivo avere un header “sempre attivo” quando lo spazio della finestra \u00e8 limitato, si tratta solo di un piccolo sacrificio. Il vero vantaggio \u00e8 che l’utente mobile ha meno motivi per scorrere, il che \u00e8 fondamentale sui dispositivi pi\u00f9 piccoli. Se riuscite a fornire una navigazione del vostro sito senza necessit\u00e0 di scorrere, l’utente potr\u00e0 muoversi nel contenuto con maggiore facilit\u00e0.<\/p>\n
I Pro e i Contro degli Sticky Header<\/h3>\n
Abbiamo illustrato alcuni dei vantaggi degli sticky header, quindi riassumiamoli rapidamente:<\/p>\n
\n- Potete offrire una navigazione a cui l’utente pu\u00f2 sempre accedere, il che aiuta a preservare il modello di lettura naturale del vostro sito.<\/li>\n
- Potete adattare l\u2019header a diverse esigenze<\/a>, come per esempio contrasti, schemi di colori o persino l’intento dell’utente.<\/li>\n
- Avete la possibilit\u00e0 di offrire un valore aggiunto all’utente, sia per i desktop che per gli schermi pi\u00f9 piccoli.<\/li>\n<\/ul>\n
Tuttavia, uno sticky header non \u00e8 una panacea per migliorare la UX e ci sono alcuni aspetti negativi nel suo utilizzo:<\/p>\n
\n- Ne parliamo brevemente, ma questo vale per gli schermi di tutte le dimensioni: dovete destinare dello spazio al vostro header.<\/li>\n
- Uno sticky header cattura naturalmente l\u2019attenzione togliendola al vostro contenuto perch\u00e9 i suoi elementi attirano l’attenzione.<\/li>\n
- Il lavoro di sviluppo di un buon sticky header \u00e8 maggiore perch\u00e9 dovete implementarlo, assicurarvi che funzioni con i diversi browser e verificare che non ci siano bug sugli schermi pi\u00f9 piccoli.<\/li>\n<\/ul>\n
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 \u00e8 quello di usare i plugin di WordPress.<\/p>\n
3 Plugin Che Vi Aiutano a Creare Sticky Header<\/h2>\n
Nelle prossime sezioni vi mostreremo alcuni dei principali plugin per sticky header per WordPress. In seguito, parleremo della possibilit\u00e0 che questo tipo di soluzione sia adatta a voi. In ogni caso, un plugin pu\u00f2 aiutarvi a implementare la funzionalit\u00e0 senza bisogno di codice, il che \u00e8 prezioso se il vostro tema<\/a> non lo prevede.<\/p>\nInoltre, grazie al plugin potete sfruttare l’esperienza di progettazione e sviluppo di una persona esperta. Chi si occupa di sviluppo far\u00e0 alcune delle scelte tecniche pi\u00f9 importanti per voi e le inserir\u00e0 in un’interfaccia intuitiva e facile da usare.<\/p>\n
1. Sticky Menu e Sticky Header<\/h3>\n
Il plugin Sticky Menu & Sticky Header<\/a> di Webfactory \u00e8 una buona prima scelta, grazie alla sua ricchezza di funzioni, all’utile flessibilit\u00e0 e al prezzo conveniente.<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-sticky-header-plugin.png\")
Il plugin Sticky Menu & Sticky Header.<\/figcaption><\/figure>\nIl vantaggio \u00e8 che potete \u201cattaccare\u201d allo schermo qualsiasi elemento del vostro sito. Questo pu\u00f2 essere utile in molti modi, ma significa che implementare uno sticky header \u00e8 molto semplice.<\/p>\n
Il plugin \u00e8 inoltre dotato di una serie di potenti opzioni che vi aiutano a implementare uno sticky header:<\/p>\n
\n- Potete impostare il livello desiderato di posizionamento “in alto”. Ci\u00f2 significa che potete aggiungere spazio all’area sopra l\u2019header per adattarla ai vostri obiettivi di design.<\/li>\n
- Ci sono anche altre opzioni di posizionamento, come per esempio l\u2019uso della propriet\u00e0 CSS z-index<\/a> per progettare il sito “front-to-back”<\/li>\n
- Potete attivare lo sticky header solo sulle pagine che selezionate, il che potrebbe essere utile se avete delle landing page<\/a> o altri contenuti non adatti.<\/li>\n<\/ul>\n
Sticky Menu & Sticky Header include anche una modalit\u00e0 di debug, per aiutarvi a correggere eventuali elementi non adesivi. La modalit\u00e0 dinamica vi aiuter\u00e0 anche a risolvere i problemi legati ai design responsive.<\/p>\n
La notizia migliore \u00e8 che Sticky Menu & Sticky Header pu\u00f2 essere scaricato e usato gratuitamente. Inoltre, c’\u00e8 una versione premium<\/a> che non richiede conoscenze tecniche.<\/p>\nCon 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.<\/p>\n
2. Options for Twenty Twenty-One<\/h3>\n
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.<\/p>\n
Twenty Twenty-One<\/a> \u00e8 uno dei temi predefiniti pi\u00f9 interessanti, ma non dispone della funzionalit\u00e0 di sticky header. Se volete aggiungere questa funzione, il plugin Options for Twenty Twenty-One<\/a> pu\u00f2 fare al caso vostro.<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/options-twenty-twenty-one.png\")
Il plugin Options for Twenty Twenty-One.<\/figcaption><\/figure>\nQuesta edizione del plugin \u00e8 una delle tante. Ogni tema predefinito recente ne ha una versione, ma non ne esiste ancora una per Twenty Twenty-Two<\/a>. In ogni caso, la funzionalit\u00e0 di base del plugin offre molti extra:<\/p>\n\n- C’\u00e8 uno strumento di Full Site Editing (FSE)<\/a>, pronto per il lancio completo.<\/li>\n
- Potrete modificare la dimensione dei caratteri del corpo, rimuovere le sottolineature dei link ipertestuali e altre semplici personalizzazioni.<\/li>\n
- Potete lavorare con le larghezze massime dei contenitori e degli elementi, senza dover ricorrere al codice.<\/li>\n<\/ul>\n
Ci sono molte altre opzioni per la navigazione, i contenuti, il footer e l\u2019header. Per quest’ultima, potete nasconderla alla vista, renderla a tutta larghezza, aggiungere un’immagine e un colore di sfondo<\/a> e tante altre modifiche.<\/p>\nMentre il plugin principale \u00e8 gratuito<\/a>, per accedere alle opzioni dello sticky header \u00e8 necessario un aggiornamento premium (25-50 dollari)<\/a>. Questo vi permette di regolare le impostazioni degli header sia per i dispositivi mobili che per quelli desktop dal Personalizza di WordPress:<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-header-customizer.png\")
Il Personalizza di WordPress, che mostra le opzioni dello sticky header.<\/figcaption><\/figure>\nDato 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\u00e0 l’ideale per aiutarvi ad aggiungere uno sticky header al vostro sito.<\/p>\n
3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu<\/h3>\n
Ecco un plugin che mette le carte in tavola. Il plugin myStickymenu<\/a> di Premio offre quasi tutto ci\u00f2 che vorreste includere nel vostro sticky header e contiene molte unzionalit\u00e0.<\/p>\n![\"L\u2019header](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mystickymenu-plugin.png\")
Il plugin myStickymenu.<\/figcaption><\/figure>\nHa un numero sorprendente di recensioni positive sulla Directory dei plugin WordPress<\/a>: 799 recensioni a cinque stelle per una media di 4,9. Questo \u00e8 dovuto in parte alle numerose funzioni che mette a disposizione:<\/p>\n\n- Offre flessibilit\u00e0. Per esempio, potete creare una barra di benvenuto, uno sticky menu e un header.<\/li>\n
- Il plugin si adatta alla reattivit\u00e0 del vostro sito. Ci\u00f2 significa che non dovrete implementare ulteriori funzionalit\u00e0 mettendo mano al codice.<\/li>\n
- Infatti, per usare al meglio il plugin non \u00e8 necessario che voi conosciate il codice.<\/li>\n
- Il plugin myStickymenu \u00e8 compatibile con molti dei principali plugin per la creazione di pagine, come Elementor<\/a>, Beaver Builder<\/a>, il Block Editor nativo<\/a>, Divi Builder<\/a> e molti altri.<\/li>\n<\/ul>\n
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.<\/p>\n
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.<\/p>\n
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\u00f9 modi per disattivare lo sticky header in base a condizioni specifiche, timer per il conto alla rovescia, la possibilit\u00e0 di aggiungere pi\u00f9 barre di benvenuto e altre opzioni di personalizzazione.<\/p>\n
Come Creare un Sticky Header in WordPress<\/h2>\n
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\u00e0 a prendere una decisione.<\/p>\n
Da l\u00ec, lavorerete al vostro sticky header usando il metodo che preferite e poi applicherete alcuni dei nostri consigli per rendere il vostro header pi\u00f9 efficiente e utilizzabile in futuro.<\/p>\n
1. Decidete Come Creare il Vostro Sticky Header<\/h3>\n
Uno dei motivi per cui WordPress \u00e8 cos\u00ec flessibile<\/a> per tutti i tipi di utenti \u00e8 il suo ecosistema di plugin e l’estensibilit\u00e0 open-source. Per questo motivo, potete scegliere una soluzione standard o crearne una personalizzata.<\/p>\nIl vostro primo compito \u00e8 quello di decidere se volete usare un plugin o scavare nel codice per implementare il vostro sticky header. Vediamo le due soluzioni:<\/p>\n
\n- Plugin.<\/strong> Questo \u00e8 un metodo approvato da WordPress<\/a>, soprattutto se non avete le conoscenze tecniche necessarie. Offre flessibilit\u00e0, ma siete in balia di ci\u00f2 che la sviluppatrice o lo sviluppatore ritiene importante e della sua capacit\u00e0 di programmazione.<\/li>\n
- Codifica.<\/strong> Se avete una visione chiara in mente, potreste voler codificare uno sticky header per il vostro sito. Ovviamente dovrete avere le competenze tecniche<\/a> necessarie per realizzarlo (soprattutto i CSS<\/a>), ma i risultati saranno esattamente quelli che desiderate. Tuttavia, dovrete occuparvi di una maggiore manutenzione e il suo successo dipender\u00e0 dalle vostre capacit\u00e0 di codifica.<\/li>\n<\/ul>\n
Diremmo che per la maggior parte degli utenti di WordPress, un plugin \u00e8 la soluzione ideale per creare uno sticky header. Si adatta bene alla piattaforma ed \u00e8 pi\u00f9 facile da risolvere in caso di problemi. Tuttavia, nei prossimi passi tratteremo una soluzione di codifica oltre all’opzione del plugin.<\/p>\n
2. Scegliete Se Modificare il Vostro Tema Attuale o Sceglierne Uno Dedicato<\/h3>\n
Il prossimo aspetto che dovrete considerare \u00e8 se modificare il vostro tema attuale<\/a> o sceglierne uno che abbia gi\u00e0 la funzionalit\u00e0 di sticky header tra le sue caratteristiche. Questo aspetto \u00e8 importante se il vostro tema non ha la funzionalit\u00e0 per gestire uno sticky header.<\/p>\nMolti temi e plugin di page builder includono un’opzione per lo sticky header, per via dei vantaggi e per offrire flessibilit\u00e0 al design. Alcuni dei temi e dei plugin pi\u00f9 grandi e generici offrono questa funzionalit\u00e0 come standard, come Elementor<\/a>, Astra<\/a>, Divi, Avada e molti altri.<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/wordpress-theme-sticky.png\")
L’opzione dello sticky header in Elementor.<\/figcaption><\/figure>\nPer prendere questa decisione, dovrete considerare alcuni aspetti del vostro tema e del vostro sito attuale:<\/p>\n
\n- Il vostro sito ha gi\u00e0 l’aspetto che desiderate o ha bisogno di una rinfrescata?<\/em><\/li>\n
- Il tema attuale \u00e8 facile da personalizzare?<\/em> La documentazione di sviluppo dovrebbe indicarvelo.<\/li>\n
- Volete un’implementazione complessa dello sticky header o una pi\u00f9 semplice?<\/em><\/li>\n<\/ul>\n
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\u00e0 di sticky header, dovrete rimboccarvi le maniche e seguire uno dei seguenti passi.<\/p>\n
2a. Usare un Plugin con un Tema Specifico<\/h4>\n
Se non avete esperienza di sviluppo, vi consigliamo di scegliere un plugin per aggiungere la funzionalit\u00e0 di sticky header al vostro sito. Ci sono troppe variabili da considerare, costruire e mantenere. Al contrario, un plugin ha gi\u00e0 una base di codice che tiene conto di questi elementi, quindi offre un’opzione quasi ideale per la maggior parte delle circostanze.<\/p>\n
Per questa parte del tutorial useremo il plugin myStickymenu, in quanto offre un set di funzionalit\u00e0 completo e ricco per la maggior parte dei casi di utilizzo. Tuttavia, l’utilizzo generale sar\u00e0 lo stesso per la maggior parte dei plugin che userete.<\/p>\n
Una volta installato e attivato il plugin<\/a>, 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<\/strong> di WordPress:<\/p>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/plugin-admin-panel.png\")
Il pannello di amministrazione di myStickymenu all’interno di WordPress.<\/figcaption><\/figure>\nTuttavia, 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<\/strong>:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-settings.png\")
La schermata delle impostazioni dello sticky header.<\/figcaption><\/figure>\nAnche se ci sono molte opzioni, vi serve solo il pannello della Sticky Class<\/strong>. Una volta attivato lo sticky header, inserite il tag HTML relativo all\u2019header nel campo corrispondente al menu a tendina Other Class or ID<\/strong>:<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-class-dropdown.png\")
Modifica del tag selettore HTML all’interno del plugin myStickymenu.<\/figcaption><\/figure>\nUna volta salvate le modifiche, queste verranno applicate al vostro sito. Da qui, potete esaminare alcune funzionalit\u00e0 di stile. Per esempio, potete impostare un effetto di transizione a dissolvenza o a scorrimento, impostare lo z-index<\/strong>, lavorare con le opacit\u00e0, i colori e i tempi di transizione, oltre a una serie di altre opzioni.<\/p>\n2b. Scrivere il Codice per Creare il Vostro Sticky Header<\/h4>\n
\u00c8 quasi superfluo dire che questa sezione \u00e8 dedicata a chi ha esperienza di sviluppo. Vedrete pi\u00f9 avanti che il codice in s\u00e9 \u00e8 cos\u00ec semplice che \u00e8 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.<\/p>\n
Tuttavia, prima di iniziare, avrete bisogno di quanto segue:<\/p>\n
\n- Un editor di codice decente<\/a>, anche se in questo caso (e a seconda dell’implementazione) potreste usare l’editor di testo predefinito del sistema operativo (OS).<\/li>\n
- Dovrete avere accesso ai file del vostro sito<\/a>, di cui dovrete fare un backup<\/a> e poi scaricarli in un ambiente di sviluppo WordPress locale<\/a>.<\/li>\n<\/ul>\n
\u00c8 bene ribadire che non dovete lavorare sui file del vostro sito live. Lavorate invece in un ambiente di staging<\/a> o in una configurazione locale<\/a> e caricate i file sul vostro server live dopo averli testati.<\/p>\nInoltre, dovrete usare un tema figlio<\/a>, poich\u00e9 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.<\/p>\nImplementare uno Sticky Header con il Codice: Trovare i Tag Header Corretti<\/h4>\n
Detto questo, potete iniziare. Il primo compito \u00e8 quello di trovare i tag HTML giusti per la navigazione. Il risultato dipender\u00e0 dal tema che usate, anche se il tag header<\/strong> \u00e8 una scelta sicura nella maggior parte dei casi. Il modo migliore per scoprirlo \u00e8 usare gli strumenti di sviluppo del vostro browser<\/a> e selezionare l\u2019header:<\/p>\n![\"Lo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/inspect-element.png\")
Lo strumento Inspect Element mostra il sito Kinsta e il tag header.<\/figcaption><\/figure>\n\u00c8 probabile che non sia cos\u00ec 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<\/a> di cui avete bisogno in caso di difficolt\u00e0.<\/p>\nImplementare uno Sticky Header con il Codice: Lavorare con i Fogli di Stile<\/h4>\n
Successivamente, dovrete creare o aprire un file style.css<\/strong> all’interno della cartella del vostro tema figlio. Questo file aggiunger\u00e0 il vostro CSS a quello dell’installazione principale e, dove i tag si ripetono, lo sovrascriver\u00e0.<\/p>\nAll’interno di questo file, aggiungete i metadati tipici<\/a> necessari per registrare il tema figlio:<\/p>\n![\"L'editor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/style-css-child.png\")
Creare un tema figlio utilizzando Onivim2.<\/figcaption><\/figure>\nSuccessivamente, dovrete aggiungere il codice per abilitare lo sticky header. Questo richiede una certa conoscenza dell’ereditariet\u00e0 dei CSS e, a seconda del tema che usate, potrebbe essere un’esperienza esasperante.<\/p>\n
Per esempio, il tema Twenty Twenty-Two usa due tag per l\u2019header e pu\u00f2 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\u00e0 FSE<\/a>):<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/supersticky.png\")
Il Brave Inspector mostra pi\u00f9 tag header per il tema Twenty Twenty-Two.<\/figcaption><\/figure>\nIn ogni caso, il codice di cui avete bisogno sar\u00e0 lo stesso:<\/p>\n
Akhil Arjun<\/a> offre una soluzione in due righe:<\/p>\n\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nTuttavia, potreste anche prendere in considerazione l’utilizzo della propriet\u00e0 position: fixed<\/strong>, che richiede qualche riga di codice in pi\u00f9:<\/p>\n\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0;\n\n}\n<\/code><\/pre>\nQuesto usa z-index<\/strong> per portare l\u2019header nella parte anteriore dello stack, poi un attributo fisso per farla rimanere in cima allo schermo.<\/p>\nPotrebbe 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\u2019avrete realizzato, dovrete lavorare ulteriormente sul design per renderlo compatibile con il resto del sito.<\/p>\n
Suggerimenti per Rendere i Vostri Sticky Header Pi\u00f9 Efficaci<\/h2>\n
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.<\/p>\n
Una buona analogia per il vostro sticky header \u00e8 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.<\/p>\n
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:<\/p>\n
\n- Mantenete la compattezza.<\/strong> Lo spazio sullo schermo sar\u00e0 limitato, quindi cercate di mantenere l\u2019header di piccole dimensioni. Potreste implementare una soluzione in cui l\u2019header si ridimensiona in modo dinamico, in base all’area del sito in cui \u00e8 presente.<\/li>\n
- Usate header e menu nascosti sugli schermi piccoli.<\/strong> Per estensione, potete scegliere di nascondere un menu, come nell’esempio precedente di Hammerhead. Questo aiuta a mantenere l\u2019header compatto e si collega al punto successivo.<\/li>\n
- Non introducete distrazioni.<\/strong> Maggiore \u00e8 il numero di elementi sullo schermo, pi\u00f9 questi si contendono l’attenzione. Se lo sticky header non ha bisogno di mostrare un elemento, rimuovetelo: il vostro contenuto ne giover\u00e0, cos\u00ec come le metriche del sito.<\/li>\n
- Garantite un contrasto. <\/strong>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.<\/li>\n<\/ul>\n
In generale, il vostro sticky header far\u00e0 solo ci\u00f2 che vi serve e non di pi\u00f9. A volte dovrete mantenere le cose al minimo, altre volte dovrete riempirle di link, loghi e moduli di iscrizione<\/a>. In ogni caso, se tenete conto dell’UX e dell’UI, prenderete sempre una decisione orientata all’utente.<\/p>\n\nRiepilogo<\/h2>\n
L’usabilit\u00e0 e l’UX del vostro sito sono cos\u00ec importanti che dovrebbero essere la prima, la seconda e la terza cosa da definire quando lo progettate e lo costruite. La navigazione del sito \u00e8 solo un aspetto, ma dovete trovare il modo migliore per far muovere l’utente all’interno del sito senza problemi. Uno sticky header \u00e8 un buon modo per raggiungere questo obiettivo.<\/p>\n
L\u2019header del vostro sito \u00e8 un po’ come un banco informazioni. \u00c8 l’elemento che la maggior parte degli utenti noter\u00e0 per primo e sar\u00e0 sempre un punto di riferimento da controllare per scoprire alcune informazioni chiave ed eseguire determinate azioni:<\/p>\n
- \n
- Per esempio, il vostro logo o il nome del sito si trovano l\u00ec, e serviranno come punto di riferimento per i vostri utenti. Nella maggior parte dei casi potranno tornare alla homepage facendo clic sul logo.<\/li>\n
- Se sul vostro sito sono presenti degli account utente<\/a>, l\u2019header di solito offre un link per accedere alle pagine degli account e dei profili.<\/li>\n
- Potrebbe essere presente una funzionalit\u00e0 di ricerca<\/a>, soprattutto se avete un sito di grandi dimensioni con molti contenuti in diverse aree.<\/li>\n
- Naturalmente, anche la navigazione del sito<\/a> \u00e8 parte integrante dell’header.<\/li>\n<\/ul>\n
In generale, il vostro header \u00e8 un punto di riferimento per gli utenti. Spesso \u00e8 la “barra” dei modelli di lettura a forma di F<\/a>, quindi attira l’attenzione delle persone in modo istintivo.<\/p>\n
Forse saprete gi\u00e0 cos’\u00e8 uno sticky header, o magari riuscite a immaginarlo. \u00c8 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 \u00e8 un elemento sempre visibile.<\/p>\n
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\u00f9 usabile, efficiente per lo schermo e dinamico. A seguire, vedremo alcuni esempi reali.<\/p>\n\n
Esempi di Sticky Header sul Web<\/h2>\n
Gli Sticky Header sono presenti in tutto il web ed \u00e8 una buona idea fare un po\u2019 di giri sui siti capire qual \u00e8 il risultato finale. Uno degli esempi pi\u00f9 semplici \u00e8 quello di Hammerhead<\/a>. Questo sito usa un “menu a scomparsa” e uno sticky header ed \u00e8 molto semplice. Rimane nella parte superiore della pagina nel suo layout statico:<\/p>\n
lo sticky header del sito Hammerhead.<\/figcaption><\/figure>\n Un’altra semplice implementazione \u00e8 quella di Kin<\/a>. Questa usa un tipico sticky header, ma questa volta con alcuni elementi di design interessanti.<\/p>\n
Noterete che il contrasto cambia in base alla parte del sito che scorrete e ci sono anche dei simpatici effetti di transizione:<\/p>\n
Lo sticky header del sito web di Kin.<\/figcaption><\/figure>\n Non possiamo concludere questa sezione senza menzionare lo sticky header di Kinsta<\/a>. Anche in questo caso l\u2019header \u00e8 semplice, ma con un tocco di usabilit\u00e0 che offre un valore aggiunto al visitatore:<\/p>\n
lo sticky header del sito web di Kinsta.<\/figcaption><\/figure>\n Questa volta, vedrete l\u2019header scomparire quando scorrete la pagina verso il basso. Tuttavia, riapparir\u00e0 quando scorrete nuovamente verso l’alto: si pu\u00f2 parlare di “header parzialmente persistente”.<\/p>\n
La premessa \u00e8 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, \u00e8 pi\u00f9 probabile che voglite andare verso un’altra pagina del sito. In questo caso, lo sticky header vi salver\u00e0 la giornata.<\/p>\n
Sono questi piccoli accorgimenti per l’esperienza utente (UX) che fanno s\u00ec 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.<\/p>\n
Perch\u00e9 Dovreste Usare uno Sticky Header per il Vostro Sito<\/h2>\n
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.<\/p>\n
Dato che gli elementi che includete in un header sono quelli a cui l’utente vorr\u00e0 sempre accedere, ha senso averli sempre in evidenza. Questo vale soprattutto per i dispositivi e i formati a schermo ridotto<\/a>.<\/p>\n
Sebbene possa sembrare controintuitivo avere un header “sempre attivo” quando lo spazio della finestra \u00e8 limitato, si tratta solo di un piccolo sacrificio. Il vero vantaggio \u00e8 che l’utente mobile ha meno motivi per scorrere, il che \u00e8 fondamentale sui dispositivi pi\u00f9 piccoli. Se riuscite a fornire una navigazione del vostro sito senza necessit\u00e0 di scorrere, l’utente potr\u00e0 muoversi nel contenuto con maggiore facilit\u00e0.<\/p>\n
I Pro e i Contro degli Sticky Header<\/h3>\n
Abbiamo illustrato alcuni dei vantaggi degli sticky header, quindi riassumiamoli rapidamente:<\/p>\n
- \n
- Potete offrire una navigazione a cui l’utente pu\u00f2 sempre accedere, il che aiuta a preservare il modello di lettura naturale del vostro sito.<\/li>\n
- Potete adattare l\u2019header a diverse esigenze<\/a>, come per esempio contrasti, schemi di colori o persino l’intento dell’utente.<\/li>\n
- Avete la possibilit\u00e0 di offrire un valore aggiunto all’utente, sia per i desktop che per gli schermi pi\u00f9 piccoli.<\/li>\n<\/ul>\n
Tuttavia, uno sticky header non \u00e8 una panacea per migliorare la UX e ci sono alcuni aspetti negativi nel suo utilizzo:<\/p>\n
- \n
- Ne parliamo brevemente, ma questo vale per gli schermi di tutte le dimensioni: dovete destinare dello spazio al vostro header.<\/li>\n
- Uno sticky header cattura naturalmente l\u2019attenzione togliendola al vostro contenuto perch\u00e9 i suoi elementi attirano l’attenzione.<\/li>\n
- Il lavoro di sviluppo di un buon sticky header \u00e8 maggiore perch\u00e9 dovete implementarlo, assicurarvi che funzioni con i diversi browser e verificare che non ci siano bug sugli schermi pi\u00f9 piccoli.<\/li>\n<\/ul>\n
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 \u00e8 quello di usare i plugin di WordPress.<\/p>\n
3 Plugin Che Vi Aiutano a Creare Sticky Header<\/h2>\n
Nelle prossime sezioni vi mostreremo alcuni dei principali plugin per sticky header per WordPress. In seguito, parleremo della possibilit\u00e0 che questo tipo di soluzione sia adatta a voi. In ogni caso, un plugin pu\u00f2 aiutarvi a implementare la funzionalit\u00e0 senza bisogno di codice, il che \u00e8 prezioso se il vostro tema<\/a> non lo prevede.<\/p>\n
Inoltre, grazie al plugin potete sfruttare l’esperienza di progettazione e sviluppo di una persona esperta. Chi si occupa di sviluppo far\u00e0 alcune delle scelte tecniche pi\u00f9 importanti per voi e le inserir\u00e0 in un’interfaccia intuitiva e facile da usare.<\/p>\n
1. Sticky Menu e Sticky Header<\/h3>\n
Il plugin Sticky Menu & Sticky Header<\/a> di Webfactory \u00e8 una buona prima scelta, grazie alla sua ricchezza di funzioni, all’utile flessibilit\u00e0 e al prezzo conveniente.<\/p>\n
Il plugin Sticky Menu & Sticky Header.<\/figcaption><\/figure>\n Il vantaggio \u00e8 che potete \u201cattaccare\u201d allo schermo qualsiasi elemento del vostro sito. Questo pu\u00f2 essere utile in molti modi, ma significa che implementare uno sticky header \u00e8 molto semplice.<\/p>\n
Il plugin \u00e8 inoltre dotato di una serie di potenti opzioni che vi aiutano a implementare uno sticky header:<\/p>\n
- \n
- Potete impostare il livello desiderato di posizionamento “in alto”. Ci\u00f2 significa che potete aggiungere spazio all’area sopra l\u2019header per adattarla ai vostri obiettivi di design.<\/li>\n
- Ci sono anche altre opzioni di posizionamento, come per esempio l\u2019uso della propriet\u00e0 CSS z-index<\/a> per progettare il sito “front-to-back”<\/li>\n
- Potete attivare lo sticky header solo sulle pagine che selezionate, il che potrebbe essere utile se avete delle landing page<\/a> o altri contenuti non adatti.<\/li>\n<\/ul>\n
Sticky Menu & Sticky Header include anche una modalit\u00e0 di debug, per aiutarvi a correggere eventuali elementi non adesivi. La modalit\u00e0 dinamica vi aiuter\u00e0 anche a risolvere i problemi legati ai design responsive.<\/p>\n
La notizia migliore \u00e8 che Sticky Menu & Sticky Header pu\u00f2 essere scaricato e usato gratuitamente. Inoltre, c’\u00e8 una versione premium<\/a> che non richiede conoscenze tecniche.<\/p>\n
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.<\/p>\n
2. Options for Twenty Twenty-One<\/h3>\n
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.<\/p>\n
Twenty Twenty-One<\/a> \u00e8 uno dei temi predefiniti pi\u00f9 interessanti, ma non dispone della funzionalit\u00e0 di sticky header. Se volete aggiungere questa funzione, il plugin Options for Twenty Twenty-One<\/a> pu\u00f2 fare al caso vostro.<\/p>\n
Il plugin Options for Twenty Twenty-One.<\/figcaption><\/figure>\n Questa edizione del plugin \u00e8 una delle tante. Ogni tema predefinito recente ne ha una versione, ma non ne esiste ancora una per Twenty Twenty-Two<\/a>. In ogni caso, la funzionalit\u00e0 di base del plugin offre molti extra:<\/p>\n
- \n
- C’\u00e8 uno strumento di Full Site Editing (FSE)<\/a>, pronto per il lancio completo.<\/li>\n
- Potrete modificare la dimensione dei caratteri del corpo, rimuovere le sottolineature dei link ipertestuali e altre semplici personalizzazioni.<\/li>\n
- Potete lavorare con le larghezze massime dei contenitori e degli elementi, senza dover ricorrere al codice.<\/li>\n<\/ul>\n
Ci sono molte altre opzioni per la navigazione, i contenuti, il footer e l\u2019header. Per quest’ultima, potete nasconderla alla vista, renderla a tutta larghezza, aggiungere un’immagine e un colore di sfondo<\/a> e tante altre modifiche.<\/p>\n
Mentre il plugin principale \u00e8 gratuito<\/a>, per accedere alle opzioni dello sticky header \u00e8 necessario un aggiornamento premium (25-50 dollari)<\/a>. Questo vi permette di regolare le impostazioni degli header sia per i dispositivi mobili che per quelli desktop dal Personalizza di WordPress:<\/p>\n
Il Personalizza di WordPress, che mostra le opzioni dello sticky header.<\/figcaption><\/figure>\n 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\u00e0 l’ideale per aiutarvi ad aggiungere uno sticky header al vostro sito.<\/p>\n
3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu<\/h3>\n
Ecco un plugin che mette le carte in tavola. Il plugin myStickymenu<\/a> di Premio offre quasi tutto ci\u00f2 che vorreste includere nel vostro sticky header e contiene molte unzionalit\u00e0.<\/p>\n
Il plugin myStickymenu.<\/figcaption><\/figure>\n Ha un numero sorprendente di recensioni positive sulla Directory dei plugin WordPress<\/a>: 799 recensioni a cinque stelle per una media di 4,9. Questo \u00e8 dovuto in parte alle numerose funzioni che mette a disposizione:<\/p>\n
- \n
- Offre flessibilit\u00e0. Per esempio, potete creare una barra di benvenuto, uno sticky menu e un header.<\/li>\n
- Il plugin si adatta alla reattivit\u00e0 del vostro sito. Ci\u00f2 significa che non dovrete implementare ulteriori funzionalit\u00e0 mettendo mano al codice.<\/li>\n
- Infatti, per usare al meglio il plugin non \u00e8 necessario che voi conosciate il codice.<\/li>\n
- Il plugin myStickymenu \u00e8 compatibile con molti dei principali plugin per la creazione di pagine, come Elementor<\/a>, Beaver Builder<\/a>, il Block Editor nativo<\/a>, Divi Builder<\/a> e molti altri.<\/li>\n<\/ul>\n
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.<\/p>\n
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.<\/p>\n
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\u00f9 modi per disattivare lo sticky header in base a condizioni specifiche, timer per il conto alla rovescia, la possibilit\u00e0 di aggiungere pi\u00f9 barre di benvenuto e altre opzioni di personalizzazione.<\/p>\n
Come Creare un Sticky Header in WordPress<\/h2>\n
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\u00e0 a prendere una decisione.<\/p>\n
Da l\u00ec, lavorerete al vostro sticky header usando il metodo che preferite e poi applicherete alcuni dei nostri consigli per rendere il vostro header pi\u00f9 efficiente e utilizzabile in futuro.<\/p>\n
1. Decidete Come Creare il Vostro Sticky Header<\/h3>\n
Uno dei motivi per cui WordPress \u00e8 cos\u00ec flessibile<\/a> per tutti i tipi di utenti \u00e8 il suo ecosistema di plugin e l’estensibilit\u00e0 open-source. Per questo motivo, potete scegliere una soluzione standard o crearne una personalizzata.<\/p>\n
Il vostro primo compito \u00e8 quello di decidere se volete usare un plugin o scavare nel codice per implementare il vostro sticky header. Vediamo le due soluzioni:<\/p>\n
- \n
- Plugin.<\/strong> Questo \u00e8 un metodo approvato da WordPress<\/a>, soprattutto se non avete le conoscenze tecniche necessarie. Offre flessibilit\u00e0, ma siete in balia di ci\u00f2 che la sviluppatrice o lo sviluppatore ritiene importante e della sua capacit\u00e0 di programmazione.<\/li>\n
- Codifica.<\/strong> Se avete una visione chiara in mente, potreste voler codificare uno sticky header per il vostro sito. Ovviamente dovrete avere le competenze tecniche<\/a> necessarie per realizzarlo (soprattutto i CSS<\/a>), ma i risultati saranno esattamente quelli che desiderate. Tuttavia, dovrete occuparvi di una maggiore manutenzione e il suo successo dipender\u00e0 dalle vostre capacit\u00e0 di codifica.<\/li>\n<\/ul>\n
Diremmo che per la maggior parte degli utenti di WordPress, un plugin \u00e8 la soluzione ideale per creare uno sticky header. Si adatta bene alla piattaforma ed \u00e8 pi\u00f9 facile da risolvere in caso di problemi. Tuttavia, nei prossimi passi tratteremo una soluzione di codifica oltre all’opzione del plugin.<\/p>\n
2. Scegliete Se Modificare il Vostro Tema Attuale o Sceglierne Uno Dedicato<\/h3>\n
Il prossimo aspetto che dovrete considerare \u00e8 se modificare il vostro tema attuale<\/a> o sceglierne uno che abbia gi\u00e0 la funzionalit\u00e0 di sticky header tra le sue caratteristiche. Questo aspetto \u00e8 importante se il vostro tema non ha la funzionalit\u00e0 per gestire uno sticky header.<\/p>\n
Molti temi e plugin di page builder includono un’opzione per lo sticky header, per via dei vantaggi e per offrire flessibilit\u00e0 al design. Alcuni dei temi e dei plugin pi\u00f9 grandi e generici offrono questa funzionalit\u00e0 come standard, come Elementor<\/a>, Astra<\/a>, Divi, Avada e molti altri.<\/p>\n
L’opzione dello sticky header in Elementor.<\/figcaption><\/figure>\n Per prendere questa decisione, dovrete considerare alcuni aspetti del vostro tema e del vostro sito attuale:<\/p>\n
- \n
- Il vostro sito ha gi\u00e0 l’aspetto che desiderate o ha bisogno di una rinfrescata?<\/em><\/li>\n
- Il tema attuale \u00e8 facile da personalizzare?<\/em> La documentazione di sviluppo dovrebbe indicarvelo.<\/li>\n
- Volete un’implementazione complessa dello sticky header o una pi\u00f9 semplice?<\/em><\/li>\n<\/ul>\n
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\u00e0 di sticky header, dovrete rimboccarvi le maniche e seguire uno dei seguenti passi.<\/p>\n
2a. Usare un Plugin con un Tema Specifico<\/h4>\n
Se non avete esperienza di sviluppo, vi consigliamo di scegliere un plugin per aggiungere la funzionalit\u00e0 di sticky header al vostro sito. Ci sono troppe variabili da considerare, costruire e mantenere. Al contrario, un plugin ha gi\u00e0 una base di codice che tiene conto di questi elementi, quindi offre un’opzione quasi ideale per la maggior parte delle circostanze.<\/p>\n
Per questa parte del tutorial useremo il plugin myStickymenu, in quanto offre un set di funzionalit\u00e0 completo e ricco per la maggior parte dei casi di utilizzo. Tuttavia, l’utilizzo generale sar\u00e0 lo stesso per la maggior parte dei plugin che userete.<\/p>\n
Una volta installato e attivato il plugin<\/a>, 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<\/strong> di WordPress:<\/p>\n
Il pannello di amministrazione di myStickymenu all’interno di WordPress.<\/figcaption><\/figure>\n 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<\/strong>:<\/p>\n
La schermata delle impostazioni dello sticky header.<\/figcaption><\/figure>\n Anche se ci sono molte opzioni, vi serve solo il pannello della Sticky Class<\/strong>. Una volta attivato lo sticky header, inserite il tag HTML relativo all\u2019header nel campo corrispondente al menu a tendina Other Class or ID<\/strong>:<\/p>\n
Modifica del tag selettore HTML all’interno del plugin myStickymenu.<\/figcaption><\/figure>\n Una volta salvate le modifiche, queste verranno applicate al vostro sito. Da qui, potete esaminare alcune funzionalit\u00e0 di stile. Per esempio, potete impostare un effetto di transizione a dissolvenza o a scorrimento, impostare lo z-index<\/strong>, lavorare con le opacit\u00e0, i colori e i tempi di transizione, oltre a una serie di altre opzioni.<\/p>\n
2b. Scrivere il Codice per Creare il Vostro Sticky Header<\/h4>\n
\u00c8 quasi superfluo dire che questa sezione \u00e8 dedicata a chi ha esperienza di sviluppo. Vedrete pi\u00f9 avanti che il codice in s\u00e9 \u00e8 cos\u00ec semplice che \u00e8 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.<\/p>\n
Tuttavia, prima di iniziare, avrete bisogno di quanto segue:<\/p>\n
- \n
- Un editor di codice decente<\/a>, anche se in questo caso (e a seconda dell’implementazione) potreste usare l’editor di testo predefinito del sistema operativo (OS).<\/li>\n
- Dovrete avere accesso ai file del vostro sito<\/a>, di cui dovrete fare un backup<\/a> e poi scaricarli in un ambiente di sviluppo WordPress locale<\/a>.<\/li>\n<\/ul>\n
\u00c8 bene ribadire che non dovete lavorare sui file del vostro sito live. Lavorate invece in un ambiente di staging<\/a> o in una configurazione locale<\/a> e caricate i file sul vostro server live dopo averli testati.<\/p>\n
Inoltre, dovrete usare un tema figlio<\/a>, poich\u00e9 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.<\/p>\n
Implementare uno Sticky Header con il Codice: Trovare i Tag Header Corretti<\/h4>\n
Detto questo, potete iniziare. Il primo compito \u00e8 quello di trovare i tag HTML giusti per la navigazione. Il risultato dipender\u00e0 dal tema che usate, anche se il tag header<\/strong> \u00e8 una scelta sicura nella maggior parte dei casi. Il modo migliore per scoprirlo \u00e8 usare gli strumenti di sviluppo del vostro browser<\/a> e selezionare l\u2019header:<\/p>\n
Lo strumento Inspect Element mostra il sito Kinsta e il tag header.<\/figcaption><\/figure>\n \u00c8 probabile che non sia cos\u00ec 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<\/a> di cui avete bisogno in caso di difficolt\u00e0.<\/p>\n
Implementare uno Sticky Header con il Codice: Lavorare con i Fogli di Stile<\/h4>\n
Successivamente, dovrete creare o aprire un file style.css<\/strong> all’interno della cartella del vostro tema figlio. Questo file aggiunger\u00e0 il vostro CSS a quello dell’installazione principale e, dove i tag si ripetono, lo sovrascriver\u00e0.<\/p>\n
All’interno di questo file, aggiungete i metadati tipici<\/a> necessari per registrare il tema figlio:<\/p>\n
Creare un tema figlio utilizzando Onivim2.<\/figcaption><\/figure>\n Successivamente, dovrete aggiungere il codice per abilitare lo sticky header. Questo richiede una certa conoscenza dell’ereditariet\u00e0 dei CSS e, a seconda del tema che usate, potrebbe essere un’esperienza esasperante.<\/p>\n
Per esempio, il tema Twenty Twenty-Two usa due tag per l\u2019header e pu\u00f2 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\u00e0 FSE<\/a>):<\/p>\n
Il Brave Inspector mostra pi\u00f9 tag header per il tema Twenty Twenty-Two.<\/figcaption><\/figure>\n In ogni caso, il codice di cui avete bisogno sar\u00e0 lo stesso:<\/p>\n
Akhil Arjun<\/a> offre una soluzione in due righe:<\/p>\n
\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nTuttavia, potreste anche prendere in considerazione l’utilizzo della propriet\u00e0 position: fixed<\/strong>, che richiede qualche riga di codice in pi\u00f9:<\/p>\n
\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0;\n\n}\n<\/code><\/pre>\nQuesto usa z-index<\/strong> per portare l\u2019header nella parte anteriore dello stack, poi un attributo fisso per farla rimanere in cima allo schermo.<\/p>\n
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\u2019avrete realizzato, dovrete lavorare ulteriormente sul design per renderlo compatibile con il resto del sito.<\/p>\n
Suggerimenti per Rendere i Vostri Sticky Header Pi\u00f9 Efficaci<\/h2>\n
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.<\/p>\n
Una buona analogia per il vostro sticky header \u00e8 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.<\/p>\n
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:<\/p>\n
- \n
- Mantenete la compattezza.<\/strong> Lo spazio sullo schermo sar\u00e0 limitato, quindi cercate di mantenere l\u2019header di piccole dimensioni. Potreste implementare una soluzione in cui l\u2019header si ridimensiona in modo dinamico, in base all’area del sito in cui \u00e8 presente.<\/li>\n
- Usate header e menu nascosti sugli schermi piccoli.<\/strong> Per estensione, potete scegliere di nascondere un menu, come nell’esempio precedente di Hammerhead. Questo aiuta a mantenere l\u2019header compatto e si collega al punto successivo.<\/li>\n
- Non introducete distrazioni.<\/strong> Maggiore \u00e8 il numero di elementi sullo schermo, pi\u00f9 questi si contendono l’attenzione. Se lo sticky header non ha bisogno di mostrare un elemento, rimuovetelo: il vostro contenuto ne giover\u00e0, cos\u00ec come le metriche del sito.<\/li>\n
- Garantite un contrasto. <\/strong>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.<\/li>\n<\/ul>\n
In generale, il vostro sticky header far\u00e0 solo ci\u00f2 che vi serve e non di pi\u00f9. A volte dovrete mantenere le cose al minimo, altre volte dovrete riempirle di link, loghi e moduli di iscrizione<\/a>. In ogni caso, se tenete conto dell’UX e dell’UI, prenderete sempre una decisione orientata all’utente.<\/p>\n\n
Riepilogo<\/h2>\n
L’usabilit\u00e0 e l’UX del vostro sito sono cos\u00ec importanti che dovrebbero essere la prima, la seconda e la terza cosa da definire quando lo progettate e lo costruite. La navigazione del sito \u00e8 solo un aspetto, ma dovete trovare il modo migliore per far muovere l’utente all’interno del sito senza problemi. Uno sticky header \u00e8 un buon modo per raggiungere questo obiettivo.<\/p>\n
- Usate header e menu nascosti sugli schermi piccoli.<\/strong> Per estensione, potete scegliere di nascondere un menu, come nell’esempio precedente di Hammerhead. Questo aiuta a mantenere l\u2019header compatto e si collega al punto successivo.<\/li>\n
- Dovrete avere accesso ai file del vostro sito<\/a>, di cui dovrete fare un backup<\/a> e poi scaricarli in un ambiente di sviluppo WordPress locale<\/a>.<\/li>\n<\/ul>\n
- Il tema attuale \u00e8 facile da personalizzare?<\/em> La documentazione di sviluppo dovrebbe indicarvelo.<\/li>\n
- Codifica.<\/strong> Se avete una visione chiara in mente, potreste voler codificare uno sticky header per il vostro sito. Ovviamente dovrete avere le competenze tecniche<\/a> necessarie per realizzarlo (soprattutto i CSS<\/a>), ma i risultati saranno esattamente quelli che desiderate. Tuttavia, dovrete occuparvi di una maggiore manutenzione e il suo successo dipender\u00e0 dalle vostre capacit\u00e0 di codifica.<\/li>\n<\/ul>\n
- Plugin.<\/strong> Questo \u00e8 un metodo approvato da WordPress<\/a>, soprattutto se non avete le conoscenze tecniche necessarie. Offre flessibilit\u00e0, ma siete in balia di ci\u00f2 che la sviluppatrice o lo sviluppatore ritiene importante e della sua capacit\u00e0 di programmazione.<\/li>\n
- Potete attivare lo sticky header solo sulle pagine che selezionate, il che potrebbe essere utile se avete delle landing page<\/a> o altri contenuti non adatti.<\/li>\n<\/ul>\n
- Avete la possibilit\u00e0 di offrire un valore aggiunto all’utente, sia per i desktop che per gli schermi pi\u00f9 piccoli.<\/li>\n<\/ul>\n
- Potrebbe essere presente una funzionalit\u00e0 di ricerca<\/a>, soprattutto se avete un sito di grandi dimensioni con molti contenuti in diverse aree.<\/li>\n