Come creare popup WordPress in Gutenberg

Ti è mai capitato di navigare su internet e di essere improvvisamente accolto da un popup? Una finestra pop-up che appare con sovrapposizione mentre stai visitando una pagina web. 

A volte questi popup possono essere super utili, offrendoti informazioni utili o grandi affari. Oppure possono risultare un po' fastidiosi e invadenti.

Ma dal punto di vista del proprietario di un sito web, i popup si sono rivelati un mezzo potente per catturare l'attenzione, promuovere offerte e generare lead.

Ecco perché è fondamentale creare i popup giusti che coinvolgano l'utente senza però infastidirlo.

Per aiutarti, ti guideremo passo dopo passo nella configurazione di popup efficaci, su misura per gli obiettivi del tuo sito web. Alla fine di questa guida, avrai il modo più semplice per creare popup che non solo attraggono l'attenzione, ma migliorano anche l'esperienza utente.

Cos'è un popup sul sito web?

I popup sono piccole finestre che appaiono su una pagina web, in genere come overlay, per catturare l'attenzione dell'utente. Queste finestre possono includere varie forme di contenuto come annunci promozionali, offerte di abbonamento, notifiche o call-to-action. 

I popup spesso richiedono interazione, come entrare o uscire da una pagina, cliccare su un pulsante per chiuderli o compilare un modulo. Sono progettati per distinguersi dal resto della pagina per sollecitare un coinvolgimento immediato.

Quando vengono solitamente utilizzati i popup sui propri siti web?

I popup sono più comunemente utilizzati per raggiungere obiettivi specifici correlati al coinvolgimento e alla conversione degli utenti. Ecco alcuni scenari comuni in cui le persone utilizzano i popup sui loro siti Web:

• A catturare lead O creare una mailing list con un abbonamento.
• Promuovi offerte esclusive, sconti o offerte a tempo limitato.
• Annunciare nuovi prodotti, funzionalità o aggiornamenti importanti.
• Per fornire avvisi importanti per avvisare i visitatori. 
• Chiedi ai visitatori di Registrati per un account sul sito web.
• A raccogliere feedback O condurre sondaggi tra il pubblico.
• Spettacolo consenso ai cookie O politica sulla riservatezza notifica.
• Guida gli utenti verso iscriviti agli eventi, webinar o workshop.

Questi utilizzi strategici dei popup contribuiscono ad aumentare il coinvolgimento e la conversione degli utenti, ma è essenziale implementarli con attenzione per evitare di compromettere l'esperienza dell'utente.

Come creare popup WordPress in Gutenberg

Passiamo ora alla parte principale di questa guida tutorial su come aggiungere un popup su WordPress utilizzando l'editor a blocchi Gutenberg.

L'editor Gutenberg predefinito non è dotato di un generatore di popup. Quindi devi scegliere un plugin popup di WordPress per l'editor a blocchi. Per questo tutorial, abbiamo utilizzato il plugin GutenKit.

GutenKit è un plugin di editor a blocchi che viene fornito con un Popup Builder progettato specificamente per Gutenberg. Con questo popup builder, creare popup in Gutenberg è ora più facile che mai.

Ecco la procedura dettagliata per creare un popup Gutenberg nell'editor di WordPress.

Installa e attiva un plugin popup di WordPress per Gutenberg

Per installare GutenKit Popup Builder, devi avere il plugin GutenKit block editor installato sul tuo sito web. Ecco i plugin e i temi richiesti per usare popup builder senza problemi sul tuo sito web.

☑️Plugin prerequisiti:

• GutenKit Versione gratuita
• O, Versione GutenKit Pro

☑️ Tema: Tema Hello Blocks o qualsiasi tema a blocchi di WordPress.

Dopo aver installato il plugin GutenKit, vai su GutenKit > Moduli. Trova il Generatore di popup e fare clic su Installare pulsante. Con il Popup Builder attivato sei pronto per iniziare a creare popup WordPress in Gutenberg per il tuo sito WordPress.

Progetta popup per WordPress utilizzando qualsiasi blocco Gutenberg

Ora vai a GutenKit > Visualizzazione a comparsa e fare clic Crea nuovo popup per aprire l'editor in cui creerai il popup.

Quindi puoi usare il blocco per creare il popup nell'editor.

Con GutenKit Popup Builder puoi utilizzare qualsiasi blocco Gutenberg per progettare il tuo popup. 

Puoi utilizzare oltre 65 blocchi GutenKit e oltre 18 moduli per progettare un popup moderno e sofisticato per il tuo sito.

Ciò include blocchi come titoli, paragrafi, pulsanti, immagini e persino video nel tuo popup, rendendolo altamente personalizzabile. 

Crea popup Gutenberg con modelli predefiniti

D'altro canto, invece di partire da zero, puoi risparmiare tempo e fatica utilizzando i design già pronti. Con oltre 500 modelli e template disponibili nella Template Library di GutenKit, puoi creare rapidamente popup dall'aspetto professionale in pochi minuti.

Per importare i progetti già pronti

1. Editor di creazione popup per Gutenberg.
2. Clicca sul libreria di modelli pulsante.
3. Scegli un modello dalla biblioteca.

Dopodiché, puoi modificare il contenuto e personalizzare gli stili per allinearli alla tua campagna. È un modo rapido e senza problemi per ottenere fantastici popup e farli funzionare!

Utilizza condizioni intelligenti per visualizzare i popup di Gutenberg sul tuo sito web

Hai la flessibilità di scegliere su quali pagine vuoi che appaiano i tuoi popup. Vai semplicemente all'editor di blocchi popup e, sotto la scheda "Contenuto", vedrai un'opzione denominata "Condizioni". 

Da lì, basta cliccare su  + Aggiungi condizione pulsante e imposta le regole per dove vuoi che il tuo popup venga visualizzato. È così facile!

Con il generatore di popup GutenKit è possibile impostare le condizioni di inclusione ed esclusione.

• Includi condizione: Con le condizioni Includi puoi aggiungere popup all'intero sito web, a pagine specifiche o alle pagine di archivio.
• Escludi condizione: Puoi decidere dove non mostrare i popup sul tuo sito tramite le condizioni di esclusione.

Ecco come puoi visualizzare i popup sul tuo sito web utilizzando condizioni intelligenti:

Mostra i popup di Gutenberg sull'intero sito web

Per mostrare il popup su tutte le pagine del tuo sito web, 

👉 Passo 1: Aggiungere una nuova condizione per i popup.

👉 Passo 2: Selezionare la condizione “Includi”.

👉 Passaggio 3: Seleziona "Intero sito" per mostrare il popup su ogni pagina.

Disattivare la visualizzazione dei popup su pagine specifiche

Potrebbero esserci momenti in cui non vuoi che i popup appaiano su determinate pagine. Puoi farlo con Escludere condizioni. 

👉 Passaggio 1: Aggiungere una nuova condizione per i popup.

👉 Passaggio 2: Selezionare la condizione “Escludi”.

👉 Passaggio 3: Seleziona “Singolare”.

👉 Passaggio 4: Seleziona una pagina per escludere la visualizzazione dei popup.

Visualizza i popup solo su pagine specifiche

Se vuoi realizzare campagne più mirate, potresti voler visualizzare dei popup su determinate pagine del tuo sito web.

👉 Passaggio 1: Aggiungere una nuova condizione per i popup.

👉 Passaggio 2: Selezionare la condizione “Includi”.

👉 Passaggio 3: Seleziona “Singolare”.

👉 Passaggio 4: Seleziona una pagina per visualizzare un popup.

Inoltre, per essere sicuri che il popup non venga visualizzato su altre pagine, puoi aggiungere un escludere condizionee seleziona l'intero sito per impedire che il popup venga visualizzato sull'intero sito web.

Popup di WordPress nelle pagine di archivio

Puoi anche visualizzare i popup su qualsiasi pagina di archivio di WordPress impostando una condizione. Per questo, Aggiungi condizione > Includi > Archivia > Seleziona archivio pagina.

D'altro canto, se vuoi impedire che i popup vengano visualizzati su una particolare pagina di archivio, puoi impostare una condizione di esclusione. Segui semplicemente gli stessi passaggi: Per questo, Aggiungi condizione > Escludi > Archivia > Seleziona archivio pagina.

Decidi come e quando attivare i popup di Gutenberg

Hai il controllo completo su come i popup appaiono sulle pagine del tuo sito web. Puoi decidere se i popup appariranno al caricamento della pagina, all'intenzione di uscita o dopo un'interazione.

Nel Popup Builder GutenKit, puoi selezionare come i popup verranno attivati sul tuo sito web da Contenuto > Eventi aperti sull'editor a blocchi.

Questo ti aiuta a sviluppare diversi tipi di popup su Gutenberg. Ecco i tipi di popup di WordPress su Gutenberg puoi progettare con GutenKit Popup Builder.

1. Popup di immissione

• Grilletto: Si attiva immediatamente quando la pagina viene caricata sul browser dell'utente.
• Scopo: Coinvolge gli utenti non appena accedono al sito web.
• Caso d'uso: Accoglie gli utenti con uno sconto, annunciando un evento o chiedendo subito un abbonamento.

💡 Come si attiva? Seleziona l'evento aperto come "Al caricamento della pagina"

2. Popup di Exit-Intent

• Grilletto: Si attiva quando l'utente intende chiudere la scheda o il browser.
• Scopo: Cattura gli utenti prima che abbandonino il sito.
• Caso d'uso: Offre uno sconto, un abbonamento alla newsletter o un'offerta speciale.

💡 Come si attiva? Seleziona l'evento aperto come "Intento di uscita sulla pagina"

3. Popup di attivazione dello scorrimento

• Grilletto: Attivato quando l'utente scorre una pagina verso il basso.
• Scopo: Offre un'offerta promozionale o chiede un feedback dopo che l'utente ha esplorato una determinata parte della pagina.
• Caso d'uso: Promuove contenuti aggiuntivi, un modulo di registrazione o un'offerta a tempo limitato.

💡 Come si attiva? Seleziona l'evento aperto come "Pagina Scorrevole”.

Dopo di che imposta “Avanzamento scorrimento pagina per decidere in quale punto apparirà il popup mentre l'utente scorre la pagina verso il basso.

4. Popup di inattività dell'utente

• Grilletto: Quando l'utente è inattivo per un certo periodo di tempo.
• Scopo: Coinvolgere nuovamente gli utenti rimasti inattivi sul sito per un certo periodo di tempo.
• Caso d'uso: Ricorda agli utenti le offerte speciali, li spinge a compiere azioni o suggerisce articoli che potrebbero aver lasciato nel carrello.

💡 Come si attiva? Seleziona l'evento aperto come "Dopo l'inattività”.

Ora imposta il Tempo di inattività dell'utente in pochi secondi per decidere quando visualizzare il popup dopo che l'utente è diventato inattivo.

5. Popup al clic

• Grilletto: Attivato dall'interazione dell'utente con una sezione della pagina.
• Scopo: Visualizza il contenuto quando l'utente clicca su un elemento specifico della pagina (ad esempio un pulsante o un'immagine).
• Caso d'uso: Spesso utilizzato per dettagli sui prodotti, invii di moduli aggiuntivi o riproduzioni video.

💡 Come si attiva? Seleziona l'evento aperto come "Fai clic sul selettore personalizzato”.

Ora aggiungi Classe selettore per la sezione. 

Grazie a queste diverse tipologie di popup WordPress disponibili in Gutenberg, hai la flessibilità di scegliere il formato più adatto ai tuoi obiettivi e che migliori l'esperienza utente, rendendo il tuo sito web più coinvolgente ed efficace nel catturare l'attenzione e generare conversioni.

Pianifica l'attivazione del popup per la tua campagna

A volte, utilizzerai i popup per promuovere campagne sul tuo sito web. Ora, queste campagne hanno una certa data e ora per il lancio. Quindi devi far corrispondere esattamente quella tempistica per attivare il popup.

Puoi farlo con il Regole avanzate. 

➡️ Passo 1: Attiva il pulsante per "Pianifica data e ora”.

➡️ Passaggio 2: Impostare il Tempo quando vuoi attivare il popup.

➡️ Passaggio 3: Scegli il Data del lancio della campagna pop-up.

Perché scegliere GutenKit Popup Builder per WordPress?

IL Generatore di popup GutenKit si distingue come la scelta migliore per la creazione di popup in WordPress grazie alla sua perfetta integrazione con l'editor a blocchi Gutenberg, offrendo un'esperienza intuitiva e altamente personalizzabile per gli utenti. Ecco perché è un'eccellente soluzione per i siti WordPress:

✅ Integrazione perfetta con Gutenberg:

GutenKit è stato creato appositamente per Gutenberg, il che significa che puoi progettare e gestire i popup utilizzando la stessa interfaccia basata su blocchi con cui hai già familiarità. Ciò elimina la necessità di generatori di popup o di codifica esterni, semplificando l'intero processo e consentendo un'esperienza coesa.

✅ Modelli predefiniti per una configurazione rapida:  

   GutenKit è dotato di una varietà di modelli popup progettati professionalmente che possono essere facilmente personalizzati per adattarsi allo stile del tuo marchio. Questi modelli fanno risparmiare tempo e fatica, offrendo un punto di partenza per coloro che non vogliono creare popup da zero ma desiderano comunque un design moderno e raffinato.

✅ Regole di visualizzazione avanzate: 

Con GutenKit, hai il pieno controllo su quando e dove appaiono i tuoi popup. Puoi impostare condizioni di visualizzazione precise in base alle pagine in cui vuoi che il popup venga visualizzato. 

In questo modo i tuoi popup verranno visualizzati nei momenti più opportuni, migliorando il coinvolgimento senza essere invadenti.

✅ Molteplici opzioni di attivazione:

GutenKit offre diverse opzioni di attivazione per la visualizzazione dei popup, ad esempio al caricamento della pagina, dopo un ritardo temporizzato, durante lo scorrimento o quando l'utente sta per uscire dalla pagina. 

Puoi anche attivare dei popup quando gli utenti interagiscono con elementi specifici, ottenendo così il controllo completo sul percorso dell'utente.

✅ Personalizzazione flessibile

GutenKit Popup Builder consente un'ampia personalizzazione dei popup, dalle animazioni agli stili, dalla tipografia ai colori. 

Puoi anche aggiungere CSS personalizzati per uno stile più avanzato, assicurandoti che i tuoi popup corrispondano al design e al marchio esclusivi del tuo sito web.

✅ Responsive e ottimizzato per dispositivi mobili 

I popup creati con GutenKit sono completamente reattivi e adatti ai dispositivi mobili, assicurando che i tuoi popup abbiano un aspetto fantastico su qualsiasi dispositivo. Puoi personalizzare l'aspetto con animazioni di entrata e uscita, stili di sfondo, colori di sovrapposizione e altro ancora.

✅ Leggero e orientato alle prestazioni 

A differenza di molti altri plugin popup, GutenKit è progettato per essere leggero e ottimizzare le prestazioni. 

Ciò significa che non dovrai preoccuparti che i popup rallentino il tuo sito, il che è fondamentale sia per l'esperienza utente che per la SEO.

Avvolgendo

Seguendo questi passaggi, sarai in grado di creare e mostrare facilmente i popup sui tuoi siti WordPress. Con GutenKit Popup Builder, puoi integrare facilmente i popup dinamici nel tuo sito WordPress, consentendoti di comunicare in modo efficace con il tuo pubblico. 

Prendi spunto da questa guida e inizia a sperimentare diverse strategie popup per massimizzare il potenziale del tuo sito!

Come Popup Builder, GutenKit è dotato di oltre 65 blocchi, oltre 18 moduli e oltre 500 design pronti per offrirti un'esperienza avanzata di creazione di pagine nell'editor di blocchi Gutenberg. Quindi installa GutenKit oggi stesso e inizia a creare il sito web dei tuoi sogni in WordPress.