Cum să proiectezi o poartă de bun venit pentru pagina ta în Divi

O poartă de bun venit este o modalitate eficientă de a spori conversiile oricărui îndemn la site-ul dvs. De fapt, porțile de bun venit sunt o caracteristică populară cu pluginuri precum OptinMonster pentru crearea de opțiuni de e-mail cu conversie ridicată. Ideea de bază din spatele unei porți de bun venit este de a ascunde conținutul paginii web cu un îndemn la ecran complet. Aceasta forțează utilizatorul să interacționeze cu CTA înainte de a vizualiza pagina intenționată.

În acest tutorial, vă vom arăta o modalitate rapidă și ușoară de a adăuga o poartă de bun venit personalizată pe pagina dvs. web fără a utiliza un plugin. Acest lucru poate fi util pentru a spori conversiile CTA-urilor dvs. pe paginile de destinație.

Verifică!

Trage cu ochiul

Iată o privire rapidă la poarta de bun venit pe care o vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi resubscris sau veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să ajungem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Selectați opțiunea „Alegeți un aspect premade”.
   
4. Selectați pachetul de aspect Bistro și, din fereastra pop-up Încărcare din bibliotecă, selectați aspectul paginii de destinație Bistro și faceți clic pe butonul „Utilizați acest aspect” pentru a importa aspectul în pagină.
   

După aceea, aveți o pagină de destinație de utilizat atunci când creați poarta de întâmpinare personalizată.

Crearea porții de întâmpinare

Adăugați o secțiune nouă

Mai întâi, creați o nouă secțiune obișnuită și trageți-o în partea de sus a paginii. Apoi adăugați un rând cu o coloană la secțiune.

Proiectați secțiunea

Înainte de a începe să adăugăm module / conținut în secțiune, să adăugăm un design personalizat, astfel încât să avem o pânză frumoasă de la care să mergem înainte.

fundal

Pentru a începe, adăugați un gradient de fundal și o imagine după cum urmează:

• Culoarea din stânga a gradientului de fundal: rgba (0,17,38,0.7)
• Culoarea dreaptă a gradientului de fundal: # 001126
• Poziția inițială: 68%
• Plasați gradientul deasupra imaginii de fundal: DA
• Imagine de fundal: [inserați imaginea]

Căptușire și animație

Apoi, treceți la fila de proiectare și actualizați următoarele setări de umplere și animație:

• Garnitura (desktop): 28vh sus, 28vh jos
• Căptușeală (tabletă): 18vh sus, 18vh jos
• Căptușeală (telefon): 10vh sus, 10vh jos
• Stil de animație: Slide
• Direcția animației: Jos
• Animație Opacitate de pornire: 100%;

Poziționați secțiunea Welcome Gate

Acum suntem gata să oferim secțiunii noastre o poziție fixă ​​cu un indice z mai mare, astfel încât poarta de bun venit să umple ecranul browserului până când utilizatorul dă clic pe butonul „Nu mulțumesc”.

Înainte de a adăuga css-ul nostru de poziționare, să adăugăm un ID CSS personalizat după cum urmează:

• ID CSS: poarta de bun venit

Aceasta va fi utilizată pentru a viza secțiunea cu jQuery pentru a o deplasa în sus afară din vizualizare atunci când utilizatorul dă clic pe butonul „Nu mulțumesc”.

Adăugați următorul CSS personalizat la elementul principal:

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

Apoi actualizați indexul Z după cum urmează:

• Indicele Z: 11

NOTĂ: dacă doriți ca poarta de bun venit să ascundă și antetul, puteți adăuga un index Z mai mare, cum ar fi „99999”.

Crearea conținutului Welcome Gate

Acum că secțiunea noastră este gata, să începem să adăugăm conținutul poarta de bun venit. Puteți adăuga orice conținut doriți la această poartă de bun venit. Deocamdată, să creăm un CTA simplu cu două butoane. Butonul din stânga va fi cel pe care doriți să facă clic utilizatorii. Butonul din dreapta va fi butonul „Nu mulțumesc” care va închide poarta de întâmpinare.

Modul text

În interiorul rândului cu o coloană, adăugați un nou modul de text cu următorul conținut:

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

Proiectare text

Apoi actualizați designul textului după cum urmează:

• Font text: Cabină
• Culoarea textului textului: #ffffff
• Dimensiune text text: 24 px (desktop), 18 px (telefon)
• Aliniere text: centru
• Rubrica 2 Font: Cabină
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Culoarea textului: #ffffff
• Titlul 2 Dimensiune text: 66 px (desktop), 26 px (tabletă)

Adăugați un rând cu două coloane

Pentru butoanele noastre, să creăm un rând cu două coloane sub text.

Adăugați butonul din stânga

În coloana din stânga, adăugați un modul buton și actualizați setările după cum urmează:

• Textul butonului: „Da! Hai să o rezervăm ”

• Aliniere buton: centru
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # bd8f52
• Lățimea chenarului butonului: 0 px
• Buton Font Greutate: Bold

Apoi adăugați următorul CSS personalizat pentru a face ca butonul să se extindă pe lățimea completă a coloanei:

display: block !important;

Adăugați butonul „Nu mulțumesc” din dreapta

Pentru a crea butonul „Nu mulțumesc”, mai întâi copiați butonul din stânga și lipiți-l în coloana din dreapta.

Apoi actualizați conținutul după cum urmează:

• Text buton: nu, mulțumesc
• Adresa URL a butonului: # (acest lucru este important pentru ca butonul să nu reîmprospăteze pagina)

Apoi actualizați designul butonului după cum urmează:

• Culoarea textului butonului: # 333333
• Culoarea fundalului butonului: rgba (255,255,255,0,4)

Apoi adăugați următoarea clasă CSS la butonul „Nu mulțumesc”:

• Clasa CSS: nothanks

Acesta va fi selectorul nostru din jQuery care închide poarta de bun venit la clic.

Adăugați codul personalizat

Acum, să adăugăm fragmentul de cod personalizat necesar pentru a adăuga funcționalitatea care închide poarta de bun venit atunci când un utilizator face clic pe butonul „Nu mulțumesc”. Pentru a face acest lucru, adăugați un modul de cod sub modulul butonului nu mulțumesc.

Apoi lipiți următorul cod în caseta de cod a modulului de cod:

Pentru o ultimă atingere, să aducem butoanele mai aproape, oferind rândului care conține butoanele noastre o lățime maximă. Deschideți setările rândului și actualizați următoarele:

• Lățime maximă: 600 px

Rezultat final

Iată cum arată designul final.

Și iată cum arată poarta de întâmpinare atunci când reîmprospătați pagina.

Și iată cum arată poarta de întâmpinare pe mobil.

Gânduri finale

Sperăm că acest covor de bun venit va fi un plus util pentru pagina sau șablonul dvs. Divi simplifică proiectarea și poziționarea saltelei de bun venit folosind constructorul vizual și este nevoie doar de un mic fragment de jQuery pentru a completa funcționalitatea. Deci, dacă sunteți în căutarea unui covor rapid de bun venit pentru pagina dvs. fără a utiliza un plugin, acest lucru ar trebui să fie util.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!