Elementor è diventato uno degli strumenti più popolari al mondo per la costruzione di siti web. Una delle caratteristiche principali del page builder è la possibilità di realizzare popup con estrema facilità. In questo post, ti mostrerò come creare popup con Elementor per il tuo sito web.
Cos’è un popup?
Prima di iniziare, è importante capire cos’è un popup. Un popup è una finestra che appare sopra il contenuto della pagina web per catturare l’attenzione dell’utente e offrirgli un’offerta o un’informazione speciale sul sito. I popup possono essere utilizzati per diverse finalità come la raccolta di email, la promozione di prodotti o servizi, l’invito ad un evento e molto altro.
Come creare popup con Elementor
Prima di iniziare, bisogna premettere che per poter creare e pubblicare dei popup è necessaria la versione Pro di Elementor, in quanto la versione free non include tale funzionalità.
Se sei un web designer professionista o semplicemente vuoi realizzare in autonomia il tuo sito web, ti consiglio vivamente di acquistare Elementor Pro che, oltre ai popup, mette a disposizione un’ampissima gamma di funzionalità e strumenti indispensabili per la costruzione di un sito web.
Se quindi hai già acquistato e attivato Elementor Pro sul tuo sito web, dal tuo admin di WordPress, vai su TEMPLATE > POPUP e clicca sul pulsante in alto NUOVO.
Vedrai apparire una schermata (anzi… un popup!); inserisci quindi il nome che vuoi assegnare al modello e clicca sul pulsante CREA TEMPLATE.
E adesso arriva la parte interessante. Come puoi vedere dall’immagine qui sopra, una volta caricato il builder, si apre un’altra schermata (la libreria di Elementor) con una serie di popup pronti all’uso. Stiamo parlando di qualcosa come oltre 170 modelli già impostati di popup. Non dovrai far altro che scegliere quello che più si avvicina alle tue esigenze e successivamente personalizzarlo con i tuoi contenuti.
Posizioni e tipologie di popup
Quando si parla di popup, a molti verrà in mente quello classico di forma quadrata o rettangolare che appare al centro dello schermo del sito. La realtà è che un popup può essere di svariate forme e misure: verticale, orizzontale, tondo o arrotondato e persino con sagoma personalizzata. Inoltre, non deve necessariamente apparire al centro dello schermo ma può anche mostrarsi lateralmente, a schermo pieno, a metà schermo, in un angolo, in basso oppure in alto.
Come scegliere quello ideale
Quale tipologia scegliere? Beh, questo dipende da te e dal proposito del popup stesso. Ad esempio, se l’intento è quello di proporre un’offerta imperdibile, preferirai metterlo ben in evidenza. Potresti utilizzare un overlay scuro per coprire il fondo e posizionare un popup di discrete dimensioni al centro della pagina. Se, invece, lo scopo del popup è quello di mostrare un avviso di secondaria importanza, potresti optare per un banner più piccolo su un lato o un angolo della pagina, senza utilizzare un overlay per lo sfondo.
Comunque, scorrendo i modelli disponibili nella libreria di Elementor, potrai farti un’idea delle infinite possibilità che hai a disposizione per creare un popup originale e accattivante. Inoltre, ti renderai conto di quanto sia facile e veloce personalizzarlo secondo il tuo gusto e le tue necessità.
Prima di scegliere il modello da inserire, puoi anche cliccare sopra l’immagine per vedere un’anteprima ingrandita del popup. Una volta scelto il template, clicca su INSERISCI TEMPLATE.
A questo punto potrai vedere apparire nel page builder il template da te scelto. Ora, non ci resta che modificarlo a piacere.
Per rendere il popup attraente, puoi personalizzare colori, font, l’immagine di sfondo, l’animazione e tantissimo altro.
Ed ecco che nel giro di pochi minuti abbiamo personalizzato il nostro popup nei colori e nei contenuti.
Al fine di non prolungare eccessivamente l’articolo, rimando a questo punto della guida WordPress + Elementor per maggiori dettagli su come personalizzarne la grafica, il responsive e, in generale, come utilizzare il page builder Elementor.
Controllo delle impostazioni
Specie se si è partiti da un template della libreria, è bene ricordarsi di controllare le impostazioni del popup. Per farlo, clicca sulla rotellina nell’angolo in basso a sinistra del page builder.
Nel pannello di sinistra, nella tab IMPOSTAZIONI puoi gestire le impostazioni generali del layout, come larghezza, posizione, sovrapposizione, animazioni, pulsante di chiusura. Nella tab STILE, puoi personalizzare gli stili generali del popup, come sfondo, bordo e ombra riquadro. Infine, nella tab AVANZATO, sono presenti altre opzioni importanti, come la chiusura automatica del popup dopo tot secondi o il prevenirne la chiusura qualora l’utente cliccasse all’esterno del popup.
Pubblicazione del popup
Quando ritieni che il popup sia pronto per la pubblicazione, procedi cliccando il tasto PUBBLICA. Si aprirà una finestra relativa alle impostazioni di pubblicazione.
Apertura automatica del popup
Se desideri che il popup appaia in modo automatico durante la navigazione dell’utente, dovrai seguire una configurazione suddivisa in tre semplici passaggi:
- Condizioni: in quali pagine deve apparire il popup?
- Trigger (attivatore): quale evento porta all’apertura del popup?
- Regole avanzate (opzionali)
Condizioni di visualizzazione
Se desideri che il popup venga mostrato ovunque, aggiungi come condizione “Includere tutto il sito“. In alternativa puoi decidere di mostrarlo solo in specifiche pagine, negli archivi, negli articoli. Nel caso, infine, tu voglia mostrarlo ovunque tranne in specifiche aree del sito, puoi utilizzare l’opzione “Escludi” anziché “Includi”.
Clicca ora su SUCCESSIVO.
Trigger
In questa schermata, puoi scegliere quando far apparire il popup:
- Al caricamento della pagina
- Allo scroll della pagina o di un elemento
- Al clic dell’utente
- Dopo un certo periodo di inattività da parte dell’utente
- Alla chiusura o uscita dalla pagina
Una volta selezionata un’opzione, clicca nuovamente su SUCCESSIVO.
Regole avanzate
Nell’ultimo passaggio, hai la possibilità di impostare ulteriori controlli sul comportamento del tuo popup. Ad esempio, il massimo numero di volte in cui mostrarlo in un certo lasso di tempo, il fatto di nasconderlo o meno agli utenti registrati, ecc.
Non sei obbligato ad attivare le regole avanzate; tuttavia sono dell’opinione che il più delle volte abbia senso impostare almeno un limite delle visualizzazioni. Senza questo, significherebbe mostrare il popup allo stesso visitatore ogni qualvolta che si sposta da una pagina all’altra, cosa che potrebbe finire per infastidirlo e fargli abbandonare il sito.
Puoi ora cliccare su SALVA & CHIUDI.
Se però vuoi prima testare il corretto funzionamento del popup, potresti creare una pagina di test in WordPress e impostare come unica condizione di visualizzazione del popup, la pagina di test. In tal modo, puoi eseguire qualche prova e assicurarti che tutto funzioni come te lo eri immaginato.
Apertura al clic di un elemento
Se invece desideri che l’apertura del popup avvenga nel momento in cui l’utente clicca su un determinato elemento presente nel sito (come ad esempio un’immagine o un pulsante), non occorre aggiungere alcuna condizione e quindi semplicemente clicca su SALVA & CHIUDI.
Resta però da attivare l’apertura del popup; per fare ciò dovremo andare nel template in cui è presente l’elemento che fungerà da attivatore.
Individuato e selezionato l’elemento, clicca sull’icona “Tag dinamici” del campo “Link”, nella tab CONTENUTO.
Scorri la tendina che si apre fino all’elenco “Azioni” e seleziona “Popup”.
Dopodiché, clicca sul campo “Link” (dove appare ora la scritta Popup preceduta dall’icona di una chiave inglese), lascia “Apri Popup” come azione e indica il popup da te creato (digita le prime lettere del nome del tuo popup e, una volta che appare, selezionalo).
Infine, ricordati di salvare le modifiche cliccando sul tasto PUBBLICA o AGGIORNA.
Apertura per selettore
Un’altra possibilità per far comparire il popup è quella di utilizzare un selettore. Questo può tornare utile nel caso tu voglia far aprire il popup tramite un link presente nel testo o tramite una voce del menu. Infatti, in questi casi, non disponi del campo link di Elementor in cui puoi comodamente selezionare il popup creato, come abbiamo appena visto.
Per utilizzare un selettore, devi andare nelle impostazioni del tuo popup (icona ingranaggio in basso a sinistra) e poi cliccare sulla tab AVANZATO. Alla voce APRI PER SELETTORE, inserisci questo:
a[href=”#nomeselettore“] dove nomeselettore può essere sostituito con un nome a tua scelta (punto 1 immagine sopra).
Per finire, non ti resta che aggiungere il link al testo che vuoi utilizzare come attivatore (punto 2 immagine sopra).
Test: Clicca qui per aprire il popup.
Conclusioni
Creare popup con Elementor Pro è facile e divertente. Elementor ti offre molte opzioni di personalizzazione per creare popup attraenti e coinvolgenti per il tuo sito web.
Puoi utilizzare i popup per raggiungere diversi obiettivi, come la generazione del lead, la promozione di prodotti o servizi, l’invito ad un evento, la raccolta di feedback e altro ancora.
Con Elementor, le possibilità sono infinite. Inoltre, i popup sono una grande risorsa per migliorare la user experience del tuo sito; ma attento a non esagerare o finirai per rendere piuttosto fastidiosa ai tuoi utenti la navigazione sul sito web.
