Tutti gli Shorts

Contenuti dinamici nei popup di Elementor

Con Elementor è molto semplice creare un popup che si apre quando un visitatore clicca su un link o un pulsante presente in una pagina. Immagina però di voler diversificare il comportamento del popup in base al link che viene cliccato.

In questo video ti mostro un modo per rendere dinamico il contenuto all’interno di un popup con Elementor Pro, senza utilizzare alcun plugin aggiuntivo.

Nell’esempio che ho utilizzato in questo video tutorial, ho creato 4 widget Call to action e 4 pulsanti, per un totale di 8 link che aprono lo stesso popup.

All’interno del popup è presente un modulo, creato con Elementor Pro, che contiene un campo che viene automaticamente compilato con il valore che viene trasmesso quando il visitatore clicca uno degli 8 link. Ogni link ha un valore diverso.

Ma non solo, in base al tipo di link cliccato è anche possibile modificare il testo presente nel widget intestazione inserito nel popup.

Una soluzione di questo tipo può essere utile tutte le volte che ti è utile raccogliere informazioni, senza dover richiedere al visitatore la compilazione di campi aggiuntivi. Anche perché l’informazione che ti serve è già stata espressa cliccando su quel particolare link.

Creare popup di questo tipo può essere utile, ad esempio, quando…

  • …vuoi raccogliere iscritti per la tua lista email e segmentarli in base al link che hanno selezionato.
  • …proponi diversi tuoi servizi all’interno di una singola pagina e vuoi aprire un popup con un modulo se qualcuno desidera maggior informazioni o prenotare una consulenza.

…ma sicuramente ci possono essere molte altre situazione idonee a una soluzione del genere.

L’alternativa meno efficiente sarebbe quella di creare tanti popup differenti tanti quanti sono i link che puoi utilizzare sulla pagina. Con la soluzione che ti ho mostrato è invece sufficiente creare un singolo popup e un singolo modulo, che puoi riutilizzare.

Sintesi dei contenuti del video

Il video tutorial fornisce una guida dettagliata su come personalizzare il contenuto di un popup creato con Elementor Pro in base al link cliccato su una pagina, includendo la trasmissione di un valore per compilare automaticamente un modulo all’interno del popup.

  • Requisiti Preliminari
    • I requisiti principali per mettere in pratica quanto ti ho mostrato nel video sono il plugin Elementor ed Elementor Pro (versione Advanced, dato che quella Essential non include la funzionalità Popup).
  • Come impostare l’apertura del Popup con un clic
    • Guida passo passo su come creare e configurare un popup con Elementor Pro, inclusa l’assegnazione di una classe CSS specifica per l’attivazione.
  • Configurazione della Pagina e dei Pulsanti
    • Istruzioni su come assegnare la stessa classe CSS ai widget Call to Action e ai pulsanti sulla pagina per collegarli al popup.
  • Trasmissione dei Dati al Popup
    • Spiegazione su come utilizzare gli attributi personalizzati (data attributes) per associare valori specifici ai pulsanti e trasmetterli al popup.
  • Codice JavaScript per la personalizzazione
    • Implementazione di un codice JavaScript per catturare i valori degli attributi dei pulsanti cliccati e inserirli nei campi del modulo all’interno del popup.
  • Nascondere il campo che raccogliere il dato trasmesso dal link
    • Modifica del tipo di campo nel modulo per nasconderlo all’utente, garantendo che i dati vengano trasmessi senza possibilità di modifica.
  • Test e Personalizzazione
    • Procedura per testare il funzionamento del sistema, con esempi pratici di compilazione del modulo e suggerimenti per la personalizzazione ulteriore.
Tiziano Fogliata

Mi chiamo Tiziano Fogliata e aiuto aziende e professionisti a sfruttare strumenti come WordPress, l'email marketing e la marketing automation per comunicare, trovare nuovi clienti e far crescere la propria attività. Autore di due libri su WordPress editi da Hoepli. Continua…

Iscriviti al mio canale YouTube