Come creare un’intestazione appiccicosa in WordPress
Prima di entrare nel modo in cui possiamo creare un’intestazione appiccicosa in WordPress, cerchiamo prima di capire cosa sono e perché potremmo volerli usare. Gli elementi permanenti, o elementi fissi, sono tipi speciali di elementi che rimangono sempre visibili e non cambiano la loro posizione quando l’utente scorre verso l’alto o verso il basso. Questi elementi sono accessibili in qualsiasi momento grazie al loro posizionamento e sono quindi molto utili per menu o altre opzioni di navigazione.
Vuoi offrire ai tuoi utenti quante più opzioni convenienti possibile, per rendere i tuoi contenuti facilmente accessibili e per ridurre la frustrazione degli utenti. Utilizzando gli elementi permanenti, gli utenti possono passare rapidamente da una pagina all’altra del tuo sito Web e trovare esattamente ciò di cui hanno bisogno. Tutto questo comfort e facilità d’uso significa che la tua esperienza utente sarà molto migliore e avrai una maggiore fidelizzazione degli utenti.
Ora affronteremo uno dei principali tipi di elementi appiccicosi, l’intestazione adesiva e uno strumento fantastico che può aiutarci a creare e personalizzare facilmente questi elementi. Lo strumento in questione si chiama WP Sticky.
Esistono molti modi diversi per creare intestazioni adesive oltre a WP Sticky. Puoi persino creare questi elementi appiccicosi utilizzando puro codice HTML e CSS, ma ciò richiede alcune conoscenze tecniche ed è un processo che richiede tempo. Questo plugin è una soluzione molto più semplice al problema ed è estremamente adatto ai principianti.
Prima di poter iniziare a utilizzare WP Sticky, dobbiamo prima scaricarlo e installare il plugin. Poiché si tratta di un processo molto semplice, non perderemo tempo. Invece, passiamo subito alla creazione della nostra prima intestazione appiccicosa.
La prima cosa che dobbiamo fare è entrare nella sezione dei plugin nel nostro pannello di amministrazione di WordPress; da lì, seleziona WP Sticky Pro e quindi fai clic su Impostazioni.
Saremo accolti con queste opzioni in cui dovremo selezionare Aggiungi nuovo elemento appiccicoso.
Al termine, vedremo una nuova voce nella scheda I tuoi elementi appiccicosi chiamata Elemento appiccicoso #1. Congratulazioni, hai creato il tuo primo elemento appiccicoso, ma c’è molto altro da fare prima di avere un’intestazione adesiva funzionale. Come puoi vedere, ci sono alcune categorie di impostazioni diverse per il nostro elemento appiccicoso.
Diamo un’occhiata più in dettaglio.
Qui è dove nomineremo il nostro elemento e sceglieremo esattamente cosa vogliamo rendere appiccicoso.
In primo luogo, dobbiamo dare un nome al nostro elemento appiccicoso; in questo caso, sarà Sticky Header.
Successivamente, dobbiamo individuare e selezionare un elemento che vogliamo rendere appiccicoso. Ci sono due modi in cui possiamo raggiungere questo obiettivo.
Selezionatore visivo
Questa è l’opzione più comoda e facile. Basta andare nella sezione Base e selezionare l’opzione Scegli elemento.
Una volta fatto, il tuo sito Web si aprirà insieme al menu WP Sticky in alto, segnalando che sei entrato nel selettore visivo. Se passi il puntatore del mouse su alcuni elementi, noterai una linea tratteggiata giallastra rettangolo, che visualizza l’area che hai selezionato. Fare clic su di esso con il tasto sinistro per selezionarlo.
Questo ti riporterà alla pagina delle impostazioni di WP Sticky, dove vedrai l’ identificatore univoco dell’elemento selezionato. Nel nostro caso, sembra qualcosa del genere.
Successivamente, fai clic sul pulsante Salva modifiche nell’angolo in alto a destra e il gioco è fatto.
Scrivere l’identificatore univoco
Se preferisci e hai familiarità con l’ID univoco dell’elemento che vuoi rendere appiccicoso, invece di selezionarlo visivamente, puoi semplicemente annotare il suo ID univoco.
Opzioni visive
Dopo che abbiamo finito di nominare e selezionare il nostro elemento, è il momento di trasformarlo in un’intestazione e personalizzarlo. WP Sticky ci offre molte opzioni per farlo.
Poiché vogliamo creare un’intestazione, lasceremo questa opzione nel suo stato predefinito, che è Superiore. Nel caso in cui cambiassi idea o cambiassero i requisiti, puoi anche selezionare l’opzione Fondo.
Spazio tra la parte superiore della pagina e l’elemento appiccicoso
A volte, i nostri elementi permanenti possono avvicinarsi troppo alla parte superiore della pagina. Possiamo correggerlo manualmente digitando il numero di pixel tra la parte superiore della pagina e il nostro elemento adesivo designato.
Per impostazione predefinita, questa opzione non è impostata poiché la maggior parte degli elementi verrà posizionata correttamente automaticamente.
Controlla la barra degli strumenti di amministrazione
Se il tuo sito web ha una barra degli strumenti di amministrazione specializzata, potrebbe ostruire la tua intestazione appiccicosa. In tal caso, tutto ciò che devi fare è selezionare questa opzione e il problema verrà risolto. WP Sticky riconoscerà automaticamente la dimensione della barra degli strumenti e reagirà di conseguenza.
A volte vuoi avere comportamenti diversi a seconda del dispositivo che i tuoi visitatori utilizzano per visualizzare il tuo sito web. Potresti non voler avere un’intestazione appiccicosa sui dispositivi mobili. WP Sticky ti dà la possibilità di selezionare quali categorie di dispositivi avranno il comportamento appiccicoso. Nel nostro caso, sceglieremo di non utilizzare dispositivi di piccole e medie dimensioni.
Un altro caso che potrebbe richiedere una personalizzazione manuale è se sono presenti elementi che appaiono sull’intestazione adesiva. Per evitare che ciò accada, dovrai aumentare l’indice Z della tua intestazione adesiva.
Se non sei sicuro dei valori dell’indice Z degli elementi che si sovrappongono all’intestazione, digita il valore massimo, 99999, e questo risolverà il problema.
Ci sono due impostazioni degli effetti che puoi usare. Dissolvenza e scivolare verso il basso. Ora, quale finirai per utilizzare dipende completamente dalle tue preferenze personali e dall’aspetto desiderato del sito web. Sperimenta fino a prendere una decisione.
Un’altra personalizzazione visiva dell’elemento adesivo. A seconda del resto del sito web, usando lo slider, possiamo rendere l’elemento adesivo più o meno trasparente.
Cosa succede se non vuoi che alcune parti del tuo sito web abbiano l’intestazione appiccicosa? Bene, questo dispositivo di scorrimento ti consente di personalizzare il punto iniziale e il punto finale in cui l’intestazione adesiva verrà visualizzata sul tuo sito Web mentre continui a scorrere.
Colore di sfondo
E se il nostro elemento appiccicoso non fosse così chiaramente visibile? Il plugin ha la possibilità di farlo risaltare assegnandogli un colore di sfondo. Per fare ciò, fai clic sul pulsante mostrato di seguito e scegli il colore di sfondo desiderato. È così facile.
Se desideri apportare ancora più modifiche al tuo elemento sticky che non sono coperti dalle opzioni sopra menzionate, c’è un campo in cui puoi aggiungere la personalizzazione tramite CSS. Una cosa importante da tenere a mente, in questo caso, è che non è necessario racchiudere gli stili nei selettori. Non è necessario scrivere .classname{color:#FFF;}, invece tutto ciò che devi scrivere è color:#FFF;
Lo lasceremo vuoto poiché non è più necessario personalizzare la nostra intestazione demo adesiva.
Dopo aver modificato tutte le impostazioni desiderate, non dimenticare di salvare le modifiche. Fatto ciò, possiamo andare avanti e fare clic sul pulsante Anteprima permanente nell’angolo in alto a destra per visualizzare in anteprima le modifiche apportate finora.
Insomma
WP Sticky è un’aggiunta eccellente a qualsiasi sito Web e rende il lavoro dello sviluppatore molto più semplice. Così semplice da usare, ma che offre opzioni di personalizzazione dettagliate e profonde, questo plugin è garantito per aiutarti a creare l’intestazione adesiva perfetta per il tuo sito web. Questa è un’ottima notizia poiché un’intestazione appiccicosa può aumentare significativamente le conversioni del sito web.
WP Sticky ha una versione Pro, che include tutte le opzioni di cui sopra e costa $ 5,99 al mese o $ 39 per una licenza a vita. Sono offerti anche diversi piani tariffari per team e agenzie.
Vallery Henings
Vallery Henings è una copywriter e scrittrice di contenuti specializzata in ghost blogging, campagne di email marketing e pagine di vendita. È anche un’amante dei viaggi su strada, dei biscotti al burro di arachidi e del nome di un cane Mimy.