Con Elementor è 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. Questo è un po’ più complicato ed Elementor non fornisce una soluzione già pronta per risolvere questa esigenza.
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.
I dati relativi al contenuto e al valore da utilizzare sono inseriti nei widget della pagina utilizzando i data attribute. Poi, attraverso il codice JavaScript che ti mostro nel video, questi data attribute sono raccolti per essere utilizzati all’interno del 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.
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).
Reindirizzamento dinamico su thank you page diverse
Ok, abbiamo visto come è possibile trasmettere il valore a un modulo presente in un popup creato con Elementor.
Volendo, è possibile utilizzare il valore trasmesso al modulo per impostare un reindirizzamento dinamico verso thank you page differenti, in base a quel valore.
Elementor infatti, all’interno del campo destinato a indicare l’URL sul quale reindirizzare l’utente che compila il modulo, permette anche l’inserimento di shortcode. Questi shortcode sono disponibili per tutti i campi presenti nel modulo creato con questo page builder.
In questo video ti mostro come funziona questo sistema.

Reindirizzamento dinamico se il form è in un popup
Se però il modulo è inserito in un popup e desideri che la pagina di reindirizzamento sia diversa in base al link che l’utente ha cliccato per aprire il popup, ho preparato un’evoluzione di questo sistema che ti mostro in un altro video, che trovi qui di seguito.
Con questo sistema, è presente un data attribute aggiuntivo, che permette di indicare lo slug delle varie pagine di destinazione. In questo modo, quando un link per aprire il popup viene cliccato, vengono trasmessi sia il testo da usare per l’intestazione, sia il valore del campo scelta, sia il valore dello slug che sarà poi utilizzato nel campo che contiene l’URL della pagina di reindirizzamento.
Ecco il video:

Questo invece è il codice JavaScript di esempio che ho mostrato nel video.
<script>
jQuery(document).ready(function($) {
$('.open-popup').click(function() {
var choiceParam = $(this).data('choice');
var titleParam = $(this).data('title');
var choiceRedirect = $(this).data('choiceredirect');
var waitForPopup = setInterval(function() {
if ($('#form-scelta').is(':visible')) {
$('#form-field-scelta').val(choiceParam);
$('#form-title h2').append(titleParam);
$('#form-field-redirect').val(choiceRedirect);
clearInterval(waitForPopup);
}
}, 100);
});
});
</script>
Questo codice va modificato in base al nome dei campi e dei data attribute che desideri utilizzare.