Come far apparire il modulo di attivazione di Bloom quando si fa clic su un pulsante

Al giorno d'oggi è difficile immaginare Internet senza moduli opt-in. Li usiamo sul nostro sito Web per due motivi principali in particolare; ottenere iscritti o generare lead.

Trovare il modo giusto per avvicinarsi al tuo pubblico con i moduli di adesione può essere una vera sfida. Alcune persone vogliono giocare sul sicuro e non vogliono che i loro visitatori si sentano come se stessero "invadendo" la loro bolla Internet con moduli di attivazione indesiderati. Di solito è il momento in cui le persone scelgono un modulo di attivazione che appare dopo aver fatto clic in un punto specifico del sito Web, o come lo chiamiamo; 'Trigger al clic'.

Nel tutorial di oggi, ti mostreremo come puoi esattamente utilizzare questi trigger di clic in alcune delle parti più importanti del tuo sito web. Una volta che sei riuscito a includere l'opzione del clic sul trigger, non dimenticare di misurare i risultati che ti porta per vedere se ti aiuta a fare progressi.

Quando utilizzare un modulo di adesione dopo un clic

In pratica puoi fare in modo che qualsiasi cosa sul tuo sito web attivi un modulo di attivazione. Ma usarlo nei posti sbagliati può rapidamente ritorcersi contro di te. Le persone sono abituate a fare clic in modo casuale su un sito Web tutto il tempo; quando leggono qualcosa, per esempio. O anche solo quando si guardano intorno, spesso fanno clic da qualche parte sul sito Web senza uno scopo.

Ora immagina di essere il visitatore; con ogni clic casuale, potresti trovarti di fronte a un modulo di attivazione inaspettato a causa di un'azione che hai intrapreso senza uno scopo. Questo avrà senza dubbio un effetto negativo perché, nel momento giusto, ti sembrerà di non avere alcun controllo quando visiti quel sito web.

L'inserimento di un modulo di attivazione del trigger di clic nei luoghi in cui le persone scelgono volontariamente di fare clic o di non fare clic (come pulsanti o inviti all'azione in generale) è un'altra storia. Abbiamo familiarità con il fare clic su un CTA (call to action), quindi non ci spaventa. Scegliamo deliberatamente di vedere quale sarà il prossimo passo. Se non siamo curiosi di vedere cosa c'è dietro un CTA, semplicemente non faremo clic. Ma se vogliamo, possiamo. Questa "scelta" che hanno i visitatori li fa sentire più a loro agio quando alla fine viene visualizzato un modulo di attivazione e aumenta le possibilità che si iscrivano effettivamente alla tua newsletter.

Come far apparire il modulo di attivazione di Bloom quando si fa clic su un pulsante

Iscriviti al nostro canale Youtube

Crea il tuo modulo di adesione

Convincere le persone a fare clic sul tuo CTA è una forma d'arte. Convincere le persone a iscriversi o diventare un lead attraverso un modulo di attivazione dopo aver fatto clic sul tuo CTA è l'apprezzamento dell'arte. Devi sperimentare e trovare il modo giusto per avvicinarti al tuo pubblico di destinazione affinché entrambe le parti siano soddisfatte alla fine.

Ti mostreremo come creare un trigger di clic per due diversi pulsanti sul tuo sito Web in cui puoi beneficiare di quel tipo di modulo di attivazione; il modulo pulsante e il pulsante dell'intestazione a larghezza intera. Il modo di lavorare è lo stesso, ma vederlo in scenari diversi potrebbe aiutarti a capirne la logica. Successivamente, puoi usarlo anche per altri moduli.

Ora, prima di mostrarti come collegare i moduli di opt-in a un CTA, esamineremo le impostazioni di un modulo di opt-in. In questo post, non ti forniremo alcun design specifico, ma solo la logica. Sono necessarie alcune impostazioni per assicurarsi che il trigger di clic funzioni.

Scegli il tipo di modulo di adesione

Quando aggiungi un nuovo modulo di adesione, la prima scelta che ti troverai di fronte è il tipo di modulo di attivazione che desideri utilizzare. Per creare l'effetto trigger al clic, puoi utilizzare due dei tipi: il pop up e il fly in. Quello che molto probabilmente sceglierai è il pop up. Ma se vuoi essere un po' più sottile, puoi anche usare il fly in.

Scheda Imposta

Inizia nominando il modulo di attivazione nella scheda Configurazione del modulo di attivazione che stai creando. Quindi, collega il modulo a un provider di posta elettronica. Senza il provider di posta elettronica, l'account e l'elenco di posta elettronica, il modulo sarà inattivo.

Scheda Progettazione

All'interno della scheda Design, puoi modellare il modulo che utilizzerai. In questo post, non lo faremo. Selezioneremo un modulo di opt-in standard senza modifiche solo per vedere se funziona. Puoi, in seguito, tornare sempre al modulo di opt-in che hai creato per apportare modifiche.

Scheda Impostazioni schermo

Questa è la scheda in cui collegheremo il modulo di attivazione a uno dei pulsanti. Per assicurarti che i risultati funzionino, devi assicurarti che il modulo di opt-in possa essere visualizzato nella pagina su cui vuoi che funzioni. Se hai intenzione di utilizzare lo stesso modulo in tutto il sito Web, puoi facilmente abilitare il modulo per tutto come mostrato nell'immagine qui sotto.

Inoltre, vogliamo utilizzare il modulo di attivazione solo per i trigger su clic. Ecco perché disattiveremo tutte le altre opzioni e abiliteremo solo quella "Trigger on Click". Vedrai che il campo Selettore CSS apparirà immediatamente. Più avanti in questo post, utilizzeremo questo campo per collegare i nostri pulsanti al modulo di attivazione che stiamo creando. Lascia aperta questa pagina nella tua scheda in modo da poterla accedere subito in seguito.

Iniziamo

Sebbene la logica alla base dell'aggiunta di un modulo di attivazione del trigger di clic in diversi moduli sia la stessa, la spiegheremo in due esempi; il Button Module e il Fullwidth Header Button. Senza comprendere la logica, puoi semplicemente seguire i passaggi in questo post per realizzarlo.

Tuttavia, se desideri che il trigger di clic funzioni in altri punti rispetto a quanto spiegato di seguito, dovrai apportare una leggera modifica. L'unica cosa che cambierà è la classe che stiamo usando poiché questa è sempre diversa. Se vuoi che questo trigger si attivi per qualsiasi altra parte del tuo sito web, segui semplicemente gli stessi passaggi che mostreremo di seguito e cambia la classe CSS in base a ciò che stai utilizzando.

Connetti il ​​modulo pulsante al modulo di attivazione pop-up

Il primo esempio in cui ti guideremo è il modulo Button. La cosa bella della creazione di un trigger di clic per un modulo pulsante è che le possibilità sono infinite. Puoi creare qualsiasi tipo di sezione o riga che contenga un modulo pulsante e ottenere la creatività che desideri.

Senza ulteriori indugi, iniziamo a creare un trigger di clic per il pulsante. Abbiamo due modi per farlo; utilizzando la classe CSS o creando un ID CSS assegnato al modulo.

Usando la classe CSS

Apri la pagina o crea la pagina in cui desideri che il trigger di clic funzioni. Quindi, aggiungi un modulo pulsante o apri le impostazioni del modulo pulsante del pulsante su cui vuoi che funzioni.

Vai alla scheda Avanzate e scorri verso il basso. Fare clic nel campo Elemento principale e vedere apparire la classe CSS assegnata al pulsante. Copia la classe CSS, ci servirà subito.

Quindi, vai alla scheda Impostazioni di visualizzazione del modulo di attivazione che stai creando. Nella parte precedente, ti abbiamo già mostrato dove avverrà la magia. Abbiamo abilitato "Trigger On Click" e disabilitato tutte le altre possibilità menzionate. Proprio sotto "Trick On Click", dovrai incollare la seguente riga:

*.et_pb_button_0.et_pb_button.et_pb_module

Come puoi vedere, è semplicemente un simbolo '*' seguito dalla classe che hai copiato subito prima di questo passaggio.

Quando usi questo metodo, c'è una cosa che devi tenere a mente; la classe CSS del pulsante è diversa per ogni pulsante nella stessa pagina ma non appena aggiungi un pulsante a un'altra pagina, inizierà subito da '0'. Ciò significa che ogni primo modulo pulsante su ogni pagina attiverà il modulo di attivazione se il modulo di attivazione è disponibile per tutte le pagine e i post.

Se si desidera evitare ciò, è possibile utilizzare l'attivazione dell'attivazione del clic tramite un ID CSS. Ma nei casi in cui assegni un ID CSS specifico al modulo completo, il modo più semplice per farlo accadere è attraverso la classe CSS.

Puoi determinare su quali pagine un determinato modulo di attivazione può essere visualizzato nelle Impostazioni di visualizzazione del tuo modulo di attivazione. In questo modo, avrai il controllo e saprai esattamente su quali pagine apparirà il modulo di adesione dopo aver fatto clic sul pulsante a esso assegnato.

Usando l'ID CSS

Il secondo metodo consiste nell'utilizzare un ID CSS. Apri il Modulo pulsante, vai alla scheda Avanzate e assegnagli un ID CSS. In questo caso, useremo 'popup'.

Continua andando alla scheda Contenuto del Modulo Pulsante e scrivendo il simbolo "#" seguito da tutto ciò che desideri. In questo modo, ti assicurerai che il visitatore rimanga nello stesso punto della pagina mentre fa clic sul pulsante.

Andando avanti, torna alle impostazioni del modulo di attivazione e aggiungi "a#popup" al campo Trigger On Click. Dovresti sempre scrivere "a#" seguito dall'ID CSS che hai assegnato al modulo pulsante.

a#popup

Connetti i pulsanti di intestazione a larghezza intera al modulo di adesione

L'altro esempio in cui ti mostreremo come eseguire un modulo di attivazione Trigger On Click è il pulsante di intestazione a larghezza intera. L'unica possibilità che abbiamo qui è usare la classe CSS del pulsante. Non possiamo assegnare un ID CSS tramite il generatore Divi al pulsante in particolare.

Usando la classe CSS

Crea un'intestazione a larghezza intera o apri l'intestazione a larghezza intera in cui desideri aggiungere il modulo di attivazione Trigger On Click. Vai alla scheda Avanzate dell'intestazione Fullwidth e scorri verso il basso finché non trovi il "Pulsante uno". Fare clic sul campo e copiare la classe CSS assegnata al pulsante.

Quindi, vai alla scheda Contenuto e digita il simbolo "#" seguito da qualsiasi altra cosa nel campo URL del pulsante n. 1.

Infine, vai alla scheda Impostazioni di visualizzazione del tuo opt-in e digita il simbolo "*" seguito dalla classe che hai copiato assegnata al pulsante.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

Pensieri finali

Questo tutorial dovrebbe aiutarti a iniziare con i trigger al clic e il modulo di attivazione di Bloom. Potrebbe persino farti riconsiderare il modo in cui stai attualmente cercando di ottenere iscritti o contatti. Se hai domande o suggerimenti; sentiti libero di lasciare un commento nella sezione commenti qui sotto. E mentre sei lì; dicci in quali casi utilizzerai il modulo di attivazione Trigger On Click.

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in primo piano di BarsRsind / shutterstock.com