Come Creare una Barra Mobile "Sticky" in WordPress

Vuoi catturare l'attenzione dei tuoi visitatori usando una barra mobile fluttuante in WordPress?

Con un banner o una barra mobile fluttuante, puoi visualizzare un messaggio nella parte superiore o inferiore del tuo sito web senza disturbare l'esperienza dell'utente. Questo ti consente di promuovere iscrizioni alla newsletter, prodotti, offerte lampo, account di social media e visualizzare qualsiasi messaggio personalizzato. Ad esempio, potresti voler visualizzare le impostazioni dei cookie per chiedere al visitatore il permesso di tracciare i propri dati durante la navigazione sul tuo sito.

In questa guida passo passo, ti mostreremo il modo più semplice per creare un banner fluttuante per WordPress. Prima di iniziare il tutorial, chiariamo cos'è esattamente una barra mobile fluttuante.

Cos'è una barra mobile fluttuante?

Un banner fluttuante rimane nella parte superiore o inferiore della tua pagina web mentre i tuoi visitatori scorrono la pagina. 

Queste barre sono sempre visibili all'utente e possono interagire con il tuo messaggio in qualsiasi momento durante il loro percorso di navigazione.

Le barre fluttuanti sono progettate per essere flessibili e servire a molteplici scopi. Quindi puoi personalizzarle per mostrare qualsiasi messaggio desideri. Per fare alcuni esempi, puoi aggiungere sconti di benvenuto per i nuovi visitatori o promuovere un prodotto appena aggiunto per massimizzare la visibilità.

Se usate nel modo giusto, puoi utilizzare le barre fluttuanti per:

• Migliorare le tue vendite e i tuoi ricavi attraverso offerte lampo, sconti e promozioni
• Portare traffico ai tuoi contenuti online (podcast, articoli, guide, video e altro)
• Aumentare l'engagement e le conversioni del sito web
• Generare lead e iscritti per far crescere la tua lista di email marketing 
• Aumentare l'engagement e i follower sui social media
• Aumentare la notorietà del marchio

Ci sono molti modi in cui puoi usare le barre fluttuanti a tuo vantaggio. Detto questo, impariamo come creare un banner fluttuante per WordPress che catturi l'attenzione per il tuo sito.

Creare un banner fluttuante per WordPress

Esistono diversi plugin per barre fluttuanti per WordPress, ma non tutti offrono le funzionalità necessarie per crearne e personalizzarne uno con facilità.

Ti mostreremo come crearne uno in meno di 5 minuti senza toccare una sola riga di codice usando il nostro strumento preferito per banner fluttuanti chiamato OptinMonster.

OptinMonster è lo strumento di lead generation n. 1 che ti consente di creare campagne di marketing accattivanti per convertire i tuoi visitatori in clienti. Queste includono barre fluttuanti, popup, slide-in, moduli inline e altro.

OptinMonster viene fornito con una libreria di oltre 50 modelli di banner fluttuanti predefiniti, quindi non dovrai partire da zero.

Troverai design per annunci, sconti, offerte per le festività più popolari, iscrizioni alla newsletter e molto altro.

Puoi visualizzare in anteprima e selezionare un modello a tua scelta. Poi c'è un builder drag and drop così facile da usare. Puoi personalizzare testo, design dell'immagine, colori e altro ancora con semplici clic del mouse.

Inoltre, OptinMonster ti consente di impostare regole di targeting in modo da poter visualizzare i tuoi banner fluttuanti alle persone giuste al momento e nel posto giusto. Ad esempio, puoi configurare la tua campagna in modo che appaia solo ai nuovi utenti o a quelli che stanno per abbandonare il tuo sito web. Ti consente inoltre di retargeting e follow-up sui tuoi lead per migliorare l'engagement. 

In aggiunta, OptinMonster tiene traccia e visualizza tutte le statistiche importanti di cui hai bisogno direttamente nella sua dashboard. Puoi vedere il numero di visitatori che hanno visualizzato e cliccato sul tuo banner fluttuante di WordPress, e persino quanti soldi guadagni dalla campagna. 

Per darti un'idea di cosa puoi fare con OptinMonster, ecco alcune campagne di esempio:

La cosa migliore di OptinMonster è che ti offre la flessibilità di creare e gestire tutte le tue campagne, comprese le barre fluttuanti, direttamente dalla tua dashboard di WordPress. 

Ora, non perdiamo tempo e iniziamo a creare il nostro banner fluttuante di WordPress con OptinMonster.

Passaggio 1: Installa e Attiva il Plugin OptinMonster

Innanzitutto, devi registrarti per un account OptinMonster. Il plugin parte da $9 al mese con una garanzia di rimborso di 30 giorni.

Quindi, dovrai installare il plugin OptinMonster per collegare l'account al tuo sito. 

Il plugin connettore è disponibile gratuitamente, quindi puoi scaricarlo facilmente dalla tua dashboard di WordPress. Per maggiori dettagli, puoi consultare la nostra guida su come installare un plugin di WordPress.

Quando installi e attivi il plugin OptinMonster sul tuo sito, verrà avviata una procedura guidata di configurazione. Avrai l'opzione di collegare il tuo account appena creato.

Tieni presente che se sei già connesso al tuo account OptinMonster in un'altra scheda, il plugin lo rileverà automaticamente e sincronizzerà il tuo sito web.

Ora puoi iniziare a creare il tuo primo banner fluttuante di WordPress con OptinMonster.

Passaggio 2: Crea una Nuova Campagna Floating Bar

OptinMonster ti consente di creare e personalizzare banner fluttuanti all'interno della tua dashboard di amministrazione di WordPress. 

Per fare ciò, vai alla scheda OptinMonster e vedrai diversi tipi di campagne di lead generation come popup, barre fluttuanti, schermo intero, inline e altro. 

Per creare una campagna di barra sticky di WordPress, sceglieremo l'opzione Floating Bar. 

Questo aprirà la libreria di modelli contenente splendidi modelli di banner fluttuanti tra cui puoi scegliere. 

Qui puoi passare il mouse sopra qualsiasi modello per visualizzare in anteprima la barra fluttuante sticky sulla stessa pagina. Quando hai trovato il miglior design per la tua campagna, fai clic sul pulsante Use Template per creare il tuo banner fluttuante.

Questo aprirà una finestra popup in cui puoi dare un nome alla tua campagna floating bar. 

Quindi, fai clic sul pulsante Start Building per avviare il costruttore di campagne OptinMonster. 

Passaggio 3: Personalizza il tuo Banner Fluttuante di WordPress

Nel costruttore di campagne, vedrai tutti i blocchi di elementi sulla sinistra e l'anteprima della tua barra sticky sul lato destro. Qui puoi facilmente trascinare e rilasciare i blocchi richiesti sul tuo banner.

Troverai i 12 blocchi che puoi usare per rendere il tuo banner più coinvolgente e interattivo. 

Alcuni dei blocchi di elementi utili sono: 

• Conto alla rovescia
• ChatBot
• Icone social
• Campi Optin
• Pulsante Sì/No

1. Modifica Blocchi di Contenuto

Se desideri personalizzare un blocco di contenuto, fai semplicemente clic su di esso e vedrai l'editor di blocchi aprirsi nella barra delle attività di sinistra.

Ad esempio, puoi sostituire l'immagine caricandone una tua o scegliendone una dalla libreria multimediale esistente. Puoi anche modificare le impostazioni dell'immagine come opacità, larghezza, testo alternativo e altro.

Inoltre, OptinMonster ti consente di aggiungere collegamenti alle tue immagini in modo che gli utenti possano fare clic su di esse per essere reindirizzati alla pagina di tua scelta. C'è un'opzione per far aprire l'URL del collegamento in una nuova finestra e puoi abilitare il monitoraggio dei clic per vedere quante persone fanno clic sull'immagine.

Nello stesso modo, puoi modificare il testo del contenuto nei tuoi banner fluttuanti e modificare anche il pulsante di optin. Tutto quello che devi fare è selezionare l'elemento nella tua anteprima e inserire il tuo testo personalizzato.

Una volta terminate le personalizzazioni dei blocchi di contenuto, fai clic sul pulsante Salva.

2. Configura Impostazioni Campagna

OptinMonster ti consente di modificare le impostazioni della campagna all'interno del builder. Per fare ciò, dovrai fare clic sull'icona Impostazioni in basso a sinistra nel builder della campagna.

Quindi, vedrai le 4 impostazioni principali sul lato sinistro e l'anteprima live della barra fluttuante sul lato destro della pagina. Le impostazioni includono:

• Dettagli Campagna: Ti consente di modificare il nome della campagna, la descrizione e altre informazioni sulla tua barra fluttuante.
• Stile Visualizzazione: Offre tantissime impostazioni di design e stile per abbinare il branding del tuo sito web.
• Impostazioni di Visualizzazione: Scegli il numero di volte in cui visualizzare la tua campagna ai visitatori.
• Impostazioni Barra Fluttuante: Cambia la posizione della tua barra fluttuante da in alto a in basso e viceversa.

Poiché i modelli di OptinMonster hanno un aspetto e funzionano benissimo fin da subito, non avrai bisogno di personalizzarli molto, tranne che per modificare alcuni dettagli per adattarli ai tuoi obiettivi di campagna. Ma puoi facilmente apportare modifiche al design e allo stile, se necessario.

Nell'opzione Stile Visualizzazione, puoi modificare le opzioni generali di stile e design. Le impostazioni di base ti consentono di modificare lo stile, il colore di sfondo, l'immagine, il pulsante di chiusura e altro.

Le impostazioni avanzate ti consentono di personalizzare anche i minimi dettagli come bordi, spaziatura, ombreggiatura e altro.

Per impostazione predefinita, OptinMonster mostra i banner fluttuanti in fondo al tuo sito, ma puoi cambiarlo e spostarlo in alto.

Per fare ciò, vai su Impostazioni Fluttuanti e abilita l'opzione Carica Barra Fluttuante in Alto alla Pagina. 

Non dimenticare di salvare le tue impostazioni una volta terminato.

Ora, impareremo le regole di visualizzazione che puoi impostare per la tua campagna di banner fluttuanti per targettizzare i visitatori. 

Passaggio 4: Imposta Regole di Targeting per Visualizzare il Tuo Banner Fluttuante

Optinmonster offre potenti funzionalità di targeting del pubblico per ottimizzare le conversioni e generare lead dalle tue campagne.

Per aggiungere nuove regole di targeting, dovrai navigare alla scheda Regole di visualizzazione nella parte superiore dell'editor.

Quindi, puoi vedere il set di regole predefinito che visualizza il tuo banner se un visitatore rimane su qualsiasi pagina del tuo sito per 5 secondi. 

Se desideri modificare la regola di visualizzazione, puoi fare clic sul pulsante Modifica o fare clic sulla regola esistente e vedrai l'elenco delle regole di visualizzazione predefinite offerte da OptinMonster. 

Tutte le regole sono organizzate in diverse schede in modo da poter trovare facilmente la regola di targeting per la tua campagna. Alcuni punti salienti includono:

• Distanza di scorrimento: Visualizza solo una volta che un visitatore ha scorrevole una certa profondità nella pagina
• Ora e data: Targetta festività specifiche, giorni della settimana e periodi di tempo per eseguire saldi lampo o offerte a tempo limitato
• Posizione fisica: Interagisci con gli utenti in base alla loro area geografica per localizzare l'offerta della campagna
• Dispositivo del visitatore: Mostra/Non mostrare campagne in base al fatto che un utente sia su desktop o mobile

Per aggiungere una regola, tutto ciò che devi fare è fare clic su di essa. È così semplice!

Non avrai mai bisogno di aggiungere codice o lavorare con impostazioni complesse per raggiungere il tuo pubblico. Successivamente, ti mostreremo come collegare la tua campagna al tuo account email in modo che tutti i tuoi nuovi lead vengano aggiunti automaticamente alla tua lista di contatti.

Passaggio 5: Connettiti al tuo provider di posta elettronica

OptinMonster si integra con tutti i principali servizi di email marketing come Constant Contact, Aweber, ActiveCampaign e ConvertKit.

Quando sincronizzi il tuo account email, puoi raccogliere indirizzi email e inviare email automatiche ai tuoi nuovi iscritti. OptinMonster offre anche opzioni integrate per segmentare i tuoi lead in modo che la tua lista rimanga organizzata e tu possa inviare email pertinenti in base a ciò per cui si sono iscritti.

Per connetterti al tuo provider di posta elettronica, apri la scheda Integrazioni nell'editor della campagna. 

Qui puoi scegliere il tuo provider di posta elettronica e accedere al tuo account. Alcuni provider necessitano di un'API per funzionare, che puoi trovare nelle impostazioni del tuo account email.

Non dimenticare di salvare le tue impostazioni dopo aver configurato la tua integrazione.

Ora sei pronto per pubblicare la tua campagna di banner fluttuante sticky sul tuo sito WordPress

Passaggio 6: Pubblica il tuo banner fluttuante WordPress

Vai alla scheda Pubblica nell'editor e vedrai le opzioni per vedere un'anteprima live della tua campagna. Quando sei pronto, tutto ciò che devi fare è cambiare lo stato in Pubblica.

Dopo aver fatto clic sul pulsante Pubblica, vedrai lo stato della campagna cambiare in 'Pubblicato'. 

Vai alla tua bacheca di WordPress e apri la scheda OptinMonster » Campagne. Assicurati che lo stato sia impostato su Pubblica anche qui.

Ora, quando visiti il tuo sito, dovresti vedere apparire la tua campagna di barra fluttuante in base alle regole di visualizzazione che hai impostato.

E questo è tutto per oggi! Speriamo che questo articolo ti abbia aiutato a imparare facilmente come creare un banner fluttuante sticky per il tuo sito WordPress.

Ora che sai come usare OptinMonster, puoi procedere e creare più campagne ad alta conversione sul tuo sito come popup, slide-in, giochi con ruota dei coupon e altro. 

Successivamente, per generare più lead e conversioni sul tuo sito, vorrai assolutamente leggere questi articoli:

• Come creare una pagina di acquisizione lead in WordPress
• Come creare un popup in WordPress (passo dopo passo)
• Crea una Squeeze Page ad Alta Conversione

Questi post ti mostrano più opportunità per targettizzare i tuoi utenti per farli interagire e iscriversi al tuo brand.