Cum să faceți să apară formularul de înscriere Bloom când faceți clic pe un buton

În zilele noastre este greu să ne imaginăm internetul fără formulare de înscriere. Le folosim pe site-ul nostru web din două motive principale, în special; obținerea de abonați sau generarea de clienți potențiali.

Găsirea modului potrivit de abordare a publicului dvs. cu formulare de înscriere poate fi o adevărată provocare. Unii oameni doresc să-l joace în siguranță și nu vor să-i facă pe vizitatori să simtă că „își invadează” balonul de internet cu formulare de înscriere nedorite. Acesta este de obicei momentul în care oamenii aleg un formular de înscriere care apare după ce faceți clic undeva pe site sau cum îl numim; „Trigger On Click”.

În tutorialul de astăzi, vă vom arăta exact cum puteți utiliza aceste declanșatoare de clicuri în unele dintre cele mai importante părți ale site-ului dvs. web. După ce ați reușit să includeți opțiunea de clic pe declanșator, nu uitați să măsurați rezultatele pe care vi le aduce pentru a vedea dacă vă ajută să faceți progrese.

Când se folosește un formular de înscriere după un clic

Practic, puteți face orice pe site-ul dvs. să declanșeze un formular de înscriere. Dar utilizarea acestuia în locuri greșite se poate întoarce rapid împotriva ta. Oamenii sunt obișnuiți să facă tot timpul clic aleator pe un site web; când citesc ceva, de exemplu. Sau chiar chiar atunci când se uită în jur, fac deseori clic pe undeva pe site fără un scop.

Acum imaginați-vă că sunteți vizitatorul; la fiecare clic aleatoriu, s-ar putea să vă confruntați cu un formular neașteptat de înscriere din cauza unei acțiuni pe care ați făcut-o fără un scop. Acest lucru va avea, fără îndoială, un efect negativ, deoarece, în acel moment potrivit, veți simți că nu aveți deloc control când vizitați acel site web.

Plasarea unui formular de declanșare a declanșării clicurilor în locurile în care oamenii aleg voluntar să facă clic sau să nu facă clic (cum ar fi butoanele sau îndemnurile în general) este o altă poveste. Suntem familiarizați să facem clic pe un CTA (îndemn la acțiune), astfel încât să nu ne sperie. Alegem în mod deliberat să vedem ce pas urmează. Dacă nu suntem curioși să vedem ce se află în spatele unui CTA, pur și simplu nu vom face clic. Dar dacă vrem, putem. Această „alegere” pe care o au vizitatorii, îi face să se simtă mai ușor atunci când apare în cele din urmă un formular de înscriere și crește șansele ca ei să se înscrie efectiv la buletinul dvs. informativ.

Cum să faceți să apară formularul de înscriere Bloom când faceți clic pe un buton

Abonați-vă la canalul nostru Youtube

Creați formularul de înscriere

A determina oamenii să facă clic pe CTA este o formă de artă. A face pe oameni să se aboneze sau să devină un potențial printr-un formular de înscriere după ce faceți clic pe CTA este aprecierea artei. Trebuie să experimentați și să găsiți modalitatea corectă de a vă apropia de publicul țintă pentru ca ambele părți să fie încântate în cele din urmă.

Vă vom arăta cum să declanșați un clic pentru două butoane diferite de pe site-ul dvs. web, unde puteți beneficia de acest tip de formular de înscriere; Modulul Buton și Butonul Antet Lățime completă. Modul de lucru este același, dar vizualizarea acestuia în diferite scenarii vă poate ajuta să înțelegeți logica. După aceea, îl puteți utiliza și pentru alte module.

Acum, înainte de a vă arăta cum să legați formularele de înscriere la un CTA, vom parcurge setările unui formular de înscriere. În această postare, nu vă vom oferi niciun design specific, ci mai degrabă doar cu logica. Există câteva setări care sunt necesare pentru a vă asigura că declanșatorul de clic funcționează.

Alegeți tipul formularului de înscriere

Când adăugați un nou formular de înscriere, prima alegere cu care vă veți confrunta este tipul de formular de înscriere pe care doriți să îl utilizați. Pentru a crea efectul declanșator la clic, puteți utiliza două dintre tipuri: pop-up și fly in. Cel pe care cel mai probabil îl veți alege este pop-up-ul. Dar dacă vrei să fii puțin mai subtil, poți folosi și musca.

Fila Configurare

Începeți prin denumirea formularului de înscriere în fila Configurare a formularului de înscriere pe care îl creați. Apoi, conectați formularul la un furnizor de e-mail. Fără furnizorul de e-mail, contul și lista de e-mailuri, formularul va fi inactiv.

Fila de proiectare

În fila Proiectare, puteți stiliza formularul pe care îl veți folosi. În această postare, nu vom face asta. Vom selecta un formular standard de înscriere fără modificări doar pentru a vedea dacă funcționează. Mai târziu, puteți reveni întotdeauna la formularul de înscriere pe care l-ați creat pentru a face modificări.

Afișați fila Setări

Aceasta este fila în care vom lega formularul de înscriere la unul dintre butoane. Pentru a vă asigura că rezultatele funcționează, trebuie să vă asigurați că formularul de înscriere este permis să fie afișat pe pagina pe care doriți să funcționeze. Dacă doriți să utilizați același formular pe întregul site web, puteți activa cu ușurință formularul pentru toate, așa cum se arată în imaginea de mai jos.

În plus, dorim să folosim formularul de înscriere numai pentru declanșatoare la clic. De aceea, vom dezactiva toate celelalte opțiuni și vom activa doar opțiunea „Trigger on Click”. Veți vedea că câmpul CSS Selector va apărea imediat. Mai târziu în această postare, vom folosi acest câmp pentru a lega butoanele noastre la formularul de înscriere pe care îl creăm. Lăsați această pagină deschisă în fila dvs., pentru a putea accesa imediat aceasta mai târziu.

Să începem

Deși logica din spatele adăugării unui formular de activare a declanșării clicurilor în diferite module este aceeași, o vom explica în două exemple; Modulul de butoane și Butonul de antet cu lățime completă. Fără a înțelege logica, puteți urma pur și simplu pașii din această postare pentru ca aceasta să se întâmple.

Cu toate acestea, dacă doriți ca declanșatorul de clic să funcționeze în alte locuri decât cele explicate mai jos, va trebui să faceți o ușoară modificare. Singurul lucru care se va schimba este clasa pe care o folosim, deoarece aceasta diferă întotdeauna. Dacă doriți să faceți acest clic declanșator pentru orice altă parte a site-ului dvs. web, trebuie doar să urmați aceiași pași pe care îi vom arăta mai jos și să modificați clasa CSS în funcție de ceea ce utilizați.

Conectați modulul buton la formularul de înscriere pop-up

Primul exemplu pe care îl vom ghida este modulul buton. Lucrul frumos la crearea unui declanșator de clic pentru un modul buton este că posibilitățile sunt nelimitate. Puteți crea orice tip de secțiune sau rând care conține un modul de butoane și puteți deveni creativ cât doriți.

Fără alte date, să începem să creăm un declanșator de clic pentru buton. Avem două modalități de a face acest lucru; prin utilizarea clasei CSS sau prin crearea unui ID CSS atribuit modulului.

Prin utilizarea clasei CSS

Deschideți pagina sau creați pagina în care doriți să funcționeze declanșatorul de clic. Apoi, adăugați un modul buton sau deschideți setările modulului buton al butonului pe care doriți să funcționeze.

Accesați fila Advanced și derulați în jos. Faceți clic în câmpul Element principal și urmăriți clasa CSS atribuită butonului. Copiați clasa CSS, vom avea nevoie de ea imediat.

Apoi, accesați fila Setări de afișare din formularul de înscriere pe care îl creați. În partea anterioară, v-am arătat deja unde se va întâmpla magia. Am activat „Trigger On Click” și am dezactivat toate celelalte posibilități menționate. Chiar sub „Trick On Click”, va trebui să lipiți următoarea linie:

*.et_pb_button_0.et_pb_button.et_pb_module

După cum puteți vedea, este pur și simplu doar un simbol „*” urmat de clasa pe care ați copiat-o chiar înainte de acest pas.

Când utilizați această metodă, trebuie să țineți cont de un lucru; butonul CSS Class diferă pentru fiecare buton din aceeași pagină, dar de îndată ce adăugați un buton la altă pagină, acesta va începe de la „0” imediat. Aceasta înseamnă că fiecare prim modul de buton de pe fiecare pagină va declanșa formularul de înscriere dacă formularul de înscriere este disponibil pentru toate paginile și postările.

Dacă doriți să evitați acest lucru, puteți utiliza să faceți clic pe declanșator printr-un ID CSS. Dar în cazurile în care atribuiți un ID CSS specific modulului complet, cel mai simplu mod de a face acest lucru este prin intermediul clasei CSS.

Puteți stabili în ce pagini poate apărea un anumit formular de înscriere în Setările de afișare din formularul de înscriere. Procedând astfel, veți avea controlul și veți ști exact pe ce pagini va apărea formularul de înscriere după ce faceți clic pe butonul care i se atribuie.

Prin utilizarea CSS ID

A doua metodă este folosirea unui ID CSS. Deschideți modulul de butoane, accesați fila Advanced și dați-i un ID CSS. În acest caz, vom folosi „popup”.

Continuați accesând fila Conținut a modulului Buton și scriind simbolul „#” urmat de orice doriți. Procedând astfel, vă veți asigura că vizitatorul rămâne în același loc de pe pagină în timp ce faceți clic pe buton.

Continuând, reveniți la setările formularului de înscriere și adăugați „a # popup” în câmpul Trigger On Click. Ar trebui să scrieți întotdeauna „a #” urmat de ID-ul CSS pe care l-ați atribuit modulului Buton.

a#popup

Conectați butoanele antetului cu lățime completă la formularul de înscriere

Celălalt exemplu în care vă vom arăta cum să faceți un formular de înscriere Trigger On Click este butonul Fullwidth Header. Singura posibilitate pe care o avem aici este utilizarea butonului clasă CSS. Nu putem atribui un ID CSS prin intermediul constructorului Divi butonului în special.

Prin utilizarea clasei CSS

Creați un antet cu lățime completă sau deschideți antetul cu lățime completă unde doriți să adăugați formularul de înscriere Trigger On Click. Accesați fila Advanced din antetul Fullwidth și derulați în jos până când întâlniți „Button One”. Faceți clic pe câmp și copiați clasa CSS atribuită butonului.

Apoi, accesați fila Conținut și tastați simbolul „#” urmat de orice altceva în câmpul URL al butonului # 1.

În cele din urmă, accesați fila Setări afișare a opțiunii dvs. și tastați simbolul „*” urmat de clasa pe care ați copiat-o atribuită butonului.

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

Gânduri finale

Acest tutorial ar trebui să vă ajute să începeți cu declanșatoarele la clic și formularul de înscriere Bloom. S-ar putea chiar să te facă să reconsideri modul în care încerci în prezent să câștigi abonați sau clienți potențiali. Dacă aveți întrebări sau sugestii; nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos. Și cât timp ești acolo; spuneți-ne în ce cazuri ați utiliza formularul de înscriere Trigger On Click.

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de BarsRsind / shutterstock.com