Quali tipologie di Popup si possono creare con Elementor
Utilizzando Elementor Pro, potrai creare dei popup accattivanti in grado di soddisfare pienamente le tue esigenze. Infatti, i popup Elementor sono molto duttili e possono permettere di gestire elementi del sito web anche molto diversi tra loro, come ad esempio:
- popup menu;
- popup per newsletter;
- popup coupon ed offerte;
- popup informativi;
- popup cookie banner;
- popup con modulo di contatto;
- popup video;
- popup gallery;
Insomma le possibilità con i popup Elementor sono tantissime, il limiti sono dettati semplicemente dalla tua creatività ed il tuo ingegno.
In genere i popup non godono di buona reputazione, è vero…
A mio avviso, se utilizzati bene, possono essere molto utili ad alleggerire le pagine ed a favorire la corretta lettura/navigazione, dando la possibilità all’utente di ottenere degli approfondimenti (solo se lo ritiene opportuno) e senza mai abbandonare la pagina.
Ad esempio, pensiamo ad una pagina web che deve mostrare una serie di eventi dal vivo e che per ognuno di essi ci sia una corposa gallery di immagini e video da mostrare. Inserire tutte le immagini ed i video in pagina, per ogni evento, potrebbe essere da un lato molto pesante (in termini di velocità di caricamento), dall’altro troppo complesso per l’utente che cerca un’evento specifico.
In questo caso potremmo mostrare un’immagine di anteprima per ogni evento ed un popup con la gallery completa per ognuno di essi. Oppure un’anteprima, un estratto di video e immagini in pagina e tutto il resto all’interno di una popup gallery; oppure ancora… mostrare un’anteprima video ed una immagine, per poi creare 2 gallery popup separate per i restanti video ed immagini.
Insomma puoi davvero sbizzarrirti, ma cerca sempre di farlo in base a ciò che pensi sia più utile per chi dovrà interagire con la tua pagina web.
Come creare un Popup Elementor
Elementor ha una funzionalità che ti permetterà di gestire al meglio i tuoi popup, supportandoti nella creazione e nella configurazione.
Per creare un Popup Elementor, ti basterà andare all’interno del Popup Builder, che puoi trovare nella barra laterale WordPress sotto la Voce “Template“>”Popup“. Clicca sul pulsante in alto “Aggiungi Nuovo“, ed inserisci un nome per il tuo Popup.
L’inserimento del nome è opzionale, infatti se lasciamo il campo vuoto Elementor lo andrà a generare in automatico. Ricorda però, che il nome del popup non è visibile da chi naviga il sito, serve solo per permetterti una gestione più semplice ed intuitiva quando dovrai modificarlo o richiamarlo.
Creato il Popup, potrai utilizzare tutte le funzionalità del Page Builder Elementor per realizzare un layout in grado di catturare l’attenzione.
Design Popup – Come andare a definire le impostazioni per il desing dei tuoi Popup Elementor Pro
Come hai potuto notare sono davvero poche le limitazioni che Elementor Pro pone nella gestione dei Popup, permettendoti di sfruttare a pieno questo strumento per migliorare l’esperienza utente sul tuo sito web e per ampliare le tue possibilità lato marketing, UX e Design.
Andiamo a vedere adesso come puoi andare a configurare tutti gli aspetti di Design del Popup Builder Elementor Pro.
Nella schermata di modifica del Popup torverai in basso a sinistra un’icona con un’ingranaggio (evidenziata nell’immagine sotto) che ti permette di accedere a tutto il menu di impostazioni, composto da 3 macro aree:
- Impostazioni
- Avanzato
- Stile
Impostazioni Layout Popup Elementor Pro
All’interno della prima tab Layout delle Impostazioni Popup Elementor trovi delle voci che ti permettono di andare a definire aspetti fondamentali per l’aspetto del tuo Popup.
In primis hai la possibilità di andare a definire le dimensioni che dovrà avere il Popup, inserendo dei parametri ben precisi sia per la larghezza che per l’altezza ed inoltre puoi andare a definire in che posizione andare a collocare il Popup (in modo simile a come si fa per qualsiasi sezione Elementor).
Potrai applicare una sovrapposizione, per gestire la visualizzazione della pagina di sfondo del Popup e scegliere se inserire o meno un pulsante di chiusura (la classica “X”) per il Popup.
Inoltre potrai definire delle animazioni di ingresso e uscita del Popup per renderlo ancora più personalizzato.
All’interno delle tab Impostazioni Generali e Anteprima impostazioni potrai invece andare a definire o modificare il titolo del tuo popup, lo stato (pubblicato, bozza, ecc), il tag HTML da attribuire al Popup e un’anteprima da mostrare all’interno della pagina di modifica che ti aiuterà nel caso di popup dinamici.
Impostazioni Avanzate Popup Elementor
Nella tab Avanzate delle Impostazione dei Popup Elementor avrai la possibilità di andare a controllare diverse funzionalità molto utili per alcuni casi specifici, andiamo a vedere nel dettaglio cosa troverai:
- Puoi inserire un ritardo in secondi per mostrare il pulsante chiudi popup.
- Puoi inserire un timer in secondi per la chiusura automatica del popup.
- Puoi prevenire o attivare la chiusura del Popup quando un utente clicca sulla pagina di sfondo in overlay: molto utile quando non vogliamo che l’utente possa chiudere per errore il popoup come per i popup di Login/Registrazione o con moduli di contatto per lead generation.
- Puoi prevenire o attivare la chiusura del Popup quando un utente preme il tasto ESC della tastiera: molto utile quando non vogliamo che l’utente possa chiudere per errore il popoup come per i popup di Login/Registrazione o con moduli di contatto per lead generation.
- Puoi disabilitare lo scorrimento della pagina di sfondo del Popup: utile per evitare distrazioni sullo sfondo.
- Puoi decidere di nascondere il popup in questione se l’utente ha già visto altri popup in quella pagina: può essere utile se utilizzi varie tipologie di Popup con condizioni di visualizzazione automatiche in base al tempo o altri fattori per evitare di disturbare la navigazione dell’utente.
- Puoi consentire la navigazione a schede della tastiera (accessibilità).
- Puoi indicare dei selettori CSS con cui si aprirà di default il popup ogni volta che avverrà un click.
Potrai inoltre applicare un Margine o un Rientro alla sezione del Popup e potrai applicare una classe CSS custom per poter effettuare delle modifiche custom con il CSS.
Impostazioni Avanzate Popup Elementor
All’interno della tab Stile potrai definire glu ultimi aspetti legati al design del tuo Popup!
Potrai innanzitutto andare a personalizzare lo Sfondo (con immagini e colori), i bordi (colore, spessore, raggio, ecc) ed andare ad assegnare un ombra al tuo popup.
Avrai accesso alla personalizzazione della sovrapposizione del Pupup, andando a gestire possibili sfondi colorati o immagini da applicare alla pagina di sfondo della sezione del Popup.
Infine potrai personalizzare gli aspetti di visualizzazione del pulsante Chiudi Popup, andando a definire se mostrarlo all’interno o all’esterno del Popup, selezionando una posizione verticale e orizzontale e personalizzando la dimensione ed il colore dell’icona di chiusura (anche hover).
Gestisci tutte le condizioni di visualizzazione dei tuoi Popup e definisci le modalità di utilizzo
Completata la realizzazione grafica, potrai gestire tutte le configurazioni del popup suddivise in 3 livelli. Potrai quindi creare delle combinazioni tra i vai livelli di attivazione dei popup in base alle tue esigenze specifiche.
Ma vediamo nel dettaglio quali opzioni offre Elementor e come implementarle al meglio.
Condizioni di Visualizzazione Popup Elementor
Questa opzione consente di decidere se il Popup Elementor deve essere visualizzato in parti specifiche del sito web. In questo caso ci sono 3 opzioni principali tra cui poter scegliere, ovvero:
- Intero Sito: il popup verrà mostrato su tutte le pagine presenti nel sito web;
- Archivi: puoi decidere di mostrare il popup scegliendo tra le varie tipologie di contenuti presenti all’interno del tuo sito, come: archivi articoli, archivi autore, archivi data, ecc. (la tipologia di archivi gestibili varia in base al sito web);
- Contenuti Singoli: ti permette di mostrare elementor popup all’interno di singoli contenuti, come pagine, tassonomie specifiche, articoli specifici, ecc. (anche qui la scelta varia in base alla tipologia di sito web);
Trigger di attivazione Popup Elementor
La seconda condizione che possiamo applicare ai popup Elementor consiste nei Trigger, ovvero la scelta di una tipologia di azione che deve “scatenare” l’apertura del popup. In questo caso Elementor ci offre varie opzioni:
- al caricamento della pagina: ti consente di mostrare il popup ad un utente semplicemente sulla base della visualizzazione di una pagina;
- con lo scroll di pagina: permette l’apertura del popup a seguito di una percentuale ben precisa di scroll della pagina;
- con lo scroll di un elemento specifico: oltre allo scroll dell’intera pagina, hai la possibilità di limitare l’attivazione in base allo scroll su un elemento specifico che andrai ad indicare con apposito selettore;
- al click: puoi far aprire il popup dopo un numero ben preciso di click, che andrai ad indicare in questo campo;
- a seguito di inattività sulla pagina: puoi scegliere un limite di tempo (in secondi) dopo il quale si attiverà il popup;
- prima dell’uscita dalla pagina: ti permette di aprire il popup prima che l’utente esca definitivamente dalla scheda/finestra del browser;
Regole avanzate dei Popup Elementor
Oltre a tutte le opzioni che abbiamo visto nei 2 Step precedenti, ci sono tante altre regole avanzate che ti permettono di personalizzare ulteriormente le condizioni di visualizzazione del tuo popup Elementor:
- mostra dopo X visualizzazioni di pagina: ti consente di mostrare il popup solo dopo un certo numero di visualizzazioni di pagina, che andrai ad indicare in questo campo;
- mostra dopo X sessioni: ti consente di mostrare il popup solo dopo un certo numero di sessioni, che andrai ad indicare qui;
- visualizza massimo X volte: ti consente di indicare un numero massimo di attivazioni del popup, funzionalità molto utile per evitare di essere troppo insistenti o invadenti con l’utente;
- visualizza/nascondi per chi arriva da url specifico: puoi decidere di mostrare o nascondere il popup in base alla pagina di provenienza dell’utente;
- visualizza/nascondi per chi arriva da fonte di traffico specifico: puoi decidere di mostrare o nascondere il popup in base alla fonte di traffico di provenienza dell’utente;
- mostra su dispositivi specifici: puoi decidere di mostrare il popup in base alla tipologia di dispositivo utilizzato dall’utente (Desktop, Tablet e Mobile);
- mostra su specifici browser: puoi decidere di mostrare il popup in base al browser utilizzato dall’utente;
Come mostrare un Popup Elementor al click di un pulsante specifico
Oltre a quanto abbiamo già visto, hai anche la possibilità di far aprire un popup quando l’utente clicca su un pulsante specifico.
Per farlo dovrai lasciare vuoti tutti i settaggi condizionali che ti ho mostrato sopra, perchè andremo ad effettuare questa operazione direttamente all’interno del pulsante in questione.
Dovrai quindi procedere con la creazione del popup Elementor e poi limitarti a salvarlo tra i tuoi Popup. Una volta salvato, vai all’interno dell’editor Elementor della pagina che contiene il pulsante al quale applicare l’apertura del popup.
Clicca sul pulsante in questione ed in corrispondenza del campo “Link” nella dashboard di modifica Elementor, clicca sull’icona dei tag dinamici (vedi punto 1 nell’immagine sotto). Si aprirà un elenco di opzioni da cui dovrai selezionare la voce “Popup“.
Perfetto, adesso ti basta cliccare sul simbolo della chiave inglese presente nella barra ed indicare il nome del popup da collegare (vedi punto 2 immagine sotto).
Conclusioni
Come hai potuto notare sono davvero poche le limitazioni che Elementor pone nella gestione dei Popup, permettendoti di sfruttare a pieno questo strumento per migliorare l’esperienza utente sul tuo sito web e per ampliare le tue possibilità lato marketing, UX e Design.
Un piccolo consiglio che sento di darti è di valutare bene in che modo puoi utilizzarli senza creare intralcio alla navigazione e senza essere troppo invadente o insistente nei confronti dei tuoi utenti, altrimenti rischi di ottenere un pessimo effetto!