Cum se deschid butoanele antet și glisor Divi Fullwidth într-o filă / fereastră nouă

Știm cu toții că crearea unui site web care să atragă și să vorbească unui anumit public este un proces. Fiecare acțiune pe care o iau asupra site-ului dvs. web este importantă, deoarece face parte din călătoria clienților lor. Fiecare vizitator și potențial client trebuie să se simtă abordat și înțeles personal.

Punerea la dispoziție a site-ului dvs. web necesită o mulțime de lucruri, cum ar fi un design bun, un conținut bine gândit și cu siguranță suficiente CTA-uri care să-i împingă pe vizitatori să facă acțiunile atât pe voi, cât și pe ei .

Unul dintre cele mai utilizate elemente care acceptă apelurile la acțiune pe un site web este un buton. De obicei, puteți găsi butoane în diferite secțiuni ale unui site web. Pot duce la diferite părți ale site-ului web sau pot trimite un vizitator la un site web extern.

Cu Divi, permitem fiecărei persoane care creează un site web să își includă butoanele oriunde dorește și cât de mult dorește. Dacă doriți să interacționați cu publicul țintă într-un mod rapid și dacă doriți să declanșați curiozitatea chiar de la începutul vizitei lor pe site-ul dvs., este un lucru bun să adăugați un CTA în secțiunea erou.

De ce ar trebui să deschideți automat un link într-o filă / fereastră nouă?

Nu putem influența deschiderea unui link într-o fereastră nouă. Este ceva pe care mulți oameni l-au folosit în mod greșit în trecut, iar acum, totul depinde de preferințele pe care le are utilizatorul. Cu toate acestea, avem opțiunea de a deschide un anumit link într-o filă nouă în loc de în aceeași fereastră. Există o mulțime de motive pentru care ați dori să deschideți un link într-o filă nouă, iată câteva dintre ele:

Nu lăsați vizitatorii să scape de site

În momentul în care vă pierdeți vizitatorii, este atât de dificil să îi readuceți din nou pe site-ul dvs. web. Acesta este de obicei cazul când le trimiteți la un site web extern în aceeași fereastră atunci când faceți clic pe un buton.

Deci, de ce să-i trimitem în primul rând? Prin deschiderea butoanelor într-o filă nouă, vă asigurați că acestea au încă o pagină deschisă cu site-ul dvs. web în filele lor. Aceștia pot reveni la pagina dvs. fără a fi nevoie să parcurgă istoria lor.

Continuarea șederii lor pe site-ul dvs. web după ce ați închis linkul pe care l-au deschis

Este un lucru firesc să închizi o filă ori de câte ori ai terminat de citit ceva. Este fie asta, fie faci clic. În ambele situații, din momentul în care trec la o acțiune următoare, sunt la un pas mai departe de tine.

Deschiderea automată a linkului într-o filă sau fereastră nouă vă ajută să reamintiți cum au aterizat în altă parte, în primul rând; prin intermediul site-ului dvs. web.

Ridicând pe fila deschisă mai târziu

Nu ați fi prima persoană care să aibă o grămadă de file aliniate unul lângă celălalt timp de zile. Exact ceea ce face valoros să vă păstrați prezentul în browserul oamenilor. Dacă vizitatorii găsesc site-ul dvs. web în filele deschise după câteva zile, s-ar putea să fi avut timp să lase conținutul să se scufunde și să-i dea o nouă rundă.

Probabil că conținutul va fi mult mai înțeles atunci când va fi citit pentru a doua, a treia sau a patra oară.

Începeți: deschideți butoanele antet și glisor cu lățime completă în fila nouă

Când nu folosim o secțiune de lățime completă cu un antet de lățime completă sau un glisor de lățime completă, adăugăm de obicei o secțiune standard și adăugăm manual module de butoane. În fila Conținut a fiecărui modul de butoane, puteți alege dacă doriți să deschideți un link în aceeași fereastră sau o filă nouă. Puteți găsi această opțiune în subcategoria Link din fila Conținut.

În antetul și glisorul Fullwidth, aceste posibilități nu sunt incluse. Și deoarece HTML este predefinit, nu putem modifica pur și simplu codul HTML care vine împreună cu acesta. De aceea, vom adăuga un cod jQuery care va face ca butoanele Fullwidth Header și Fullwidth Slider să se deschidă într-o nouă filă / fereastră.

Crearea unui antet Fullwidth

Să începem prin adăugarea unei noi secțiuni de lățime completă la o pagină existentă sau nouă.

În secțiunea cu lățime completă, selectați antetul lățime completă. Antetul Fullwidth oferă un site web cu un antet frumos, care are tot ce are nevoie. Acum, derulați în jos fila Conținut din antetul Fullwidth și scrieți textul pe care doriți să-l afișeze pe buton. După aceea, adăugați și un link la buton.

Apoi, accesați fila Advanced din antetul Fullwidth și derulați în jos până când dați câmpurile butonului. În acest caz, dorim să folosim doar butonul numărul unu. Să presupunem că doriți să deschideți al doilea buton într-o filă nouă, va trebui să utilizați clasa atribuită butonului doi.

Faceți clic în câmpul Butonul 1 și urmăriți clasa care apare într-o culoare portocalie. Clasa este „.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button”. Vom avea nevoie de această clasă în codul nostru jQuery. Dacă doriți ca al doilea buton să se deschidă într-o filă sau fereastră nouă, continuați și salvați acea clasă undeva.

Crearea unui glisor de lățime completă

Dacă doriți să adăugați un glisor de lățime completă, continuați și adăugați o nouă secțiune de lățime completă. De data aceasta, plasați un glisor Fullwidth în secțiune. Scrieți textul butonului în fila Conținut și treceți la fila Avansat.

Derulați în jos acea filă până când găsiți opțiunea Slide Button. Copiați clasa atribuită a butonului care face parte din glisorul Fullwidth.

Adăugarea codului jQuery la Opțiunile temei Divi

Codul pe care îl vom folosi pentru a ajuta la deschiderea linkurilor într-o filă nouă pentru antetul și glisorul Fullwidth sunt diferite. Pe lângă aceasta, putem integra și codul jQuery în site-ul nostru web în două moduri diferite. Cea mai obișnuită este adăugarea de cod la Opțiunile temei de pe site-ul dvs. Divi.

Motivul pentru care oamenii folosesc această opțiune cel mai des este că se va aplica întregului site web. Pe orice pagină a site-ului dvs. ați putea fi, se va aplica codul. Este cel mai simplu mod de a adăuga cod personalizat pe site-ul dvs. dacă reutilizați anumite secțiuni sau elemente din diferite pagini ale site-ului dvs. web.

Pentru a adăuga codul la întregul dvs. site web, accesați Divi> Opțiuni tematice> Integrare și adăugați următorul cod la <head> al site-ului dvs. web :

Cod jQuery pentru butonul Fullwidth Header

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Cod jQuery pentru butonul glisor Fullwidth

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Nu uitați să adăugați textul între etichetele <script> așa cum se arată în ecranul de imprimare de mai sus.

După cum puteți observa, codul este ușor diferit pentru antetul Fullwidth și glisorul Fullwidth. Puteți observa cum clasa fiecărui buton este scrisă între paranteze în a treia linie a codului. Deci, să presupunem că doriți să faceți codul să se aplice celui de-al doilea buton al antetului Fullwidth, înlocuiți doar clasa scrisă cu cea atribuită celui de-al doilea buton.

După aceea, salvați modificările. Codul se va aplica imediat pe întregul site web.

Adăugarea codului jQuery la modulul de cod

O altă posibilitate de a adăuga codul pe site-ul dvs. web este utilizând modulul de cod. Acest modul este de obicei utilizat atunci când codul pe care doriți să îl includeți se aplică numai unei singure pagini.

Deschideți pagina în care doriți să aplicați modificările și adăugați un rând cu o coloană în partea de sus a paginii. După aceea, adăugați un modul de cod la acel rând.

Copiați același cod și lipiți-l în caseta de conținut din subcategoria text a filei Conținut.

Cod jQuery pentru butonul Fullwidth Header

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Cod jQuery pentru butonul glisor Fullwidth

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Salvați modificările.

Nu uitați să adăugați textul între etichetele <script> așa cum se arată în ecranul de imprimare de mai sus. Codul se va aplica acum doar acelei pagini a site-ului web.

Gânduri finale

Adăugarea următorului cod pe site-ul dvs. este necesară numai atunci când doriți să se deschidă un buton într-o filă nouă în timp ce utilizați antetul și glisorul pentru lățime într-o secțiune lățime completă. Cu modulul Buton, aveți o opțiune inclusă în Divi Builder, unde puteți alege să deschideți un link într-o filă nouă.

Dacă doriți să utilizați codul în mai multe pagini ale site-ului dvs. web, adăugați-l la Opțiunile tematice ale site-ului dvs. web. Dar dacă folosiți codul doar pentru un antet Fullwidth sau un glisor Fullwidth, este mai bine să adăugați codul într-un modul de cod pe pagina respectivă.

Cât de des vă faceți linkurile deschise într-o filă nouă și de ce? Spuneți-ne în secțiunea de comentarii de mai jos!