Cum se elimină câmpurile de nume ale modulului Divi Email Optin

În tutorialul de astăzi, vă vom arăta cum să eliminați câmpurile de nume ale modulului Divi Email Optin. Ștergerea câmpurilor de nume nu înseamnă doar să vă asigurați că câmpul de nume și prenume, care sunt standard în modulul optin de e-mail, nu apar vizual. Este vorba și despre funcționalitate. În mod implicit, prenumele și adresa de e-mail sunt necesare pentru un abonament. De aceea, simplificarea invizibilizării câmpurilor de nume nu va ajuta procesul.

Pentru a vă ajuta să faceți acest lucru, vă vom arăta totuși cum să scăpați vizual de câmpurile de nume și să-l facem să funcționeze și funcțional.

Rezultat

Dacă urmați această postare pas cu pas, veți obține următorul rezultat:

De ce ați dori să eliminați câmpurile de nume ale modulului Optin pentru e-mail

Probabil există câteva motive pentru care doriți să eliminați câmpurile de nume. Dacă nu ai idee de ce; aruncați o privire la două motive enumerate mai jos.

Pentru a economisi timpul vizitatorului

Primul motiv ține cont de experiența utilizatorului. Solicitând doar un câmp de e-mail, vizitatorii dvs. vor avea posibilitatea de a interacționa rapid cu dvs. Singurul lucru pe care trebuie să-l facă este să tastați adresa de e-mail și le veți furniza conținutul de care sunt interesați.

Pentru a reduce bariera / a se baza pe un comportament rapid

Dacă oamenii ar completa toate modulele optin pe care le întâlnesc pe web, probabil că le-ar fi rămas fără timp. În prezent, formularele Optin fac parte din tot felul de site-uri web. Zilele în care oamenii erau fascinați de ei s-au încheiat. Dacă văd că trebuie să depună prea mult efort (citiți: trebuie să completeze prea multe câmpuri obligatorii) pentru a fi abonați, probabil că îl vor ignora. Cu toate acestea, dacă solicitați doar adresa de e-mail, este mai probabil ca acestea să fie în regulă cu asta. Este nevoie de maxim 5 secunde pentru a tasta o adresă de e-mail (care este mai mică decât media de 7 secunde de atenție pe care o au oamenii).

Cum se elimină câmpurile de nume ale modulului Divi Email Optin

Abonați-vă la canalul nostru Youtube

Fără alte întârzieri, să facem acest lucru.

Adăugați o pagină nouă

Primul lucru pe care trebuie să-l faceți este să adăugați o pagină nouă sau să deschideți pagina în care doriți să plasați modulul Optin de e-mail numai cu câmpul de e-mail.

Adăugați modulul Optin de e-mail

După ce vă aflați pe pagina respectivă, adăugați modulul Optin de e-mail oriunde doriți să se potrivească. Odată ce previzualizați pagina cu modulul Optin pentru e-mail, veți vedea că va arăta astfel:

Dacă mergeți mai departe și faceți clic pe butonul de abonare, fără a completa vreun câmp, veți vedea că nu va funcționa. În mod implicit, modulul Optin de e-mail necesită un prenume și o valoare de e-mail pentru ca acesta să funcționeze. De aceea, doar să faci ca câmpurile să dispară (dar există încă) nu va funcționa. Nici eliminarea lor nu va funcționa.

Totuși, ceea ce puteți face este să adăugați o valoare implicită câmpului prenume. Ați putea folosi ceva de genul „*”, care va asigura doar că câmpul are o valoare. Un alt lucru pe care trebuie să-l facem este să ștergem etichetele care sunt legate de câmpurile de intrare. Pentru a realiza toate acestea, vom folosi un cod jQuery și un cod CSS.

Adăugați cod CSS

Vom începe prin adăugarea codului CSS. Codul CSS se va asigura exclusiv că cele două câmpuri nu vor fi afișate pe pagină. Pentru partea funcțională, va trebui să folosim câteva linii de cod jQuery.

Puteți face ca codul CSS să se aplice în special unei pagini sau întregului site web. Metoda pe care o veți utiliza va depinde cel mai probabil de cât de des doriți să utilizați modulul de cod numai cu câmpul de e-mail. Dacă doriți să utilizați modulul Email Optin de mai multe ori și în diferite pagini, utilizați a doua metodă. Dacă doriți să o faceți să conteze pentru o singură pagină, utilizați prima metodă.

Adăugați cod CSS la o pagină în special

Pentru a adăuga codul CSS la o pagină în special, faceți clic pe următoarea pictogramă din pagina la care lucrați:

În ecranul care apare, copiați și lipiți următoarele linii de cod CSS:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

Adăugați cod CSS la Opțiunile temei

Pentru a adăuga codul CSS pe întregul site web, accesați tabloul de bord WordPress> Divi> Opțiuni temă> Derulați în jos fila General și adăugați următoarele linii de cod CSS în câmpul CSS personalizat:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

Adăugați cod jQuery

Mai departe, vom adăuga codul jQuery necesar. Pentru a adăuga codul jQuery, aveți și două posibilități: adăugați codul pentru a-l aplica pe o pagină în special sau adăugați codul pe întregul site web.

Adăugați cod jQuery la o pagină în mod special (modul de cod)

Pentru a adăuga codul jQuery la o pagină în special, adăugați un modul de cod chiar sub modulul Optin de e-mail. Deschideți modulul de cod și plasați următoarele linii de cod jQuery în el:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Deoarece am eliminat eticheta, ne asigurăm că valoarea câmpului de adresă de e-mail nu conține nimic. Pentru a compensa eticheta și pentru a ne asigura că oamenii știu ce să scrie, folosim un substituent. În acest caz, substituentul este „adresa de e-mail”, dar nu ezitați să transformați acest lucru în orice altceva.

Adăugați cod jQuery la Opțiunile temei

Pentru ca codul jQuery să se aplice întregului site web, îl puteți plasa în Opțiunile temei. Pentru aceasta, accesați tabloul de bord WordPress> Divi> Opțiuni tematice> Integrare și plasați următoarele linii de cod jQuery în capul site-ului dvs. web:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Rezultat

Dacă urmați fiecare pas din această postare și aplicați codul CSS și jQuery pe o pagină în special sau pe toate paginile site-ului dvs. web, ar trebui să obțineți următorul rezultat:

Gânduri finale

În această postare, v-am arătat cum să realizați un modul Optin de e-mail care are doar un câmp de adresă de e-mail. Motivul pentru care ați putea dori să obțineți un astfel de rezultat este acela al eficacității. Solicitând doar adresa de e-mail, publicul dvs. va trebui să depună mai puține eforturi pentru a fi abonați și veți putea să vă construiți lista de e-mailuri mai repede. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

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 adichrisworo / shutterstock.com