Come Creare una Barra Mobile “Sticky” in WordPress

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

Con un banner o una barra mobile sticky, puoi visualizzare un messaggio nella parte superiore o inferiore del tuo sito web senza disturbare l'esperienza dell'utente. Questo ti permette di promuovere iscrizioni alla newsletter, prodotti, offerte lampo, account 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 mobile WordPress. Prima di iniziare il tutorial, chiariamo cos'è esattamente una barra mobile sticky.

Cos'è una Barra Mobile Sticky?

Un banner fluttuante fisso rimane in alto o in basso sulla tua pagina web mentre i 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 fisse 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 usare le barre fluttuanti per:

• Migliorare le tue vendite e i tuoi ricavi tramite vendite lampo, sconti e offerte
• 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 fisse a tuo vantaggio. Detto questo, impariamo come creare un banner fluttuante di WordPress accattivante per il tuo sito.

Creare un banner fluttuante fisso 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 utilizzando il nostro strumento preferito per banner fluttuanti chiamato OptinMonster.

OptinMonster è lo strumento di generazione lead numero 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 costruttore 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 impostare 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 di seguire i tuoi lead per migliorare l'engagement. 

In aggiunta, OptinMonster monitora 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 hai guadagnato 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 iscriverti a 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 bacheca 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 la possibilità di collegare il tuo account appena creato.

Tieni presente che se hai effettuato l'accesso 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 bacheca di amministrazione di WordPress. 

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

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

Questo avvierà la libreria di modelli composta da splendidi modelli di banner fluttuanti tra cui puoi scegliere. 

Qui puoi passare il mouse sopra qualsiasi modello per visualizzare in anteprima la barra fluttuante fissa 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.

Si aprirà una finestra popup in cui puoi dare un nome alla tua campagna di barra fluttuante. 

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 fissa sulla destra. Qui puoi facilmente trascinare e rilasciare i blocchi richiesti sul tuo banner.

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

Alcuni dei blocchi di elementi utili sono: 

• Countdown
• 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 caricando la tua o scegliendone una dalla libreria multimediale esistente. Puoi anche modificare le impostazioni dell'immagine come opacità, larghezza, testo alternativo e altro.

Insieme a ciò, 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.

Allo stesso modo, puoi cambiare il testo del contenuto nei tuoi banner fluttuanti e modificare anche il pulsante di opt-in. 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 le Impostazioni della 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 del 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: Ti 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 mostrare la tua campagna ai visitatori.
• Impostazioni Barra Fluttuante: Cambia la posizione della tua barra fluttuante da in basso a in alto 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 cambiare 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 basso sul tuo sito, ma puoi cambiarlo e spostarlo in alto.

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

Non dimenticare di salvare le tue impostazioni una volta terminate.

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

Passaggio 4: Imposta le 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 nella scheda Regole di Visualizzazione in cima all'editor.

Quindi, vedrai 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: Targettizza festività specifiche, giorni della settimana e periodi di tempo per eseguire saldi flash 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 è cliccarci sopra. È semplicissimo!

Non avrai mai bisogno di aggiungere codice o lavorare con impostazioni complesse per targettizzare 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: Connetti al tuo provider email

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 email, apri la scheda Integrazioni nell'editor della campagna. 

Qui puoi scegliere il tuo provider email 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 con 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 cliccato sul pulsante Pubblica, vedrai lo stato della campagna cambiare in 'Pubblicato'. 

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

Ora, quando visiti il tuo sito, dovresti vedere la tua campagna con barra fluttuante apparire secondo le 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 altre campagne ad alta conversione sul tuo sito come popup, slide-in, giochi con ruota della fortuna e altro ancora. 

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

• Come creare una pagina di cattura 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.