Come aprire un popup al clic del pulsante utilizzando Elementor? [2022]

Pubblicato: 2022-05-13

Ti chiedi come apparirà il tuo sito Web accattivante ai visitatori se si apre un popup al clic del pulsante ? Se desideri questo tipo di pulsante interattivo che apra un popup, ci sono molti modi nel costruttore di siti Web più popolare, Elementor . Oggi ti mostreremo come creare facilmente uno straordinario popup con un clic del pulsante senza codifica.

popup open on button click

5 migliori casi d'uso del pulsante con il popup modale di Elementor

Diamo un'occhiata ai vantaggi di cui godrai aprendo un popup modale di Elementor al clic del pulsante prima di iniziare con il tutorial. Fondamentalmente questo tipo di popup modale interattivo viene utilizzato per le campagne di marketing del sito web . Oltre a questi, ci sono anche tanti casi d'uso versatili per aprire un popup al clic del pulsante. Ecco i primi 5 casi d'uso del popup modale.

1. Per acquisire lead per le aziende

Per gestire la tua attività senza intoppi e aumentare la crescita aziendale, hai bisogno di lead. Coltivando i lead puoi convertirli nei tuoi clienti abituali. E un sito Web è il mezzo migliore per acquisire lead. Se si apre un popup con un clic del pulsante, è possibile raccogliere facilmente nomi, numeri di telefono, e-mail e altri dettagli dei lead .

2. Raccolta dell'abbonamento e-mail

Di solito, se aggiungi un pulsante di base per raccogliere le iscrizioni e-mail, i tuoi utenti verranno indirizzati a una nuova pagina web. Invece di farlo, puoi aprire un popup con un clic del pulsante, quindi i tuoi utenti non dovranno lasciare la pagina web corrente. Questa pratica aumenta sorprendentemente il tuo abbonamento e-mail contare senza intoppi.

Popup Opens on a Button Click

3. Promozioni e vendite di marketing

Quando esegui promozioni di marketing attraverso il tuo sito Web, un popup che si apre con un clic sul pulsante può dare al tuo sito un aspetto interattivo e aumentare le vendite . Puoi aggiungere immagini, moduli, buoni sconto speciali, ecc. su un singolo popup di Elementor. Senza rendere indesiderato il tuo sito Web insieme alle sezioni di promozione, puoi sostituirlo con un popup che si apre con un clic del pulsante.

4. Condivisione di annunci emozionanti

Se hai intenzione di annunciare un grande rilascio o altri annunci e promozioni entusiasmanti, il popup che si apre facendo clic su un pulsante può essere il modo migliore. Conferirà al tuo sito Web un aspetto straordinario e potrai decorare il sito Web con coriandoli virtuali e altre decorazioni festive. Inoltre, se hai intenzione di annunciare grandi novità "in arrivo", il popup che si apre con un clic sul pulsante può aiutarti a creare il buzz .

5. Usa come blocco contenuto

Quando si dispone di un sito Web multiuso, potrebbe essere necessario fornire restrizioni sui contenuti in base a età, abbonamento, abbonamento e molti altri. Se fornisci contenuti con restrizioni direttamente su una sezione del sito web, il conteggio dei clic per azione diminuirà sicuramente. Invece di questo, puoi creare un attraente popup che si apre istantaneamente facendo clic sul pulsante.

Popup Opens on a Button Click

Perché Elementor è la migliore piattaforma per creare popup su un pulsante?

Nei siti Web, ci sono diversi modi per creare un popup che si apre facendo clic su un pulsante in WordPress. Un modo per farlo è tramite la codifica personalizzata o l'assunzione di esperti. Se non sei un esperto di tecnologia, fare codici o assumere esperti potrebbe costarti una fortuna. Ma quando usi Elementor , il costruttore di siti Web WordPress più popolare, puoi farlo senza codificare .

Per creare un popup si apre con un clic del pulsante, puoi farlo semplicemente trascinando e rilasciando , senza bisogno di codifica. Inoltre, con l'aiuto di Elementor Popup builder, la creazione di un popup si apre con un clic del pulsante è così semplice che puoi crearlo tutto da solo. Elementor offre opzioni di personalizzazione e personalizzazione illimitate. Quindi, allineandolo con il valore del marchio del tuo sito web, puoi creare qualsiasi tipo di popup che si apre istantaneamente con un clic del pulsante.

Popup Opens on a Button Click

Tutorial senza codice: come aprire un popup modale Elementor al clic del pulsante?

Ora entriamo nel tutorial e iniziamo ad aprire un popup facendo clic sul pulsante. Prima di iniziare a creare un popup di Elementor, tutto ciò di cui hai bisogno sono 5 minuti di concentrazione e segui questo semplice tutorial passo dopo passo.

Passaggio 1: inizia con Elementor PRO

Se hai intenzione di creare un popup modale che si apre con un clic del pulsante utilizzando Elementor, devi ottenere Elementor PRO . Con la funzione esclusiva di Elementor PRO, Elementor Popup Builder , puoi creare istantaneamente popup che si aprono con un clic del pulsante. Elementor viene fornito con piani tariffari versatili, a partire da $ 49 . Dopo aver ottenuto il plug-in Elementor PRO, installalo e attivalo sul tuo sito Web WordPress.

Popup Opens on a Button Click

Passaggio 2: crea un modello utilizzando Elementor Popup Builder

Ora è il momento di creare un modello per il popup che si apre con un clic del pulsante. Per fare ciò, vai alla dashboard di WordPress, vai su Modelli → Popup . Facendo clic sulla scheda, ti porterà immediatamente al generatore di popup di Elementor. Quindi fare clic sul pulsante "Aggiungi nuovo popup" . Apparirà un popup. Il tipo di modello viene selezionato automaticamente come popup. Puoi dare un nome al modello se lo desideri e quindi fare clic sul pulsante "Crea modello" .

Popup Opens on a Button Click

Quindi verrai reindirizzato alla Libreria di modelli di Elementor . Sono disponibili oltre 100 raccolte popup in categorie versatili. In base ai requisiti del tuo sito Web WordPress, seleziona un modello di popup Elementor adatto. Fare clic sul modello per ottenere una breve anteprima. Quindi fare clic sul pulsante "Inserisci" per aprire il popup modale con un clic del pulsante.

Popup Opens on a Button Click

Passaggio 3: configura e personalizza il modello popup

Successivamente, il pannello dell'editor di Elementor si aprirà con tutte le opzioni di configurazione sul lato sinistro. Da lì puoi facilmente personalizzare il popup che si apre con un clic del pulsante. Puoi mantenere il popup modale con Boxed o Full Width . Allo stesso modo, puoi configurare l'altezza del popup modale, lo spazio tra le colonne, la posizione delle colonne, l'allineamento verticale, l'overflow, i tag HTML e molti altri. Diversi tipi di larghezza offrono diversi tipi di configurazione.

Popup Opens on a Button Click

Per personalizzare il contenuto del popup modale, fai semplicemente clic sul testo, sull'immagine o sui pulsanti. Immediatamente il pannello di modifica si aprirà sulla sinistra. Puoi facilmente modificare il contenuto del popup, la famiglia di caratteri, ecc. Aggiungi anche più sezioni di output e-mail, altezza del pulsante, larghezza, colore, testo e molti altri. È disponibile un'opzione per impostare le azioni dopo l'invio, gestire gli invii, aggiungere contenuto e-mail personalizzato, e-mail del destinatario, ID e-mail del mittente, ecc. Dopo aver apportato tutte le modifiche, fare clic sul pulsante "Pubblica" .

Popup Opens on a Button Click

Passaggio 4: impostare condizioni e trigger

Puoi usufruire del popup che si apre con un clic del pulsante per l'intero sito Web di WordPress o per pagine selettive. Puoi includere o escludere il popup di Elementor anche dalle pagine selezionate. Tutte queste configurazioni sono disponibili nella scheda "Condizione" .

Dalla scheda "Trigger" , devi impostare quando vuoi che il popup si apra con un clic del pulsante. Poiché vogliamo visualizzare in anteprima il popup utilizzando il clic del pulsante, attivare 'Al clic' per abilitare. Da "Regole avanzate" puoi configurare condizioni come a chi mostrare il popup, mostrare quando arriva il modulo e molto altro. Quindi fare clic sul pulsante "Salva e chiudi" . Ecco come puoi creare facilmente un modello popup di Elementor. Quindi torna alla dashboard di WordPress.

Popup Opens on a Button Click

Passaggio 4: aggiungi un pulsante Elementor dove ti serve

Ora, apri una pagina in cui desideri impostare un popup che si apre con un clic del pulsante. Se vuoi creare una nuova pagina, vai su Pagine → Aggiungi nuovo . per questo tutorial, collegheremo il popup modale con il pulsante Elementor. Trascina e rilascia il pulsante Elementor sulla tua pagina.

Popup Opens on a Button Click

Personalizza l'aspetto del pulsante, il testo, ecc. per adattarlo al colore del marchio del tuo sito web. Il prossimo passo è collegare il pulsante con il modale popup. Per fare ciò, fai clic su "Tipo dinamico" dal campo "Collegamento" , scegli Popup da Azioni . Quindi, fai clic sull'icona "Impostazioni" accanto al popup e seleziona il modello di popup creato in precedenza. Questo è tutto!

Popup Opens on a Button Click

L'ultima occhiata del popup si apre al clic del pulsante Elementor

Questo è quanto facilmente puoi creare un popup che si apre con un clic del pulsante. Dopo aver apportato altre personalizzazioni, pubblica la pagina. Ora all'anteprima per verificare come si apre un popup con un clic del pulsante.

Popup Opens on a Button Click

Se desideri utilizzare lo stesso pulsante per pagine diverse, copia e incolla il pulsante in una nuova pagina web. Inoltre, puoi copiare lo shortcode del modello di popup di Elementor e utilizzarlo ovunque desideri aggiungere un popup che si apre con un clic del pulsante.

Bonus per componenti aggiuntivi essenziali per gli utenti di Elementor

Componenti aggiuntivi essenziali per Elementor è la libreria Elementor più potente con oltre 1 milione di utenti attivi e oltre 85 widget unici. E il suo widget Pulsante creativo ha un design più versatile e un'usabilità multiuso per i suoi clienti. Se stai utilizzando il widget del pulsante Componenti aggiuntivi essenziali, in modo simile al pulsante Elementor, puoi aprire facilmente un popup con un clic del pulsante.

Popup Opens on a Button Click

Elementor ha semplificato lo sviluppo di siti Web. Come il popup che si apre con un clic del pulsante, puoi creare funzionalità più straordinarie e versatili per il tuo sito Web WordPress. Ecco la fine di questo tutorial. Se hai trovato utile questo tutorial, non dimenticare di condividerlo con gli altri.

Facci sapere come si crea un popup che si apre con un clic del pulsante utilizzando Elementor nella nostra community di Facebook . Inoltre, iscriviti il nostro blog per rimanere aggiornato su questo tipo di tutorial, suggerimenti e trucchi.