Come creare una barra di avviso in WordPress (3 modi semplici)

Vuoi aggiungere una barra di avviso al tuo sito WordPress?

Una barra di avviso o barra di notifica è un ottimo modo per informare i visitatori su aggiornamenti importanti, offerte speciali, lanci di nuovi prodotti e altro ancora.

In questo articolo, ti mostreremo come creare una barra di avviso in WordPress con 3 soluzioni semplici.

Perché creare una barra di avviso in WordPress?

Una barra di avviso è un ottimo modo per informare i tuoi visitatori su qualcosa di importante sul tuo sito web. Potrebbe trattarsi di un evento di vendita in corso, un aggiornamento dei tuoi orari di apertura o modifiche ai tuoi servizi.

Puoi anche utilizzare una barra di avviso per informare i visitatori su un'offerta speciale, come un'offerta "compra uno prendi uno gratis". Questa è un'ottima opzione se gestisci un negozio online.

L'utilizzo di una barra di avviso è meglio che inserire semplicemente un annuncio sulla tua homepage. La tua barra di avviso può apparire in modo prominente proprio in cima a ogni pagina del tuo intero sito.

È facile creare una barra di avviso in WordPress. Esamineremo i metodi che utilizzano i migliori plugin per barre di notifica e un metodo manuale utilizzando codice HTML e CSS. Fai semplicemente clic sui collegamenti sottostanti per passare direttamente a ciascuna opzione:

• Metodo 1: Creare una barra di avviso utilizzando OptinMonster
• Metodo 2: Creare una barra di avviso utilizzando Thrive Leads
• Metodo 3: Creare manualmente una barra di avviso utilizzando HTML/CSS personalizzato
• Bonus: Aggiungere messaggi di avviso personalizzati alle pagine di WordPress

Metodo 1: Creare una barra di avviso utilizzando OptinMonster

OptinMonster è il miglior software di ottimizzazione delle conversioni e generazione di lead sul mercato. Aiuta a convertire più visitatori del sito in iscritti e clienti.

OptinMonster offre un generatore di campagne drag-and-drop. Viene fornito con bellissimi popup lightbox, welcome mat, countdown timer e altri overlay dinamici che ti aiutano ad aumentare iscritti e vendite sul tuo sito web.

Puoi anche usare OptinMonster per creare una barra di avviso per il tuo sito web. I loro modelli predefiniti rendono molto facile creare una barra di avviso che abbia un bell'aspetto in pochi minuti.

Innanzitutto, devi visitare il sito web OptinMonster e iscriverti per un account. Avrai bisogno almeno del piano Basic perché include il tipo di campagna Floating Bar.

Successivamente, devi installare e attivare il plugin OptinMonster WordPress. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Questo plugin ti consente di collegare il tuo sito WordPress al software OptinMonster.

Dopo l'attivazione, vedrai la schermata di benvenuto e la procedura guidata di configurazione. Fai clic sul pulsante ‘Connetti il tuo account esistente’.

Successivamente, si aprirà una nuova finestra in cui dovrai connettere il tuo sito WordPress a OptinMonster.

Fai semplicemente clic sul pulsante ‘Connect to WordPress’ per procedere.

Ora puoi seguire le istruzioni sullo schermo per connettere il tuo account OptinMonster.

Quindi, vai semplicemente su OptinMonster » Campagne nella tua bacheca di WordPress. Fai clic sul pulsante ‘Crea la tua prima campagna’.

Questo aprirà il costruttore di campagne di OptinMonster.

Da qui, devi selezionare ‘Barra mobile’ come Tipo di campagna per creare una barra di avviso.

Successivamente, vedrai una scelta di modelli di campagna. Scegli un modello che desideri utilizzare.

Devi solo portare il mouse su di esso e fare clic sul pulsante ‘Usa modello’ per selezionarlo. Utilizzeremo il modello Promo codice coupon per la nostra barra di avviso.

Successivamente, ti verrà chiesto di dare un nome al tuo modello. Una volta dato un nome alla tua campagna, fai clic sul pulsante ‘Inizia a costruire’.

Ora, vedrai l'editor della campagna. Questo è dove puoi progettare la tua barra di avviso.

OptinMonster offre diversi blocchi che puoi semplicemente trascinare e rilasciare sul modello. Ad esempio, puoi aggiungere un'immagine, testo, pulsante e altro alla tua barra di avviso.

Vedrai che la tua barra di avviso appare in basso sullo schermo per impostazione predefinita.

Per spostarla in alto sullo schermo, devi fare clic su 'Impostazioni barra mobile' sul lato sinistro. Successivamente, fai semplicemente clic sul cursore per spostare la barra mobile in cima alla pagina.

Per cambiare il testo sulla barra mobile, fai semplicemente clic sull'area che desideri modificare e digita il testo che preferisci.

Puoi anche cambiare il carattere, la dimensione e il colore del testo, e altro ancora.

Per modificare le impostazioni del conto alla rovescia, seleziona semplicemente il timer.

Quindi procedi e inserisci la data e l'ora di fine desiderate. OptinMonster ti consente anche di scegliere il tipo di conto alla rovescia. Puoi selezionare il tipo 'Statico' se desideri mostrare un timer standard con la data e l'ora di fine specificate.

D'altra parte, c'è un tipo di conto alla rovescia 'Dinamico'. Il timer funzionerà in base al comportamento di ciascun utente sul tuo sito. Il conto alla rovescia è impostato separatamente per ogni visitatore del tuo sito web.

Una volta che sei soddisfatto del design della tua barra di avviso, non dimenticare di fare clic sul pulsante 'Salva' in cima allo schermo.

Successivamente, devi andare alla scheda 'Regole di visualizzazione' per selezionare quando e dove la tua barra di avviso verrà visualizzata sul tuo sito. La regola predefinita è che la tua barra di avviso venga visualizzata dopo che il visitatore è rimasto sulla pagina per 5 secondi.

Cambieremo questo a 0 secondi in modo che la barra di avviso appaia istantaneamente. Per fare ciò, basta cambiare il valore 'sec' a 0.

Oltre a ciò, puoi anche selezionare dove apparirà la barra degli avvisi. Puoi usare l'impostazione predefinita, che è 'il percorso URL corrente è qualsiasi pagina'. In questo modo, la tua barra degli avvisi apparirà su tutte le pagine del tuo sito web WordPress.

Quindi, fai clic sul pulsante 'Passo successivo' per modificare le impostazioni di Azione. Puoi lasciare le impostazioni 'mostra la visualizzazione della campagna' come Optin e selezionare se desideri riprodurre un effetto sonoro quando appare la barra degli avvisi.

Dopo aver apportato le modifiche, fai clic ancora una volta sul pulsante 'Passo successivo'.

Qui vedrai un riepilogo delle tue regole di visualizzazione. Puoi apportare modifiche e aggiustamenti finali alla tua campagna di barre degli avvisi.

Una volta soddisfatto, fai semplicemente clic sul pulsante 'Salva' in cima allo schermo.

Dopodiché, puoi andare alla scheda Pubblica in alto e cambiare lo Stato di Pubblicazione in 'Pubblica'. Una volta fatto, dovrai fare clic sul pulsante 'Salva' e chiudere il costruttore della campagna.

Successivamente, vedrai le Impostazioni di Output della Campagna.

Il passo finale è attivare la campagna sul tuo sito web. Cambia semplicemente lo Stato da 'In attesa' a 'Pubblicato'.

Non dimenticare di fare clic sul pulsante 'Salva modifiche' al termine.

Ora, visita semplicemente qualsiasi pagina del tuo sito web e vedrai la tua campagna in azione.

Metodo 2: Creare una barra di avviso utilizzando Thrive Leads

Un altro modo per aggiungere barre di avviso al tuo sito web WordPress è utilizzare Thrive Leads. Fa parte della suite Thrive Themes e ti aiuta a generare lead tramite barre di avviso, lightbox, popup a comparsa e altro ancora.

Per prima cosa, dovrai visitare il sito web di Thrive Themes e iscriverti per un account. Fai semplicemente clic sul pulsante 'Inizia ora' per iniziare.

Successivamente, dovrai installare e attivare il plugin Thrive Product Manager sul tuo sito web. Per maggiori dettagli, consulta la nostra guida su come installare un plugin WordPress.

Puoi trovare il plugin Thrive Product Manager nella tua area account.

Una volta installato il plugin, vai semplicemente alla pagina Product Manager dalla tua area di amministrazione di WordPress.

Da qui, fai clic sul pulsante 'Accedi al mio account'.

Dopo aver effettuato l'accesso al tuo account, vedrai diversi plugin e strumenti offerti da Thrive Themes.

Seleziona semplicemente il plugin Thrive Leads e quindi fai clic sul pulsante 'Installa prodotti selezionati' in basso.

Quando Thrive Leads sarà pronto per l'uso, vedrai un messaggio di successo.

Puoi quindi fare clic sul pulsante ‘Vai alla dashboard di Thrive Themes’.

Successivamente, dovrai andare su Dashboard di Thrive » Thrive Leads dal pannello di amministrazione di WordPress.

Accanto all'intestazione Gruppi di lead, fai semplicemente clic sul pulsante ‘Aggiungi nuovo’.

Dopodiché, si aprirà una finestra popup.

Puoi inserire un nome per il tuo nuovo gruppo di lead e fare clic sul pulsante ‘Aggiungi gruppo di lead’.

Successivamente, dovrai creare un nuovo modulo di iscrizione.

Fai clic sul pulsante ‘Aggiungi nuovo tipo di modulo di iscrizione’.

Dopodiché, Thrive Leads ti chiederà di selezionare un tipo di modulo.

Puoi selezionare il tipo ‘Nastro’ per aggiungere una barra di avviso al tuo sito web.

Dopo aver aggiunto il tipo di modulo di iscrizione Nastro, dovrai aggiungere un modulo.

Fai semplicemente clic sull'opzione ‘Aggiungi un modulo’ sotto Gruppi di lead.

Nella schermata successiva, puoi scegliere tra uno qualsiasi dei tuoi moduli esistenti.

Poiché è la prima volta che crei un modulo, fai clic sul pulsante ‘Crea modulo’.

Ora, vedrai apparire una finestra popup sul tuo schermo.

Puoi inserire un nome per il tuo modulo e fare clic sul pulsante ‘Crea modulo’.

Il tuo modulo verrà aggiunto al gruppo di lead Nastro.

Per modificare il design del modulo, fai semplicemente clic sull'icona della matita.

Successivamente, Thrive Leads mostrerà diversi modelli tra cui scegliere.

Seleziona semplicemente un modello e fai clic sul pulsante ‘Scegli modello’ in basso.

Questo avvierà il generatore visivo con un'anteprima dal vivo, dove puoi personalizzare la tua barra di avviso.

Ad esempio, puoi selezionare il testo nel modello e modificarlo secondo le tue esigenze. Oppure fai clic sull'immagine nella barra di avviso e cambiala.

Una volta terminate le modifiche, fai clic sul pulsante ‘Salva lavoro’ in basso.

Ora puoi chiudere l'editor visivo e tornare alle impostazioni del modulo. Qui vedrai le opzioni per impostare il trigger della barra di avviso, la frequenza di visualizzazione e la posizione.

Per impostazione predefinita, la barra di avviso apparirà in alto quando una pagina viene caricata. Tuttavia, puoi modificare queste impostazioni.

Ad esempio, se fai clic sull'opzione Trigger, vedrai altre opzioni, come la visualizzazione della barra di avviso dopo un certo tempo, quando un utente scorre verso il basso di una certa quantità o quando un utente raggiunge il fondo della pagina.

Oltre a ciò, puoi anche modificare la frequenza di visualizzazione. La barra di avviso apparirà sempre per impostazione predefinita a tutti gli utenti.

Tuttavia, puoi modificare questo e visualizzare la tua barra di avviso allo stesso visitatore dopo un certo numero di giorni.

Successivamente, puoi tornare alla pagina Thrive Leads dalla tua bacheca di WordPress.

Dopo di che, fai semplicemente clic sull'icona a forma di ingranaggio per aprire le Impostazioni di visualizzazione.

Da qui, puoi scegliere su quali post e pagine apparirà la barra di avviso.

Ad esempio, puoi mostrarlo solo nella home page o scegliere tutti i post e le pagine. Esiste anche un'opzione per escludere alcune pagine e post dalla visualizzazione del tuo messaggio di avviso.

Al termine, fai semplicemente clic sul pulsante ‘Salva e chiudi’.

L'ultimo passaggio consiste nel fare clic sugli interruttori per visualizzare la barra di avviso sui dispositivi desktop e mobili.

Una volta fatto, la tua barra di avviso è ora pronta per raccogliere gli indirizzi email degli utenti e costruire la tua lista email.

Puoi visitare il tuo sito web per vederlo in azione.

Puoi vedere la nostra recensione completa di Thrive Themes per maggiori dettagli.

Metodo 3: Creare manualmente una barra di avviso utilizzando HTML/CSS personalizzato

E se non vuoi usare OptinMonster o Thrive Leads? In questo metodo, ti mostreremo come creare una barra di notifica utilizzando codice HTML e CSS.

Per prima cosa, dovrai copiare il seguente codice CSS personalizzato per la barra di avviso:

<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>

Un modo semplice per aggiungere codice CSS al tuo sito web è utilizzare WPCode. È il miglior plugin per snippet di codice per WordPress che ti aiuta ad aggiungere codice personalizzato al tuo sito web.

Nota: WPCode è uno dei plugin di WPBeginner. L'abbiamo creato per rendere davvero facile aggiungere script, codice HTML e altro alle pagine del tuo sito web. Viene fornito con funzionalità come una libreria di snippet di codice integrata, logica condizionale, pixel di conversione e altro ancora.

Per prima cosa, dovrai installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida su come installare un plugin di WordPress.

Dopo l'attivazione, devi andare su Code Snippets » + Add Snippet dalla dashboard di WordPress e selezionare l'opzione 'Add Your Custom Code (New Snippet)'.

Successivamente, inserisci un titolo per il tuo snippet in alto e incolla il codice CSS nell'area Code Preview.

Dovrai anche cambiare il Code Type nell'opzione 'CSS Snippet'.

Successivamente, puoi scorrere verso il basso fino alla sezione Insertion. Qui puoi scegliere dove verrà eseguito il codice.

Poiché vogliamo che la barra di avviso appaia su tutto il sito web, puoi utilizzare il metodo predefinito 'Auto Insert'. Puoi anche mantenere l'impostazione 'Run Everywhere'.

Una volta fatto, puoi fare clic sul pulsante 'Save Snippet' in alto.

Dovrai anche fare clic sull'interruttore per attivare il codice.

Successivamente, vai su Code Snippets » Headers & Footer nella tua bacheca di amministrazione di WordPress.

Copia e incolla semplicemente la seguente riga di codice HTML nella casella 'Header':

<div class="alertbar">We are currently closed due to Covid-10.</div>

Ecco come dovrebbe apparire quel codice nella casella 'Header' in WPCode:

Puoi cambiare il testo dell'avviso in qualsiasi altra cosa desideri. Non dimenticare di fare clic sul pulsante 'Save Changes' in cima alla pagina una volta terminato.

Ora, puoi visitare il tuo blog WordPress per vedere la barra di avviso. Dovrebbe apparire in cima a ogni pagina in questo modo:

Suggerimento: In alcuni temi WordPress, la barra degli avvisi potrebbe sovrapporsi al menu. È possibile modificare l'altezza della barra a 40px o 30px per evitarlo. Sarà inoltre necessario ridurre l'interlinea di conseguenza in modo che il testo rimanga centrato verticalmente nella barra.

Bonus: Aggiungere messaggi di avviso personalizzati alle pagine di WordPress

Se desideri aggiungere messaggi di avviso personalizzati a diverse parti del tuo sito web, come pagine prodotto, pagine di checkout e pagine del negozio, puoi utilizzare SeedProd. È il miglior costruttore di siti web e costruttore di landing page per WordPress.

Il plugin offre un costruttore drag-and-drop per creare un tema personalizzato e pagine del sito web senza modificare il codice. Offre anche un blocco Alert che puoi posizionare ovunque sul tuo sito.

Questo blocco di avviso può avvisare i clienti che le tue scorte stanno per esaurirsi, che articoli particolari sono in saldo o altri avvisi urgenti.

Puoi semplicemente aggiungere il blocco di avviso alla tua pagina e poi aggiungere un titolo e una descrizione. Il plugin ti consente anche di aggiungere contenuti dinamici, che ti permettono di inserire date e altri parametri di query.

Ci sono anche più opzioni di personalizzazione per il blocco di avviso. Ad esempio, puoi cambiarne l'allineamento, regolare la dimensione del carattere e modificare l'icona.

Per saperne di più sull'uso di SeedProd, puoi consultare questa guida su come creare pagine personalizzate in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come creare una barra di avviso in WordPress. Potresti anche voler consultare la nostra guida sui migliori page builder drag and drop per WordPress per aiutarti a personalizzare ulteriormente il tuo sito e sui migliori plugin WooCommerce per far crescere le vendite del tuo negozio.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.