Ciao! Oggi ti spiego come creare un banner a comparsa su Oxygen. Per chi non lo sapesse, questi banner si chiamano "hello bar" e sono utili per comunicare un messaggio agli utenti che visualizzano il sito web. Ecco un esempio:
Gli utilizzi di una hello bar sono molteplici: promozioni, avvisi, supporto, ecc. Io personalmente le realizzo sui siti web dei miei clienti per far si che gli utenti abbiano sempre a portata di clic la call to action principale.
Hai bisogno di questo servizio adesso? Clicca qui per richiederlo!
Strategicamente parlando, reputo che questi banner a comparsa diano il meglio se inseriti in apposite pagine di vendita (landing page).
Realizzarla è semplice, basta creare un div nella pagina, o nel template, fissandolo in basso o in alto tramite la funzione "position: fixed;". Ma se volessimo fare in modo che questa barra compaia dopo un determinato numero di scroll, magari impostando un valore in pixel?
La soluzione ce l'ho io e si può applicare utilizzando unicamente Oxygen Builder, senza scaricare altri plugin inutili di terze parti 🙂
Configurare l'elemento header builder
Per fare ciò dovremo servirci di un elemento genitore per la nostra barra, ovvero l'header builder. Quindi nella nostra pagina o template, dovremo aggiungere un header builder e configurarlo come segue:
- Sticky -> Enable sticky header
- Sticky -> Sticky above -> Always
NB: queste impostazioni le troverai all'interno dell'elemento "Header Builder", non all'interno dell'elemento "Header Row", che di default è selezionato quando inseriamo un header builder:
Poi configurate a vostro piacimento la distanza in pixel necessaria per far comparire la hello bar (non sarà possibile selezionarla in base alla risoluzione, ma dovrete usare un altro header builder se volete una distanza di scroll differente tra desktop e smartphone):
Creare un div e fissarlo nella pagina
A questo punto dobbiamo inserire un elemento "div" nella riga dell'header builder, posizionandolo nella parte centrale (nell'immagine io l'ho rinominato "hello bar" tramite la struttura):
Successivamente, dobbiamo fissare questo div in un punto specifico della pagina. Per farlo, dobbiamo recarci in "Advanced -> Layout -> Position" e selezionare l'opzione "fixed". Comparirà una sezione che ci permette di scegliere quanto distanziarlo da ogni lato, se volete posizionarlo in basso dovrete scrivere "0" nel campo "bottom":
Adesso personalizziamo a nostro piacimento il div, io vi consiglio di impostarlo a schermo intero (o poco meno), con un colore di sfondo in grado di contrastare bene dai contenuti della pagina. Per esempio:
- Layout child elements: horizontal
- Vertical item alignment: middle
- Horizontal item alignment: space-around
- Width: 90%
- Border radius: 5px (angoli superiori)
- Background: a tema con il sito web
- Padding: 15px;
Inserire gli elementi nel div
Dopo aver configurato il div inizia a creare il tuo messaggio: una call to action, un form di iscrizione alla newsletter, i tuoi contatti, il numero verde o informa gli utenti di una promozione in corso.
Assicurati che tutti gli elementi inseriti siano correttamente visualizzati da qualsiasi risoluzione, specialmente da smartphone, dove le hello bar giocano un ruolo molto importante!
Ecco alcuni esempi di hello bar efficaci che ci è capitato di realizzare per alcuni dei nostri clienti:
Nascondi e mostra la hello bar in funzione dello scroll di pagina
Eccoci arrivati allo step finale di questa guida, dove andiamo a impostare la regola che dirà alla nostra hello bar di sparire e apparire quando l'utente scorre un determinato numero di pixel nella pagina.
Il numero di pixel lo abbiamo già configurato precedentemente, ma possiamo sempre variarlo se necessario. Non ci resta quindi che "ordinare" alla riga del nostro header builder di essere visualizzata solo in modalità "sticky".
Per farlo, selezioniamo la riga in questione e clicchiamo sul pulsante "Only show in sticky", disponibile nel menu "Primary" alla voce "Sticky Display".
Ora pubblica le modifiche e goditi il tuo nuovo banner a comparsa!
Ti ringrazio per la lettura. Lascia un commento se hai trovato utile questa guida, noi ci vediamo al prossimo tutorial 🙂
Mi chiamo Vincenzo Iracà e insieme a Stefano Lavazza abbiamo fondato la nostra Agenzia Web. In Klorofilla realizziamo siti web professionali e landing page mirate a ottenere elevati tassi di conversione.
Da diversi anni sviluppiamo i progetti dei nostri clienti su WordPress tramite Oxygen Builder. Abbiamo deciso di contribuire in maniera attiva alla diffusione di questo page builder, che attualmente possiamo considerare il migliore sul mercato, tramite questo blog e la nostra community su Facebook.
