Come creare Popup avanzati su WordPress con Elementor Pro

Se stai pensando di implementare dei Popup avanzati su WordPress e stai utilizzando Elementor, forse non sei a conoscenza che al suo interno hai già tutto il necessario per realizzarli.

Il noto page builder ha una sezione specifica per poter realizzare fantastici Popup personalizzati, e la sua particolarità rispetto ad altri plugin è che non dovrai nemmeno preoccuparti dello stile grafico in quanto sarà in linea con il layout del tuo sito web.

Vantaggi nell’utilizzo di Elementor Pro per la creazione di Popup

Il primo beneficio che mi viene in mente pensando ai vantaggi nell’uso di Elementor per creare Popup avanzati su WordPress è l’ottimizzazione. Utilizzando Elementor, sia per le pagine del sito che per i plugin, eviteremo di dover installare un secondo plugin e caricare ulteriori file js e css.

In secondo luogo, soprattutto se non abbiamo conoscenze di programmazione, non dovremo modificare a mano lo stile del nostro Popup. Infatti sarà bilanciato secondo lo stile del nostro sito web in pochi clic.

Non ultimo la possibilità di creare qualsiasi tipo di Popup di cui abbiamo bisogno. Attraverso l’utilizzo di Elementor Pro saremo in grado di creare Popup per richiedere l’iscrizione alla newsletter, Popup con all’interno moduli di contatto, barre informative, Popup per l’accettazione dei cookie, Popup informativi.

Inoltre gli inneschi che scaturiranno l’apertura del Popup sono davvero tanti, dal classico Popup a comparsa dopo tot secondi fino a quelli più avanzati come l’attivazione nel momento in cui un utente posiziona il mouse al di fuori della finestra del browser (ottimi per recuperare un cliente che sta per chiudere il sito web).

Insomma, grazie a questo potente strumento l’unico limite per creare Popup avanzati su WordPress sarà la nostra fantasia.

Popup avanzati su WordPress con Elementor Pro

Per poter utilizzare i Popup su WordPress con Elementor dovremo acquistare la versione pro del page builder. A questo indirizzo è possibile visionare i prezzi dei vari abbonamenti del plugin.

Esse si dividono in quattro opzioni: Free, Personal, Plus, Expert. Lasciando da parte la versione Free, che è la versione gratuita, tutte le altre opzioni di abbonamento offrono le stesse caratteristiche tranne per il fatto dei siti su cui sarà possibile applicare la licenza e ricevere gli aggiornamenti automatici.

Ovviamente oltre al Popup Builder con la versione a pagamento di Elementor avremo anche più strumenti per realizzare le nostre pagine.

Inoltre, gli sviluppatori di Elementor, offrono la garanzia 30 giorni soddisfatti o rimborsati e quindi saremo in grado di ricevere un rimborso qualora il plugin non ci soddisfi appieno.

Creare un Popup avanzato su WordPress

Ma passiamo ora a vedere come creare Popup avanzati su WordPress attraverso Elementor Pro. Dopo aver acquistato ed installato il plugin della versione pro di Elementor, raggiungiamo la sezione Popup in “Templates – Popups“.

Subito dopo avrai la possibilità di crearne uno attraverso i pulsanti “Nuovo” o “Aggiungi nuovo Popup“, come mostrato nell’immagine più in alto.

Premendo sul pulsante si aprirà una schermata in cui scegliere la tipologia del Popup da creare. Come tipo di template lasciamo “Popup” mentre in basso scegliamo un nome da dare al nostro progetto.

Successivamente, premendo su “Crea Template” verrà aperta la selezione dell’aspetto grafico a noi più congeniale. Potremo scegliere tra più di 100 template diversi sia per l’aspetto grafico che funzionale.

Una volta scelto il template premiamo su “Inserisci” per aprire il classico editor di Elementor per la modifica di tutti i parametri. A disposizione avremo tre tab: Impostazioni, Stile e Avanzato.

Per accedere ai vari tab bisognere cliccare sulla rotellina a sinistra nella barra in basso.

Dal primo tab sarà possibile modificare vari parametri, come la posizione nello schermo, la larghezza, l’altezza, se visualizzare o meno il pulsante “chiudi” e l’animazione del Popup.

Dal tab “Stile” saremo in grado di impostare il colore dello sfondo o inserire un’immagine, modificare il raggio dei bordi e la posizione del pulsante “Chiudi“.

Infine, il tab “Avanzato” ti aiuterà ad impostare il timing per chiudere automaticamente il Popup, potrai scegliere dopo quanti secondi mostrare il pulsante chiudi, disabilitare la chiusura accidentale del Popup o bloccare lo scorrimento della pagina sotto.

Una volta impostato l’aspetto estetico del nostro Popup dovremo modificare le diverse impostazioni di apertura del Popup, come dove visualizzarlo, quali sono gli eventi che lo fanno apparire e altre regole avanzate.

Per modificare queste condizioni dovrai dirigerti alla freccetta di fianco al tasto pubblica e premere sul parametro da modificare: Condizioni, Trigger, Regole Avanzate.

Le condizioni di visualizzazione ci aiuteranno ad impostare in quale pagine del sito far apparire il Popup. Potremo scegliere di visualizzarlo sull’intero sito web o su una pagina specifica, oppure in un archivio, una categoria o su un articolo specifico.

Il Trigger gestirà invece l’innesco del Popup. Potremo scegliere diversi inneschi come: al caricamento della pagina, al click di un elemento, allo scroll della pagina, dopo un tempo di inattività o all’uscita dalla pagina.

Ovviamente selezioniamone uno per non creare dei conflitti e creare dei bug nel sito.

Infine, tramite la sezione Regole Avanzate, andremo a gestire degli aspetti andando nel particolare. Impostando queste regole il Popup apparirà solo nel caso in cui le regole attive vengano confermate (ad esempio mostrare il popup solo su alcuni dispositivi, oppure mostrare il popup solo quando l’utente ha navigato per un tot di pagine, e così via).

Una volta effettuati tutti questi passaggi avremo finito e potremo cliccare su “Salva e Chiudi“.

Conclusioni

In questa guida abbiamo visto come la versione Pro di Elementor sia completa e ci permetta di creare dei fantastici Popup avanzati su WordPress in modo semplice e veloce.

Facci sapere la tua opinione tramite il box dei commenti più in basso o, sei hai bisogno di aiuto contattaci tramite la pagina di supporto.