Come aggiungere facilmente popup modali nel sito Web WordPress: tutorial in 3 passaggi

Sapevi che un recente studio su 2 miliardi di popup modali avevano un file Tasso di conversione 9.28% tra i primi 10%?(1)

SÌ. I popup rendono le visite al sito web più facili da usare e ti aiutano a ottenere rapidamente più iscrizioni alla newsletter. I popup sono cambiati drasticamente nel modo in cui appaiono e funzionano. Di conseguenza, stanno diventando più popolari che mai sui siti Web moderni.

Vuoi anche aggiungere le finestre modali WP al tuo sito web e sfruttare i vantaggi che offrono?

Allora questo blog è esattamente ciò di cui hai bisogno. Questa è l'unica guida di cui avrai bisogno per conoscere le modalità popup e come aggiungerli facilmente al tuo sito Web WordPress. 

Fonte: (1) Statistiche sui pop-up: risultati dell'analisi di 2 miliardi di esempi di pop-up

Cos'è un popup modale?

I popup modali sono molto comuni ed è altamente improbabile che tu non ne abbia incontrato uno. Ma conosci le definizioni del popup modale? Diamo un'occhiata.

Una finestra modale (chiamata anche finestra modale o lightbox) è un elemento di una pagina Web che viene visualizzato davanti e disattiva tutti gli altri contenuti della pagina. Per tornare al contenuto principale, l'utente deve interagire con la modale completando un'azione o chiudendola.

– Hubspot

Le finestre modali sono diverse dalle finestre di dialogo del vecchio modello. Nei popup non modali, gli utenti hanno accesso all'intera finestra anche quando il popup è attivo. Quindi, possono ignorare il popup e continuare a svolgere il proprio lavoro.

D'altra parte, il nuovo popup modale crea una nuova “modalità” sotto forma di finestra figlia e disabilita la finestra genitore. Di conseguenza, l'utente non può lavorare sulla finestra originale finché non esegue un'azione o chiude il popup modale. 

Qual è il vantaggio? Il vantaggio è che attiri l'attenzione dei visitatori del tuo sito web anche se solo per un secondo o due. E attirare l'attenzione dell'utente sul tuo messaggio è ciò di cui hai bisogno, giusto? 

Perché se vedono quello che hai da offrire, rimarranno lì per più di un secondo, il che ti garantirà un vantaggio.

Perché utilizzare Popup Modal nel tuo sito WordPress

Molte persone pensano che i popup siano fastidiosi. Naturalmente non li biasimo. Vai su un sito per svolgere il tuo lavoro e all'improvviso appare un popup che si interrompe, è sicuramente fastidioso. 

Ma essendo un imprenditore, devi considerare un popup in modo diverso. Perché che tu ci creda o no, questi fastidiosi popup funzionano a meraviglia. Le modalità popup hanno dimostrato di essere estremamente efficaci soprattutto nella raccolta di lead.

Secondo Sumo, hanno raccolto circa 23.645.948 indirizzi e-mail in meno di due anni utilizzando una modalità popup. In molti casi, il tasso di conversione è arrivato fino a 50,2%! 

Quindi, se stai cercando di potenziare la tua lista e-mail e accelerare il tasso di conversione, il modal pop fa al caso tuo in quanto si tratta di lead magnet comprovati.

Inoltre, le modalità sono semplici e flessibili e non è necessario rimandare gli utenti ad un'altra pagina per completare un'azione. Più lead con una migliore esperienza utente. Quindi, non pensare mai che i modali siano inutili o morti e inizia a usarli oggi.

Usi comuni di una finestra modale nel web design moderno

I modali sono molto efficaci ogni volta che hai bisogno che i visitatori del sito web intraprendano un'azione o notino qualche messaggio importante. Alcuni degli usi comuni di una finestra modale nel web design includono:

• Mostra messaggio di benvenuto
• Raccogli e-mail e lead per l'iscrizione alla newsletter
• Modulo di accesso
• Mostra un messaggio di avviso prima di agire
• Visualizza la politica sui cookie
• Visualizza contenuti multimediali come galleria di immagini (prodotto) o video, ecc.  
• Per moduli a più passaggi per una migliore esperienza utente.

Ho elencato solo alcuni dei tanti modi di utilizzare il modale nel web design. Una volta che sai come creare popup personalizzati in WordPress, troverai vari modi per utilizzarli sul tuo sito web per ottenere risultati ottimali. 

Quindi iniziamo.

Configurazione necessaria per iniziare

Presumo che tu abbia WordPress installato sul tuo sito web. Oltre a ciò, avrai bisogno di un generatore di pagine e di un plug-in popup WordPress per rendere modale il tuo sito web:

1. Elementor (versione gratuita)
2. ElementsKit (sia la versione gratuita che quella pro)

Elementor è un generatore di pagine gratuito ed ElementsKit è uno dei migliori plugin popup modali di WordPress.

Installazione completata? ora sei pronto per creare un popup personalizzato WordPress al clic su WordPress! Iniziamo ora il processo principale.

Come aggiungere popup modale in WordPress in 3 passaggi in Elementor utilizzando ElementsKit

Se pensi che aggiungere un popup al tuo sito WordPress sia difficile, preparati a rimanere sorpreso. Segui i passaggi seguenti e crea facilmente un popup modale Elementor in wp. Questo è il tutorial più semplice su come aggiungere popup in WordPress.

Passaggio 1: abilita il widget popup modale

Dopo aver installato i plugin ElementsKit, puoi abilitare Widget popup modale Elementor dalla dashboard di WordPress

• Vai a  ElementsKit  > Widget > Accendi Modalità pop-upl > Fare clic Salvare le modifiche

Passaggio 2: aggiungere il widget WP Modal Popup 

• Cerca una modale popup, trascinare e rilasciare il widget nella sezione in cui vuoi che appaia il tuo Modal.

Passaggio 3: configurare le impostazioni da completare

Fare clic sull'icona Modifica nella sezione popup per accedere alle opzioni di modifica.

• Per modificare il testo del pulsante, vai a Contenuto > Interruttore > Etichetta E modificare

• Per cambiare il titolo E sottotitolo vai a Contenuto > Intestazione e modifica le opzioni con il tuo testo personalizzato.

• Per cambiare il contenuto del corpo, espandere la sezione del contenuto e modificare il testo per creare il messaggio popup di WordPress.

• Vai a Contenuto > Piè di pagina > Pulsante > CTA e modifica l'etichetta CTA e l'URL con ElementsKit, un generatore di popup personalizzati.

• Infine, fare clic su Aggiornamento salvare.

Fatto. Ora clicca sul pulsante di anteprima per vedere i risultati e controllare come appare la finestra popup di WordPress:

Ben fatto! Hai creato il tuo popup modale Elementor.

Impostazioni aggiuntive per modale

Diamo ora un'occhiata alle impostazioni modali aggiuntive che puoi personalizzare:

Disposizione:

Espandi l'opzione di layout per modificare il tipo di interruttore, la posizione del popup e l'opzione di visualizzazione del popup.

Tipo di commutatore:

Non devi necessariamente avere una modale che si attiva quando qualcuno fa clic su un pulsante. ElementsKit ti offre altre 2 opzioni tra cui scegliere oltre al pulsante

Immagine: Puoi scegliere qualsiasi immagine personalizzata di qualsiasi dimensione invece di un pulsante come interruttore per la tua modale. Per scegliere un'immagine personalizzata 

• Vai a Contenuto > Tipo di commutatore > Scegli Immagine
• Vai a Immagine Toggler > Scegli un Immagine, dimensione dell'immagine e allineamento

Tempo: Puoi anche impostare la modale in modo che si attivi dopo un tempo specifico senza alcuna azione da parte dell'utente. Ad esempio, per impostare la modale in modo che venga visualizzata dopo 3 secondi

• Vai a Contenuto > Tipo di commutatore > Tempo
• Aggiungi tempo Attiva/disattiva Dopo (in secondi)

Tipo di spettacolo popup:

Hai due opzioni per il tipo di visualizzazione popup: Modale e Diapositiva.

Posizione popup: 

Puoi scegliere di posizionare il popup ovunque nella finestra. Le opzioni di posizione disponibili tra cui scegliere sono:

• A sinistra in alto
• Centro in alto
• In alto a destra
• Centrosinistra
• Centro
• Centrodestra
• In basso a sinistra
• In basso al centro
• In basso a destra

Apparire: 

Espandi l'opzione popup per scegliere il larghezza e altezza minima. Qui hai anche la possibilità di farlo mostrare o nascondere IL chiudi icona, intestazione e piè di pagina. Puoi anche regolare la posizione orizzontale e verticale e aggiungi animazione secondo il tuo desiderio.

Sovrapposizione: 

Nel caso in cui non desideri forzare l'utente a fare clic sulla tua modale per chiuderla, attiva il file Chiudi la sovrapposizione popup OnClick opzione. In questo modo, l'utente può fare clic in un punto qualsiasi della finestra per eliminare la modale.

Icona Chiudi: 

Qui puoi modificare la posizione dell'icona di chiusura. È possibile impostare il popup in alto a destra, il popup in alto a sinistra, la finestra in alto a destra, la finestra in alto a sinistra. Puoi anche modificare le posizioni verticale e orizzontale. Inoltre, puoi scegliere qualsiasi icona dalla libreria o utilizzare un'immagine SVG come icona.

Intestazione:

Oltre a modificare il titolo e il sottotitolo, da qui puoi anche mostrare o nascondere il divisore.

Piè di pagina:

Espandi l'opzione piè di pagina per modificare l'etichetta, la variante e l'allineamento dei pulsanti del piè di pagina. Puoi anche scegliere di nasconderli se lo desideri da qui. 

Ecco fatto! Ora puoi usare i moderni e accattivanti popup sul tuo sito web.

Per maggiori dettagli, leggere la documentazione di Widget modale popup ElementsKit per Elementor.

Come aggiungere un design personalizzato in Elementor Modal con il builder ElementsKit Popup

Ora sai come modificare testo, posizione, animare e fare molto altro per personalizzare la tua finestra modale in WordPress. Ma sembra ancora un po' noiosa, vero? Proprio come qualsiasi altro popup modale di Elementor di WordPress.

Se potessi aggiungere un'immagine personalizzata, un video o qualsiasi altro widget nella tua finestra modale proprio come una pagina, sarebbe fantastico. Puoi aggiungere qualsiasi design personalizzato al tuo modello con ElementsKit.

Segui i passaggi per creare facilmente il design personalizzato desiderato su modal:

• Vai a Contenuto > Contenuto > Accendere Abilita modello
• Fare clic sul pulsante modale e una volta aperta la modale, fare clic su opzione di modifica per aprire il area widget

• Una volta aperta l'area widget, puoi farlo ricerca per qualsiasi widget > trascinare e rilasciare > aggiornamento A salva.

Ad esempio, se desideri aggiungere un video, cerca il video nell'area widget e trascina e rilascia per aggiungere il tuo modello e aggiornarlo. Ora, il video dovrebbe apparire nella finestra modale.

Utilizza le sezioni ElementsKit predefinite per un bellissimo modale

Non hai tempo di creare un design di popup modale da zero? Nessun problema. Il generatore di popup ElementsKit fornisce molte sezioni integrate che puoi scegliere per creare coinvolgenti popup per evidenziare il tuo messaggio al visualizzatore.

Per utilizzare i widget integrati da ElementsKit, seguire i passaggi seguenti:

• Clicca sul opzione di modifica sul modale  per aprire il area widget
• Fare clic sul pulsante EK per aprire un'altra finestra del widget con le sezioni predefinite.

• Vai a > Sezioni > Scegliere la sezione che ti piace > Inserire

• Dopo l'inserimento, puoi modifica l'immagine, il testo o il colore dello sfondo in base alle tue preferenze e aggiornamento.

Ed ecco il risultato finale!

ElementsKit offre oltre 60 widget e oltre 500 sezioni pronte. Ulteriori informazioni su ElementsKit e come usarli per migliorare il tuo sito web.

Aggiungi il modulo di contatto 7 in Modal con ElementsKit

Come ho detto prima, le modalità sono efficaci per ottenere più iscrizioni alla newsletter e raccogliere dati degli utenti. Ma per questo, devi aggiungere un modulo di contatto nel tuo modale, giusto? 

Niente panico, non avrai bisogno di un altro plugin popup di WordPress per aggiungere un modulo di contatto nella tua finestra pop. Il plugin ElementsKit WordPress è un plugin per la creazione di popup tutto in uno.

Segui le istruzioni seguenti per aggiungere il popolare Contact Form 7 nel tuo modale con il plug-in per la creazione di popup ElementsKit.

Prima di seguire questi passaggi, assicurati di aver creato un modulo di contatto sul tuo sito web utilizzando il Modulo di Contatto 7, Elementor Page Builder ed ElementsKit.

Puoi anche dare un'occhiata al video tutorial qui sotto per creare un modulo di contatto.

Iniziamo.

• Vai a Contenuto > Contenuto > Accendere Abilita modello
• Clicca sul opzione di modifica per aprire il area widget
• Ricerca Modulo di Contatto, trascinare e rilasciare nella sezione in cui desideri aggiungerlo.
• Espandere l'opzione di stile nel modulo di contatto 7
• Scegli tra prefabbricato forma e aggiornamento.

Qui hai un popup modale con un modulo di contatto per potenziare la tua lista e-mail.

Sapevi che puoi creare un widget personalizzato senza avere alcuna conoscenza approfondita della programmazione? Controlla come costruire a widget personalizzato facilmente senza alcun codice utilizzando ElementsKit.

Suggerimenti efficaci per aggiungere il popup modale di WordPress Elementor

I popup modali di WordPress possono migliorare in modo significativo il coinvolgimento degli utenti, trasmettere messaggi importanti e incentivare azioni specifiche da parte dei tuoi visitatori. Ecco i 7 suggerimenti efficaci per implementare popup modali di grande impatto sul tuo sito WordPress.

1️⃣ Scegli un plugin affidabile

Seleziona un plugin modale WordPress ben gestito come Elementor” o “ElementsKit” per creare la finestra modale nel tuo sito web.

2️⃣ Definisci obiettivi chiari

Delinea chiaramente lo scopo del popup modale di WordPress, che si tratti di raccogliere e-mail, promuovere offerte o trasmettere informazioni importanti.

3️⃣ Il tempismo è fondamentale

Utilizza trigger come ritardo temporale, profondità di scorrimento o intento di uscita per visualizzare il popup al momento giusto. Ciò aiuterà a evitare interruzioni immediate del caricamento della pagina.

4️⃣ Reattività mobile

Assicurati che il tuo popup modale WordPress sia ottimizzato per i dispositivi mobili per fornire un'esperienza positiva su vari dispositivi.

5️⃣Progettare per l'esperienza dell'utente

Progetta popup modali WordPress concisi e visivamente accattivanti con contenuti di alta qualità. Includi un'opzione facilmente accessibile per chiudere il popup per gli utenti non interessati al contenuto.

6️⃣ Test A/B per l'ottimizzazione

Implementa test A/B per perfezionare la tua modalità in WordPress creando variazioni e identificando gli elementi più efficaci per il tuo pubblico.

7️⃣ Rispetto della normativa sulla privacy

Assicurati che il tuo popup modale WordPress sia conforme alle normative sulla privacy, inclusa la comunicazione trasparente della tua politica sulla privacy e l'ottenimento del consenso esplicito per la raccolta dei dati.

Domande frequenti

Incartare

Congratulazioni! Ora sai come creare popup modali Elementor in WordPress utilizzando un Componente aggiuntivo ElementorCrea popup per moduli di contatto e apporta qualsiasi personalizzazione al sito WordPress senza sforzo, utilizzando il semplice plugin per la creazione di popup, ElementsKit Pro e Elementor Page Builder.

Non fermarti qui. Continua a sperimentare quanti modi puoi usare il popup modale di WordPress sul tuo sito web. E se hai bisogno di aiuto per creare popup di WordPress usando ElementsKit, lascia un commento qui sotto.