Riassunto AI
Vuoi aggiungere i tuoi moduli WordPress a un popup di Elementor? Se stai già utilizzando Elementor Pro sul tuo sito, potresti voler utilizzare il suo strumento popup integrato per visualizzare un modulo.
Questo tutorial ti mostrerà come configurare e utilizzare un popup di Elementor con WPForms.
In Questo Articolo
Requisiti: Il costruttore di popup di Elementor è disponibile solo con Elementor Pro.
Se non hai Elementor Pro ma desideri comunque creare un modulo popup, consulta la nostra guida su come creare un popup per moduli di contatto.
Prima di iniziare, assicurati di installare e attivare WPForms sul tuo sito WordPress e di verificare la tua chiave di licenza.
Creazione di un Popup
Per creare un nuovo popup con Elementor, dovrai andare su Modelli » Popup nella barra laterale della tua area di amministrazione di WordPress. Quindi fai clic sul pulsante verde Aggiungi nuovo popup.
Questo aprirà un overlay che ti permetterà di nominare il tuo popup. Per il nostro esempio, chiameremo il nostro modello Contattaci.
Quindi fai clic sul pulsante verde Crea modello.
Incorporamento del tuo Modulo
Successivamente, vedrai un altro overlay con la libreria di modelli di Elementor, dove puoi scegliere un modello predefinito per il tuo popup.
Per questo esempio, faremo clic sul pulsante X per uscire dalla libreria di modelli e costruire manualmente il nostro popup da zero.
Dalla finestra principale del costruttore di modelli, cerca i widget nella barra laterale sinistra per il widget WPForms. Quindi fai clic e trascinalo nel costruttore.
Una volta aggiunto il widget WPForms al tuo popup, puoi incorporare un modulo esistente o crearne uno nuovo.
Incorporamento di un Modulo Esistente
Nel widget WPForms di Elementor, vedrai un menu a discesa dove puoi selezionare il nome del modulo esistente che desideri incorporare.
Se desideri apportare modifiche a questo modulo, puoi farlo direttamente dal costruttore di popup facendo clic sul collegamento Modifica il modulo selezionato nella barra laterale.
Questo aprirà un popup con il costruttore di moduli WPForms in modo da poter modificare e salvare le modifiche al tuo modulo.
Creazione di un nuovo modulo
Se desideri creare un nuovo modulo per il tuo popup, fai clic sul pulsante + Nuovo Modulo nel pannello di sinistra.
Questo aprirà un popup con il costruttore di moduli WPForms, dove puoi nominare il tuo modulo, selezionare un modello e iniziare a personalizzarlo.
Assicurati di salvare il tuo modulo prima di chiudere il costruttore. Se decidi di voler tornare indietro e apportare modifiche al tuo nuovo modulo, fai clic sul collegamento Modifica il modulo selezionato nella barra laterale sinistra per riaprire il costruttore di moduli.
Nota: Se hai bisogno di aiuto per creare il tuo modulo, dai un'occhiata alla nostra guida su come creare il tuo primo modulo. Inoltre, consulta il nostro modello di modulo Elementor multipagina se desideri utilizzare un modello di modulo predefinito.
Personalizzare il tuo modulo
Una volta aggiunto un modulo al tuo popup, puoi anche modificarne l'aspetto per adattarlo all'aspetto del tuo sito web dalla scheda Stile dell'editor di Elementor.
La scheda Stile ti consente di regolare lo stile dei campi del modulo, delle etichette e dei pulsanti senza bisogno di conoscere il CSS.
Per saperne di più, consulta la nostra guida su come personalizzare i tuoi moduli.
Attivazione dell'invio del modulo tramite AJAX
Sia che tu aggiunga un modulo esistente al tuo popup o ne crei uno nuovo, è una buona idea verificare che l'invio del modulo AJAX sia abilitato. Questo impedirà la chiusura del tuo popup dopo l'invio e nasconderà il messaggio di conferma del modulo.
L'invio AJAX è abilitato per impostazione predefinita per tutti i nuovi moduli. Tuttavia, puoi verificare che questa opzione sia attiva facendo clic sul link Modifica il modulo selezionato nella barra laterale dell'editor del popup e andando su Impostazioni » Generali nell'editor del modulo.
Quindi, nella sezione Avanzate, assicurati che l'impostazione Abilita invio modulo AJAX sia attivata.
Salva le modifiche prima di chiudere l'editor del modulo.
Abilitazione del blocco di chiusura sull'overlay
Dopo aver scelto e incorporato il tuo modulo, dovrai configurare un'opzione per il tuo popup per impedire che il modulo si chiuda se include un campo Caricamento file o Data/Ora.
Fai clic sull'icona dell'ingranaggio nella barra del menu inferiore di Elementor per aprire le impostazioni del popup. Nella scheda Avanzate, attiva l'opzione Impedisci chiusura sull'overlay.
Una volta terminate le impostazioni del tuo popup, fai clic sul pulsante Pubblica nell'angolo in basso a sinistra dello schermo.
Configurazione delle impostazioni del popup
Prima che Elementor pubblichi il tuo popup, dovrai configurare le impostazioni per Condizioni, Trigger e Regole avanzate. Queste opzioni appariranno quando fai clic sul pulsante Pubblica nell'editor del popup.
Per questo esempio, imposteremo le condizioni per mostrare il nostro popup sull'intero sito.
Imposteremo anche il trigger del popup sull'impostazione Al caricamento della pagina.
In questo modo, i nostri utenti vedranno il nostro popup indipendentemente dalla pagina che visitano, non appena si carica.
Non aggiungeremo regole avanzate al nostro esempio. Una volta terminate le impostazioni del tuo popup, fai clic sul pulsante Salva e chiudi .
Nota: Se desideri saperne di più su cosa fa ogni impostazione del popup, consulta la documentazione completa di Elementor.
Il tuo popup verrà quindi pubblicato. Puoi visitare il frontend del tuo sito per visualizzarlo.
Fatto! Ora puoi aggiungere il tuo modulo WordPress a un popup di Elementor.
Successivamente, vorresti imparare come acquisire lead, anche quando gli utenti non completano i tuoi moduli? Assicurati di consultare la nostra guida al nostro addon Form Abandonment.