Come creare caselle di avviso in WordPress

Pubblicato: 2023-02-12

Se il tuo sito web ottiene un numero consistente di visitatori, ma le iscrizioni o le conversioni sono inferiori a quanto vorresti, non sei il solo. Ci sono tonnellate di risorse disponibili per aiutarti ad aumentare il tuo traffico, ma fare in modo che quel traffico intraprenda le azioni giuste sul tuo sito è un'altra storia.

Una possibile soluzione è utilizzare una casella di avviso. Questo è uno strumento potente e semplice che può aumentare notevolmente le conversioni sul tuo sito WordPress. Inoltre, è molto facile creare e personalizzare questa funzione.

Sommario
1. Cos'è una casella di avviso?
2. Perché creare una casella di allerta?
3. Creazione di una casella di avviso con un plug-in
3.1. Passaggio 1: scarica un plug-in (come Popup Maker)
3.2. Passaggio 2: crea un popup
3.3. Passaggio 3: configura i trigger per il tuo popup
3.4. Passaggio 4: modella la tua casella di avviso
4. Creazione di una casella di avviso senza plug-in
4.1. Passo 1: Modifica il tuo file header.php
4.2. Passaggio 2: aggiungi CSS personalizzato
5. Migliora il tuo sito con WP Engine

In questo articolo, tratteremo cos'è una casella di avviso e perché dovresti usarne una. Quindi ti mostreremo come creare la tua casella di avviso in WordPress. Immergiamoci!

Cos'è una casella di avviso?

Una casella di avviso è esattamente quello che sembra. È un avviso che appare su un sito Web per informare i visitatori che si è verificato qualcosa. Potresti conoscere meglio questa funzione come "popup".

Le finestre di avviso in WordPress di solito assumono una delle due forme. Potresti vedere un popup che appare sullo schermo o una barra che corre lungo la parte superiore della tua pagina (a volte chiamata "hello bar").

Perché creare una casella di allerta?

Le caselle di avviso vengono in genere utilizzate per notificare (o avvisare) gli utenti di qualcosa di importante che sta accadendo sul tuo sito. Ad esempio, potresti utilizzare una casella di avviso di WordPress per informare i visitatori di una vendita speciale su un prodotto che altrimenti potrebbero non vedere o di una serie di post in primo piano.

Un altro utilizzo molto comune di questa funzione è l'acquisizione degli indirizzi e-mail dei visitatori. Molti plug-in della finestra di avviso di WordPress possono essere impostati per apparire quando un utente sposta il cursore lontano dal sito (per chiudere la scheda o premere il pulsante Indietro, ad esempio).

Questi avvisi "dell'ultimo minuto" possono essere un ottimo modo per acquisire i dettagli di contatto dei visitatori prima che se ne vadano, con il potenziale risultato di una conversione lungo la strada. Questi avvisi possono essere estremamente efficaci: i popup con le migliori prestazioni hanno un tasso di conversione superiore al 9%. In altre parole, vale la pena implementarli.

Creazione di una casella di avviso con un plug-in

Grazie ai plugin di WordPress, creare le tue caselle di avviso è semplice. Ti guideremo attraverso ogni passaggio utilizzando il potente (e gratuito) plug-in Popup Maker.

Passaggio 1: scarica un plug-in (come Popup Maker)

La prima cosa che devi fare è prendere un plugin dedicato. Come accennato in precedenza, il plug-in gratuito Popup Maker è ben recensito ed è una scelta solida.

Per installare questo strumento, vai alla dashboard di WordPress e vai su Plugin > Aggiungi nuovo . Cerca "creatore di popup" e dovrebbe essere la prima voce:

Aggiungi il plug-in per la creazione di pop up in WordPress

Quindi fare clic su Installa ora . Al termine dell'installazione, non dimenticare di attivare il plug-in selezionando Attiva . Tieni presente che mentre Popup Maker stesso è gratuito, alcune funzionalità richiedono un piano premium da utilizzare.

Passaggio 2: crea un popup

Con Popup Maker installato, dovresti vedere una nuova voce nella barra laterale di WordPress che prende il nome dal plugin . Fare clic per aprire un elenco di tutti i popup. All'inizio sarà vuoto, ma stai per rimediare.

Per creare un popup, fai clic su Aggiungi nuovo popup nella parte superiore dello schermo. Questo aprirà l'editor di WordPress:

Aggiungi un nuovo popup in WordPress

Quando visiti questa schermata, verrà visualizzato un tutorial che ti mostra come creare un popup. La prima cosa che ti viene chiesto di fare è inserire un nome, in modo da poter identificare il popup in un secondo momento.

Successivamente, puoi inserire un titolo facoltativo che verrà visualizzato all'interno del popup come titolo. Nel campo dell'editor principale, puoi anche inserire il contenuto che desideri visualizzare nel popup. Se vuoi solo creare un semplice modulo di contatto, puoi anche utilizzare uno shortcode predefinito.

Questi shortcode si trovano sotto un nuovo pulsante con il logo di Popup Maker nella barra degli strumenti:

Il creatore di popup crea codici brevi per WordPress

Fare clic su Modulo di iscrizione per inserire un modulo di contatto di base per l'acquisizione delle e-mail. Il testo per i campi e l'informativa sulla privacy può essere personalizzato facendo clic sul modulo e selezionando il pulsante di modifica. Ci sono una serie di opzioni per stili e layout, oltre al testo.

Passaggio 3: configura i trigger per il tuo popup

Con il tuo modulo popup creato, il passaggio successivo è configurare i suoi trigger. Questi determinano quando viene visualizzata la finestra di avviso.

Nella schermata dell'editor popup, scorri verso il basso fino a Impostazioni popup e seleziona Trigger dall'elenco. Quindi fare clic su Aggiungi nuovo trigger :

Aggiungi un nuovo trigger pop-up in WordPress

Il plug-in Popup Maker di base contiene tre opzioni: Fai clic su Apri , Ritardo/Apertura automatica e Invio modulo . Puoi anche selezionare Exit Intent come trigger se sei su un piano premium: questa è l'opzione da utilizzare se desideri che il popup appaia quando un utente tenta di lasciare il tuo sito.

Puoi anche regolare su quali pagine viene visualizzata la casella di avviso nella scheda Targeting . Assicurati di personalizzare questa impostazione se desideri escludere determinate pagine o tipi di dispositivi dalla visualizzazione dell'avviso.

Passaggio 4: modella la tua casella di avviso

Infine, puoi modificare l'aspetto della tua nuova casella di avviso in modo che corrisponda meglio al tema del tuo sito. Nell'area Impostazioni popup , seleziona Visualizza . Qui puoi modificare la posizione in cui il popup appare sullo schermo (anche come barra superiore), impostarne le dimensioni e la posizione e scegliere uno dei numerosi temi disponibili:

Casella di avviso in stile personalizzato WordPress

Al termine, assicurati di selezionare il pulsante Pubblica per salvare le modifiche e attivare il popup.

Creazione di una casella di avviso senza plug-in

Se preferisci non utilizzare un plug-in, puoi anche creare tu stesso una finestra di avviso utilizzando del codice e un po' di olio di gomito. Dovrai modificare il tuo file header.php e aggiungere un po' di CSS al tuo sito. Per questo esempio, creeremo una barra di avviso nella parte superiore della pagina.

Passo 1: Modifica il tuo file header.php

La prima cosa che devi fare è aggiungere del codice al tuo file header.php . È possibile accedervi utilizzando l'editor dei temi di WordPress. Dalla tua dashboard, vai su Aspetto > Editor del tema . Quindi seleziona Theme Header (header.php) dalla barra laterale a destra:

Come aggiungere codice al file PHP di intestazione in WordPress

Copia e incolla il seguente codice nel file alla fine della sezione <head> :

<div class="alertbar">All items 20% off!</div>

Ecco come dovrebbe apparire il file dopo questa aggiunta:

Esempio di aggiunta di codice PHP in WordPress

Verrà visualizzato il messaggio "Tutti gli articoli scontati del 20%!" nella barra degli avvisi. Puoi personalizzare il testo come preferisci.

Passaggio 2: aggiungi CSS personalizzato

Infine, dovrai utilizzare Cascading Style Sheets (CSS) per modellare il tuo avviso. Puoi aggiungere CSS utilizzando il Customizer di WordPress.

Per fare ciò, vai alla dashboard di WordPress e vai su Aspetto> Personalizza. Questo aprirà il tuo sito nel Customizer. Nella barra laterale, seleziona CSS aggiuntivo . Questo apre una casella di codice in cui è possibile inserire CSS personalizzati.

Incolla il seguente codice nel campo di testo:

.alertbar {

background-color: #A9A9A9;

color: #FFFFFF;

display: block;

line-height: 45px;

height: 50px;

position: relative;

text-align: center;

text-decoration: none;

top: 0px;

width: 100%;

z-index: 100;

}

Ecco come appare l'avviso:

Il codice sopra crea una barra grigio scuro con testo bianco, ma puoi modificare i colori e le dimensioni come preferisci per abbinarli al tuo tema. Al termine, fai clic su Pubblica per salvare le modifiche.

Migliora il tuo sito con WP Engine

Se stai cercando di aumentare le iscrizioni via e-mail o hai bisogno di un modo semplice per informare i visitatori sulle offerte speciali, una casella di avviso è una soluzione elegante ed efficace. Implementarne uno sul tuo sito WordPress può aumentare notevolmente il tasso di conversione.

Puoi implementare una finestra di avviso con un plug-in di WordPress come Popup Maker. Puoi anche codificarne uno tu stesso in modo relativamente semplice con un po' di CSS. In ogni caso, riceverai un avviso personalizzabile progettato per aumentare le iscrizioni e le conversioni.

Se vuoi migliorare ulteriormente il tuo sito, assicurati di dare un'occhiata ai nostri piani di hosting WordPress dedicati!