I moduli popup possono essere strumenti di marketing essenziali, che vi permettono di raccogliere indirizzi email, promuovere offerte e molto altro. Tuttavia, creare popup attraenti e personalizzati in WordPress non è sempre semplice.

Per fortuna, il plugin Elementor page builder permette di creare e personalizzare facilmente i popup sul vostro sito web. Potete modificarli per adattarli al design del vostro sito e aggiungere dei trigger basati sul comportamento degli utenti o sulla loro provenienza.

Questa guida vi fornirà una panoramica dei diversi tipi di popup di Elementor e dei motivi per cui potreste volerli utilizzare. Poi vi spiegheremo come creare questi popup con gli strumenti Elementor gratuiti e Pro. Cominciamo!

Una Panoramica sui Popup di Elementor

Elementor è uno dei più popolari plugin di page builder per siti web WordPress. Vi permette di trascinare e posizionare gli elementi per progettare pagine belle e facili da usare:

Homepage del plugin Elementor con il motto Create Websites, Design the Future
Elementor

Inoltre, Elementor vi permette di creare una serie di popup. Si tratta di moduli personalizzati che appaiono sul vostro sito dopo un tempo predeterminato o dopo che l’utente ha completato una particolare azione.

I popup possono essere strumenti essenziali per diversi motivi. Potete usarli per raccogliere contatti e ampliare la vostra lista di email marketing. I popup di Elementor si integrano con i software di email marketing e inviano gli indirizzi dei clienti direttamente alla piattaforma di vostra scelta.

Potete anche usarli per promuovere offerte, sconti ed eventi legati al vostro negozio di ecommerce. Per questo motivo, i popup possono essere parte integrante della vostra strategia di marketing.

Inoltre, i popup possono aiutarvi a entrare in contatto con i vostri clienti. Potete inserire dei sondaggi per chiedere il feedback dei clienti e migliorare i vostri prodotti e servizi.

Tuttavia, i popup possono risultare scadenti e invadenti se non li progettate bene e se non scegliete i giusti trigger per il vostro pubblico. Pertanto, dovrete assicurarvi di usarli in modo efficace. È qui che entra in gioco Elementor.

Tipi di Popup di Elementor

Elementor offre più di 100 modelli di popup che potete personalizzare in base alle vostre esigenze. Questi modelli includono:

  • Moduli per raccogliere contatti
  • Popup per iscrizioni via email
  • Popup promozionali
  • Moduli di accesso e di benvenuto
  • Popup a contenuto limitato
  • Moduli di upsell e cross-sell

Questi modelli di popup sono integrati nei kit di Elementor, che includono varie caratteristiche di design per diversi tipi di siti web:

Due modelli Popup in ElementorKits
Modelli popup ElementorKits

Inoltre, potete scegliere tra diversi posizionamenti e design visivi dei popup, tra cui:

  • Modale
  • Slide-in
  • A schermo intero
  • Barra superiore o inferiore

Infine, potete usare l’editor di Elementor per personalizzare rapidamente qualsiasi modello di popup in base alle vostre esigenze. Ora vi spieghiamo come farlo con Elementor Pro e con Elementor gratuito.

Come Creare un Popup con Elementor (Gratis)

In precedenza, il plugin Essential Addons for Elementor aveva una funzione Modal Popup che permetteva agli utenti di creare un modulo popup gratuito. L’utilizzo di questa funzione era uno dei modi più popolari per evitare di pagare Elementor Pro. Potete trovare molti video tutorial di qualche anno fa che vi mostrano come usare questo metodo.

Tuttavia, la funzione gratuita Modal Popup si è trasformata in un elemento premium Lightbox e Modal. Non è più gratuito. Pertanto, dovrete passare a Elementor Pro o pagare per uno dei plugin Elementor premium che tratteremo più avanti in questo articolo.

Come Creare un Popup con Elementor Pro (in 5 Semplici Passi)

Elementor Pro è dotato di una funzione di popup integrata che useremo in questo tutorial. Per prima cosa dovete acquistare e attivare Elementor Pro. Poi potrete accedere alla bacheca di WordPress per iniziare a creare i popup.

Passo 1: Creare il Popup

Iniziate navigando su Elementor > Templates > Popup nella vostra bacheca di WordPress. Poi, fate clic su ADD NEW POPUP per crearne uno nuovo:

Schermata grigia e ancora vuota in cui compare la scritta Create Your First Popup
Andate su “Templates” e poi su “Add New Popup”

Vi verrà chiesto di dare un nome al vostro template. Una volta deciso il nome, selezionate CREATE TEMPLATE:

Schermata New Template da cui scegliere la tipologia di template
Date un nome al vostro template di popup e fate clic su “Crea”

In questo modo verrà lanciato il costruttore di pagine di Elementor. A questo punto potete scegliere tra i modelli di popup esistenti o creare il vostro da zero. Nel nostro esempio, abbiamo scelto uno dei template esistenti da modificare:

Schermata dei template di popup da cui scegliere il tipo di template preferito
Scegli tra i modelli di popup esistenti o costruiscine uno da zero

Ora potete giocare con le impostazioni del design per personalizzare il vostro popup. Per esempio, potete modificare il layout, l’allineamento, le immagini di sfondo e i colori.

Passo 2: Scegliere le Condizioni di Visualizzazione

Una volta che il design vi soddisfa, fate clic sulla freccia rivolta verso l’alto accanto a PUBLISH. Quindi, selezionate Display Conditions dal menu che appare:

Schermata Popup Settings con tutte le opzioni di visualizzazione
Scegli le condizioni di visualizzazione

Successivamente, andate su ADD CONDITION per scegliere la posizione in cui il popup di Elementor verrà visualizzato sul vostro sito web. Potete quindi selezionare una posizione tra le seguenti opzioni: Entire site, Archives, Singular o WooCommerce:

Schermata Publish Settings da cui scegliere l’area in cui far comparire il popup
Scegli dove visualizzare il popup

Fatta questa scelta, cliccate su NEXT. Vi ritroverete sulla sezione Triggers del vostro modulo popup.

Passo 3: Impostare i Trigger del Popup

Nella pagina Triggers potete decidere cosa devono fare gli utenti per visualizzare il vostro popup Elementor. Per impostazione predefinita, ogni opzione è disattivata e potete attivarla cliccando sul cursore. Poi dovrete specificare i valori per il vostro trigger.

Per esempio, se scegliete On Page Load, dovrete scegliere entro quanti secondi visualizzare il popup:

Schermata Publish Settings, menu Triggers, con l’opzione On Page Load attivata e il campo in cui indicare i secondi prima della comparsa del popup
Selezionate i trigger popup che desiderate

Con On Scroll, potete scegliere in quale direzione l’utente deve scorrere e quanta parte della pagina deve coprire prima che appaia il popup:

Schermata Publish Settings, menu Triggers, con l’opzione On Scroll attivata e i campi in cui indicare le condizioni in cui comparirà il popup
Trigger di scroll della pagina

L’impostazione On Scroll To Element richiede l’inserimento di un ID CSS. Quando un utente raggiunge quell’elemento della vostra pagina, il popup apparirà:

Schermata Publish Settings, menu Triggers, con l’opzione On Scroll To Element attivata
Trigger On Scroll To Element

Con On Click, dovrete specificare quante volte un utente deve cliccare sul vostro sito web prima che il popup venga visualizzato:

Schermata Publish Settings, menu Advanced Rules, con l’opzione On Click attivata e impostata su 1
Altre opzioni di trigger nelle regole avanzate

L’impostazione After Inactivity vi permette di attivare il popup dopo che l’utente è rimasto inattivo sulla vostra pagina per un determinato periodo di tempo:

Schermata del menu Advanced Rules, opzione After Inactivity attivata e impostata su 30 secondi
Trigger di inattività

Infine, potete scegliere di attivare l’opzione On Page Exit Intent. Questa impostazione attiverà il vostro popup quando un utente cercherà di lasciare la pagina:

Schermata del menu Advanced Rules, opzione On Page Exit Intent attivata
Selezionare l’attivazione “On Page Exit Intent”

Quando avete finito, fate clic su SAVE & CLOSE o su NEXT per passare alle Advanced Rules. Vedremo queste regole tra un po’.

Passo 4: Aggiungere un Pulsante Popup al Sito (Opzionale)

Potreste voler attivare il popup di Elementor quando un utente fa clic su un elemento specifico della vostra pagina. Per esempio, potreste creare un pulsante con la scritta “Iscriviti ora” e inserirlo nel footer. Quando un utente fa clic sul pulsante, vedrà il vostro modulo di registrazione via email sul suo schermo.

Per prima cosa, dovrete creare un pulsante Elementor sul vostro sito web. Aprite l’articolo o la pagina nell’editor di Elementor e scegliete pulsante (Button) dal menu. Trascinate e rilasciate il pulsante sulla pagina:

Schermata Elements con le opzioni Basic dell’editor: il riquado Button è evidenziato
Scegliete l’opzione “Button” dal menu

Una volta specificato il testo del pulsante e personalizzato il suo aspetto, fate clic su Link > Dynamic Tags. Quindi, scegliete Actions > Popup dal menu a tendina:

Schermata Edit Button, area Content: il menu a tendina mostra la voce Actions, Popup
Selezionte l’azione popup per il pulsante

Fate clic su Popup e scegliete Open popup dal menu a tendina Action. Potete anche selezionare il vostro modulo dal menu Popup:

Schermata Edit Button, opzione Link: il menu a discesa mostra le impostazioni Action e Popup
Selezionate l’opzione popup a discesa

Infine, selezionate UPDATE per pubblicare il pulsante. Ogni volta che un utente ci clicca sopra, arriverà sul vostro modulo di iscrizione.

Fase 5: Salvare i Template di Popup per Usarli in Seguito

Potete anche salvare i vostri popup come template. Aprite il vostro popup nell’editor di Elementor e fate clic sulla freccia verso l’alto accanto a UPDATE. Scegliete Save as Template dal menu:

Schermata Elements, dal menu scegliere Save as Template
Salvare il popup come template

Vi verrà chiesto di dare un nome al vostro template. Quando avete finito, fate clic su SAVE:

Schermata Library e l’opzione per salvarlo: al centro della pagina la scritta Save Your Popup to Library
Date un nome al template di popup e fate clic su “Save”

Il popup verrà salvato nella vostra libreria di template. Ora potete usarlo quando create una pagina o un articolo con i template.

Come Configurare le Impostazioni Avanzate del Popup di Elementor

Abbiamo già spiegato come creare un popup Elementor di base. Tuttavia, ci sono anche alcune impostazioni avanzate che potreste voler usare.

Aprite di nuovo il vostro popup con l’editor di Elementor e andate su Display Rules. Diamo un’occhiata alle diverse impostazioni.

Impostazioni di Visualizzazione del Popup

Alcune impostazioni avanzate di visualizzazione del popup vi permettono di controllare quando gli utenti vedono il vostro modulo. Queste configurazioni possono essere utili per indirizzare i visitatori di ritorno piuttosto che quelli che arrivano per la prima volta.

Per esempio, potete scegliere di visualizzare il popup dopo che la persona ha visualizzato la pagina per un certo numero di volte:

Schermata Publish Settings e l’opzione Show after X page views impostata su 3
Impostazioni e condizioni più avanzate

In alternativa, potete scegliere di mostrare il popup dopo X sessioni (Show after X sessions). Questa impostazione si rivolge alle visite complessive piuttosto che a pagine specifiche:

Schermata Publish Settings e l’opzione Show after X sessions impostata su 2
Mostrare il popup dopo un certo numero di sessioni

L’impostazione per mostrare il popup fino a X volte (Show up to X times) può limitare il numero di volte in cui gli utenti vedranno il vostro popup. Potreste considerare di attivarla se non volete spammare continuamente le persone con moduli invadenti:

Schermata Publish Settings e l’opzione Show up to X times impostata su 3
Selezionate quante volte gli utenti vedranno il popup

Potete anche usare le impostazioni mostra sui dispositivi (Show on devices) e mostra sui browser (Show on browsers) per limitare la visualizzazione del vostro popup. I popup possono essere particolarmente invadenti sui dispositivi mobili, quindi potreste considerare di disabilitarli in questi casi:

Schermata Advanced Rules e le opzioni Show on devices e Show on browsers attivate
Potete scegliere l’opzione per mostrare il popup sui dispositivi

Offrire una migliore esperienza agli utenti da mobile è una bella mossa per soddisfare le persone che visitano il vostro sito. Inoltre, può dare impulso ai vostri sforzi di ottimizzazione per i motori di ricerca (SEO) e aiutare il vostro sito web a posizionarsi più in alto nei risultati di ricerca.

Impostazioni Origine Utente

Infine, Elementor vi permette di configurare le impostazioni di visualizzazione dei popup in base alla provenienza degli utenti. Queste impostazioni possono essere utili se indirizzate le visite verso una landing page promozionale e poi usate il popup per pubblicizzare offerte o per richiedere i dati di contatto.

Le seguenti impostazioni vi permettono di specificare gli URL e di scegliere quali link attivano i popup:

Schermata Advanced Rules dove sono attivate le opzioni When arriving from specific URL e Show when arriving from
Mostrare il popup agli utenti che arrivano da un luogo specifico

Infine, potete scegliere di nascondere i popup agli utenti che hanno effettuato il login. Potreste usare questa impostazione se gestite un sito web a pagamento:

Schermata Advanced Rules dove è attivata l’opzione Hide for logged in users
Nascondere i popup agli utenti che hanno effettuato l’accesso

Quando avete terminato di impostare tutte le opzioni, fate clic su SAVE & CLOSE. Se necessario, potete tornarci sopra e modificare qualsiasi configurazione.

I 3 Migliori Plugin per i Popup di Elementor

Come abbiamo visto, Elementor Pro facilita la creazione di popup per il vostro sito web. Tuttavia, potreste non essere pronti a passare al page builder premium. Oppure potreste essere alla ricerca di ulteriori funzioni di design.

Ecco alcuni dei migliori plugin per i popup di Elementor che tengono conto di queste considerazioni.

1. JetPopUp (Crocoblock)

Homepage del plugin JetPopUp (Crocoblock)
JetPopUp (Crocoblock)

JetPopUp è un plugin facile da usare con un’interfaccia drag-and-drop che si integra perfettamente con Elementor. Vi permette di creare moduli popup dinamici e personalizzati, tra cui iscrizioni via email, moduli di consenso ai cookie e conti alla rovescia.

JetPopUp brilla per le sue caratteristiche interattive. Potete scegliere tra diverse impostazioni di animazione, come lo scorrimento, il capovolgimento e la rotazione. Inoltre, il plugin dispone di vari modelli che potete personalizzare in base alle vostre esigenze.

Questo plugin vi permette anche di selezionare e personalizzare diverse impostazioni di visualizzazione. Per esempio, potete mostrare i vostri moduli JetPopUp agli utenti in date particolari, quando cercano di abbandonare il vostro sito web o dopo un certo tempo di scorrimento.

Caratteristiche:

  • Scegliete tra i template di popup preimpostati
  • Selezionate diverse condizioni di visualizzazione del popup
  • Includete ed escludete condizioni specifiche
  • Usate effetti di animazione

Prezzi: JetPopUp costa 22 dollari all’anno. Questo pacchetto include l’integrazione con MailChimp, un widget popup e l’assistenza clienti. Potete anche passare a un abbonamento all-inclusive per 130 dollari all’anno. Include 20 plugin aggiuntivi e 150 widget extra.

2. Widget Box Popup (PowerPack)

Homepage del plugin Popup Box Widget (PowerPack)
Popup Box Widget (PowerPack)

Se state cercando impostazioni avanzate per i popup di Elementor, prendete in considerazione Popup Box Widget di PowerPack. Vi permette di creare popup personalizzati che includono elementi dinamici come video, immagini e mappe di Google.

Questo plugin vi permette di attivare i popup in base a varie azioni dell’utente, tra cui l’intento di uscita e ritardi temporali personalizzati. Potete anche creare popup interattivi in due fasi con link e altri elementi di chiamata all’azione (CTA).

Inoltre, Popup Box Widget dispone di impostazioni di animazione avanzate. Potete ingrandire i vostri popup, usare la formattazione dei giornali o animazioni 3D.

Caratteristiche:

  • Scegliete tra gli effetti di animazione
  • Create popup a due fasi
  • Usate ritardi temporali e trigger per l’utente
  • Visualizzate immagini, video e altri elementi interattivi

Prezzi: Popup Box Widget è incluso in un abbonamento PowerPack. I piani partono da 49 dollari all’anno e includono più di 70 widget Elementor diversi.

3. Lightbox e Modal (Essential Addons for Elementor)

Homepage del plugin Lightbox & Modal (Essential Addons for Elementor)
Lightbox & Modal (Essential Addons for Elementor)

Abbiamo parlato brevemente di questo plugin popup per Elementor. Lightbox & Modal è un widget versatile che fa parte dello strumento Essential Addons for Elementor. Vi aiuta a creare popup con funzioni interattive come video, immagini e animazioni.

Lightbox & Modal è stato progettato per funzionare con pulsanti e link sul vostro sito web Elementor. Potete creare pulsanti, icone e testi personalizzati che attivano i vostri moduli popup. Inoltre, il widget può utilizzare ritardi temporali e altre azioni dell’utente.

Nel complesso, Lightbox & Modal potrebbe essere l’opzione migliore per interagire con i vostri utenti piuttosto che presentare semplicemente delle informazioni.

Caratteristiche:

  • Usare i trigger dei pulsanti per i popup
  • Visualizzare immagini, video e contenuti personalizzati
  • Personalizzare i layout dei popup
  • Scegliere tra diversi tipi di animazione

Prezzi: Lightbox & Modal è incluso in Essential Addons for Elementor Pro. I piani partono da 39,97 dollari all’anno e offrono più di 70 widget e sette estensioni.

Riepilogo

I moduli popup possono essere essenziali per le vostre campagne di lead generation e di marketing. Possono anche aiutarvi a interagire con le persone che visitano le vostre pagine e invogliarle a rimanere. Per fortuna, potete creare popup personalizzati con il costruttore di pagine Elementor.

È facilissimo creare popup con Elementor Pro. Potete personalizzarli per adattarli al vostro branding e decidere dove visualizzarli sul vostro sito. Potete anche configurare delle impostazioni di visualizzazione avanzate per mostrare il popup in base alle azioni e alle origini dell’utente.

Progettare un bel sito web con Elementor è solo il primo passo. Avrete anche bisogno di un provider di hosting di applicazioni, hosting di database e hosting WordPress gestito al vostro fianco.

Date un’occhiata ai nostri piani tariffari e scoprite come Kinsta può dare una carica in più al vostro sito!

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).