Come aggiungere un popup ai siti Web WordPress liberamente e rapidamente

Quando visiti un sito web, hai mai visto un'immagine o un messaggio mostrato improvvisamente sullo schermo? Questo è il popup o la finestra di notifica del sito web.

Popup è una strategia di marketing popolare ed efficace, utilizzata da molti business runner e proprietari di siti web. Per aggiungere un popup del genere a WordPress, puoi utilizzare un plug-in gratuito per renderlo semplice e veloce. Anche se non sei un esperto, ci vogliono solo 10 minuti per seguire le nostre istruzioni.

Perché dovresti usare un popup su un sito web aziendale?

L'immagine sotto è un esempio per il popup di un sito web aziendale. Sembra fantastico, vero?

Popup non è solo sbalorditivo (se riesci a progettarne uno ben abbinato e attraente) ma ha anche molti altri vantaggi come:

• Promuovere informazioni importanti, campagne di vendita e marketing,...
• Call to action, aumenta il tasso di conversione
• Genera lead

Aggiungi un popup a WordPress con il plug-in Popup Builder

Per aggiungere un popup al tuo sito Web WordPress, puoi assumere una società di web design credibile o un programmatore. Tuttavia, per risparmiare tempo e denaro, il plugin è l'opzione migliore. Tra i numerosi plug-in popup disponibili, Popup Builder potrebbe essere il più facile da usare ed efficace.

È un plug-in gratuito e disponibile su wordpress.org, quindi devi solo installare e attivare il plug-in direttamente nella Dashboard.

Al termine, seguire questi passaggi di seguito.

Passaggio 1: scegli il tipo di popup

Ora il sottomenu Popup Builder apparirà sulla Dashboard. Vai lì, fai clic su Aggiungi notizie e scegli uno dei 4 tipi di popup forniti.

Per una migliore illustrazione, l'immagine sotto mostra come i 4 tipi di popup forniti da questo plugin vengono visualizzati sul front-end.

Dopo aver scelto il tipo desiderato, vai al passaggio successivo.

Passaggio 2: aggiungi contenuto al popup

Innanzitutto, dai un nome al popup per gestirlo più facilmente.

Diversi tipi di popup richiedono contenuti diversi. Scaviamo in ogni tipo.

Aggiungi contenuto ai popup di Facebook

Nell'interfaccia per creare popup di Facebook, devi inserire queste informazioni:

1. Il messaggio che compare nel popup. Dovresti usare una frase di invito all'azione per incoraggiare i lettori a interagire. Inoltre, dovresti aggiungere immagini, banner in modo che sia più sorprendente.
2. Inserisci l'URL di Facebook.
3. Scegli un layout per il popup per un capriccio. Fondamentalmente, questi layout non sono così diversi. Quindi, puoi provarli e scegliere il tuo preferito.
4. Se lo desideri, fai clic qui per nascondere il pulsante di condivisione.

E questo è quello che ho:

Aggiungi contenuto ai popup di immagini

Qui devi solo caricare l'immagine o inserire il link dell'immagine. Questo plugin supporta JPG, PNG e GIF.

Questo è un bellissimo banner che ho realizzato da me per la campagna del Black Friday del mio sito:

Aggiungi contenuto ai popup HTML

Aggiungere contenuto al popup HTML è come scrivere un post nell'editor Gutenberg di WordPress. Puoi inserire immagini, video, tabelle, pulsanti, citazioni, … o qualsiasi altro contenuto supportato dall'editor di WordPress. L'interfaccia è un po' simile all'editor Gutenberg, quindi è abbastanza amichevole e nativa.

E questo è il mio popup HTML sul front-end:

Aggiungi contenuto ai popup di abbonamento

Qui abbiamo molti contenuti da compilare e personalizzare per il tuo modulo di iscrizione. Tuttavia, ciò che devi notare di più sono i campi del modulo, come Nome , Cognome , E-mail e personalizzare il loro Segnaposto e Campo obbligatorio .

Successivamente, scorri verso il basso e personalizza la visualizzazione del modulo in termini di Opzioni di sfondo del modulo, Stile degli input, Stili del pulsante Invia per renderlo più sorprendente e adatto al sito web.

In particolare, nella sezione Dopo l'abbonamento riuscito , scegli con tatto un messaggio adatto o le informazioni che desideri mostrare ai tuoi utenti dopo che si sono iscritti. Ad esempio, puoi visualizzare note di ringraziamento, coupon, regali, buoni regalo, … per questi abbonati. In questo modo, puoi trascinare le impressioni degli utenti e migliorare la loro esperienza.

Ad esempio, questo è il popup dell'e-mail di abbonamento. Una volta inviato, mostrerò una notifica sulla campagna di vendita del Black Friday, esortando i clienti a fare shopping.

Vai a Generatore di popup > Tutti gli abbonati per gestire gli abbonati.

Puoi anche inviare e-mail agli abbonati nella scheda Newsletter .

Dopo aver aggiunto il contenuto, scorrere verso il basso. Vedrai molte altre opzioni di impostazione. Analizziamo ogni opzione nei passaggi 4,5,6.

Passaggio 3: impostare la posizione di visualizzazione e le condizioni del popup

Imposta la posizione di visualizzazione

Nella sezione Regole di visualizzazione popup, dobbiamo regolare dove il popup verrà/non verrà visualizzato.

Puoi scegliere Ovunque per mostrarlo su ogni pagina, post, tag o personalizzazione o mostrarlo in un determinato luogo che desideri. Puoi anche fare clic sul suggerimento (?) per ottenere maggiori dettagli.

Ad esempio, scelgo la posizione come una determinata pagina, scelgo "è" per visualizzarla e scelgo la pagina di visualizzazione come "Home" . Inoltre, puoi aggiungere altre località scegliendo Aggiungi .

Imposta le condizioni di visualizzazione

Nella sezione Eventi popup, scegli l'ora in cui viene visualizzato il popup (quando il sito Web è stato caricato per alcuni secondi, quando gli utenti fanno clic da qualche parte, ecc.). Questo plugin supporta le seguenti condizioni di visualizzazione:

• Al caricamento : il popup verrà visualizzato automaticamente dopo alcuni secondi (è possibile aggiungere il numero di secondi nella scheda Ritardo ) da quando il sito ha terminato il caricamento.

• Impostato dalla classe CC : consente agli utenti di fare clic su alcuni componenti per abilitare il popup. Questo componente sarà basato sull'ID di esso. Questa parte è piuttosto complicata, quindi è meglio leggere attentamente la documentazione.

• Al clic : simile alla sezione Set by CSS class ma non è necessario utilizzare l'ID del popup per installare il "pulsante" per abilitarlo.

Invece, se scegli Predefinito nella sezione Opzioni , il plug-in creerà una classe predefinita per il popup nella sezione Classe predefinita come di seguito.

Se scegli Custom CSS , inserisci la classe che hai creato tu stesso nella sezione Custom Class .

Successivamente, aggiungi la classe del popup nel CSS del componente che desideri.

Ad esempio, in questo post, ho aggiunto un pulsante e la classe che desidero nella sezione Classi CSS aggiuntive .

Questo è il risultato sul front-end:

• Clic al passaggio del mouse : quando si passa con il mouse su un componente, verrà visualizzato il popup. Puoi fare lo stesso della sezione Al clic .

Passaggio 4: personalizza il display del popup

Dopo il passaggio 3, hai avuto un popup di base. Ma se vuoi che sia più sorprendente, scorri verso il basso fino alla sezione Design . Qui puoi personalizzare alcuni componenti come interfaccia, sovrapposizione, sfondo per renderlo perfetto come il tuo preferito.

Inoltre, nella sezione Dimensioni , regola la sua larghezza e lunghezza scegliendo la modalità Personalizzata o scegliendo la modalità Reattiva per far sì che le sue dimensioni corrispondano automaticamente al suo contenuto.

Passaggio 5: personalizza altre impostazioni avanzate

Queste impostazioni avanzate consentono di configurare la visualizzazione e l'interazione con i popup, … in modo più dettagliato.

Ad esempio, puoi scegliere come chiudere la finestra popup nella sezione Chiudi impostazioni . Ci sono molti modi per chiuderlo, come premere Esc o aggiungere un pulsante di chiusura, … Scegli uno o più, sta a te.

Se vuoi aggiungere effetti di chiusura e apertura popup, o regolare i tempi in cui viene mostrato per un utente, ... scorri verso il basso fino alla sezione Opzioni popup. Devi solo fare clic sull'opzione che desideri e il gioco è fatto.

Si noti che quando si utilizza il plug-in gratuito Popup Builder, le sezioni denominate Unlock Option colorate in giallo come l'immagine sottostante sono le funzionalità della versione pro. Devi acquistare più estensioni di questo plugin per usarle.

Infine, nella barra laterale, c'è un'opzione molto interessante: aggiungere un pulsante fisso sul sito Web per mostrare il popup quando si fa clic. Questo pulsante mobile è davvero conveniente, consentendo alle persone di vederlo sempre e ovunque. Il suo design è anche piacevole e non fastidioso.

Questo è il pulsante mobile sul sito Web:

Oppure puoi disabilitarlo facendo clic su Disabilita .

Infine, fai clic su Pubblica per farlo.

Quindi hai completato il tuo popup dopo 6 passaggi dalle impostazioni di base a quelle avanzate. Hai fatto un buon lavoro!

Ultime parole

Come puoi vedere, aggiungere un popup a WordPress non è molto complicato. Devi solo essere un po' paziente quando personalizzi il suo display, questo è tutto il duro lavoro!

Inoltre, ci sono molte cose per aumentare il tasso di conversione del sito web. Se vuoi creare una pagina di destinazione efficace, è meglio leggere altri articoli su come creare una pagina di destinazione ad alta conversione o su come creare una pagina di prodotto.

Buona fortuna!