Come creare popup in WordPress utilizzando 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.

But from a website owner’s point of view, popups have turned out as a powerful way to capture attention, promote offers, and generate leads.

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

To help you with this, we will walk you through each step of setting up effective popups tailored to your website’s goals. By the end of this guide, you’ll have the easiest way to create popups that not only attract attention but also enhance user experience.

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.

These strategic uses of popups help enhance user engagement and conversion, but it’s essential to implement them thoughtfully to avoid disrupting the user experience.

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 button. With the Popup Builder activated you’re all set to start building WordPress popups in Gutenberg for your WordPress site.

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

On the other hand, instead of starting from scratch, you can save time and effort by using the ready designs.  With over 500+ patterns and templates available in GutenKit’s Template Library, you can quickly create professional-looking popups in just minutes.

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.

After that, you can change the content and customize styles to align with your campaign. It’s a fast and hassle-free way to get stunning popups up and running!

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

You have the flexibility to choose which pages you’d like your popups to appear on. Just head over to the popup block editor, and under the “Content” tab, you’ll see an option named “Conditions.” 

Da lì, basta cliccare su  + Aggiungi condizione button and set the rules for where you want your popup to be displayed. It’s that easy!

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

There might be times when you don’t want popups to appear on certain pages. You can do it with 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

If you’re aiming for more focused campaigns, you might want to display popups on certain pages of your website.

👉 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 is built specifically for Gutenberg, meaning you can design and manage popups using the same block-based interface you’re already familiar with. This eliminates the need for external popup builders or coding, streamlining the entire process and allowing for a cohesive experience.

✅ 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.