Cum să creați o secțiune de formular de contact pe ecran complet, cu o animație de derulare zoom-in

Pentru multe site-uri web, secțiunea de contact a paginii este destinația ideală pentru vizitatori. Pentru a spune ceea ce este evident, majoritatea oamenilor / companiilor doresc ca vizitatorii să le contacteze pentru mai multe afaceri. De aceea, este important să optimizați acea secțiune pentru o conversie mai bună. O modalitate prin care putem face acest lucru este să creăm un aspect de formular de contact pe ecran complet, care să ofere utilizatorului o vizualizare fără distragere a informațiilor de contact.

În acest tutorial, vom construi un aspect complet al secțiunii formularului de contact pe care îl puteți utiliza pe orice pagină a site-ului dvs. Divi. De asemenea, vom personaliza aspectul cu setări utile de proiectare receptivă, care vor păstra aspectul pe ecran complet, chiar și pe telefoanele mici.

Să începem!

Trage cu ochiul

Iată o privire rapidă la secțiunea formularului de contact cu ecran complet receptiv pe care o vom construi.

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” și nu 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!

https://youtu.be/5Qt9J95uME8

Abonați-vă la canalul nostru Youtube

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder. Amintiți-vă că acesta este un aspect al secțiunii, așa că va trebui să adăugați acest aspect la o pagină, postare sau șablon atunci când creați o nouă secțiune în constructor.

Consultați partea de jos a postării pentru a adăuga aspectul secțiunii la o pagină.

Să trecem 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).

Construirea aspectului secțiunii de contact

Pentru a începe lucrurile, vom adăuga un aspect premade la o nouă pagină folosind Divi Builder. Acest lucru va accelera designul, astfel încât să ne putem concentra asupra a ceea ce este necesar pentru a crea o secțiune (cu un formular de contact) pe ecran complet și receptiv. Apoi vom adăuga efectul de derulare pentru a-l uni pe toate la final.

Adăugarea unui aspect premade

După ce faceți clic pentru a edita pagina utilizând constructorul Divi, selectați opțiunea „Alegeți un aspect premade”.

Apoi găsiți aspectul paginii de contact Business Coach și faceți clic pe butonul „Utilizați acest aspect”.

Setări secțiune

După ce aspectul a fost încărcat pe pagină, deschideți setările secțiunii din partea de sus a aspectului și actualizați următoarele:

fundal

• Culoare fundal: # 3550a0

Înălțimea secțiunii și căptușeala

• Înălțime minimă: 600 px
• Înălțime: 104vh
• Împletire: 0px de sus, 0px de jos

Una dintre cheile acestui design este setarea înălțimii la cel puțin 100vh (100% din înălțimea ferestrei). Acest lucru vă va asigura că secțiunea va acoperi întreaga înălțime a ferestrei browserului. Adăugăm înălțimea de 104vh, astfel încât să avem puțin spațiu suplimentar pentru momentul în care utilizatorul se deplasează la secțiune.

Setarea înălțimii minime la 600 px este o înălțime alternativă, astfel încât niciunul dintre elementele din secțiune să nu fie ascuns dacă înălțimea browserului este prea mică. Acest lucru va trebui ajustat în funcție de cantitatea de conținut pe care o avem în cadrul secțiunii.

CSS personalizat

Pentru a centra vertical rândurile din secțiune (excelent pentru secțiunile cu ecran complet), adăugați următorul CSS personalizat ca element principal.

display:flex;flex-direction: column;

Adăugarea unui formular de contact

Pentru a adăuga formularul de contact la secțiune, trageți-l sub modulul text existent din secțiunea premade de mai jos.

Ștergeți secțiunile suplimentare din Layout premade

Apoi ștergeți secțiunea de jos, astfel încât să rămână doar secțiunea pe care o construim.

Personalizarea elementelor secțiunii pentru proiectarea pe ecran complet

Acum, după ce aspectul secțiunii a fost finalizat, suntem pregătiți să începem să personalizăm conținutul (sau elementele copil) ale secțiunii cu un design receptiv, care se va adapta frumos pentru o secțiune fullscreen pe toate dispozitivele.

Vom folosi unitatea de lungime vh pentru cea mai mare parte a dimensiunii și spațiului textului pentru fiecare dintre elemente. Acest lucru vă va ajuta să păstrați elementele la vedere cu aspectul ecranului complet chiar și pe afișajele scurte ale telefonului.

Setări rând

Deschideți setările rândului și actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 100%
• Căptușeală: 0 px sus, 0 px jos, 7vh stânga, 7vh dreapta

Setări modul modul text

Deschideți setările modulului text și actualizați următoarele:

Dimensiune text antet

• Dimensiune text antet: 7vh (desktop), 5vh (tabletă și telefon)

• Rubrica 3 Dimensiune text: 2vh (desktop), 3vh (tabletă), 12 px (telefon)

Marja

• Marja: 3vh fund

Setări formular de contact

Acum vom continua ajustarea de design receptivă pe formularul de contact folosind unitatea de lungime vh. Deschideți Setările formularului de contact și actualizați următoarele:

Setări de câmp

• Marja câmpurilor: 3vh
• Căptușeala Fleids: 2vh sus, 2vh jos
• Dimensiune text câmpuri: 2,5vh

Dimensiune text buton

• Dimensiune text buton: 2vh

Lăţime

• Lățime maximă: niciuna

Adăugarea efectelor de derulare

Ultimul pas către proiectare este efectul de derulare care va face tranziția secțiunii formularului de contact într-o vizualizare pe ecran complet atunci când derulați pagina în jos. Pentru aceasta, deschideți încă o dată setările secțiunii și actualizați următoarele:

Sub fila Scalare sus și jos ...

• Activați scalarea în sus și în jos: DA
• Scara inițială: 60% (la 0%)
• Scară medie: 60% (la 70%)
• Scara de încheiere: 100% (la 100%)

Aceasta completează proiectarea secțiunii formularului de contact pe ecran complet. Dar, înainte de a putea vedea rezultatul final, să îl adăugăm mai întâi la una dintre paginile de pe site.

Folosind secțiunea Formular de contact pe ecran complet de pe site-ul dvs. web

Salvați aspectul secțiunii în biblioteca Divi

Înainte de a putea adăuga această secțiune la o altă pagină de pe site-ul nostru, trebuie mai întâi să salvăm aspectul secțiunii în Biblioteca Divi.

Pentru aceasta, faceți clic pe pictograma „Adăugați la bibliotecă” din meniul secțiunii. Apoi dați aspectului un nume și faceți clic pe butonul „Salvați în bibliotecă”.

Acum, aspectul secțiunii va fi disponibil în Biblioteca Divi pentru utilizare ulterioară.

Adăugați aspectul secțiunii la pagina din biblioteca Divi

Pentru a adăuga aspectul secțiunii formularului de contact pe ecran complet într-o pagină (sau postare) din Divi, deschideți pentru a edita pagina folosind Divi Builder.

Apoi faceți clic pentru a adăuga o nouă secțiune undeva pe pagină.

În fereastra pop-up Inserare secțiune, faceți clic pe fila Adăugare din bibliotecă și selectați aspectul secțiunii salvate din listă (a mea se numește „Formular de contact pe ecran complet”).

Rezultat final

Acum să verificăm rezultatul final.

Iată-l pe desktop.

Iată-l pe tabletă (iPad Pro de fapt).

Iată-l pe telefon (iPhone 5 de fapt). Observați că, deși ecranul este foarte scurt, conținutul încă se potrivește în vizualizarea pe ecran complet.

Gânduri finale

Sper că secțiunea formularului de contact pe ecran complet vă va ajuta să creați un formular / secțiune de contact cu conversie ridicată pentru propriul site web. Lucrul important de reținut este să vă asigurați întotdeauna și să păstrați conținutul suficient de concis încât să se afișeze frumos și pe telefoanele mici. Unele dintre tehnicile cheie de proiectare receptive utilizate în acest aspect vor fi utile, de asemenea, atunci când faceți ajustări la orice design de pe site-ul dvs. web.

Pentru mai multe informații despre acest subiect, consultați postarea noastră despre cum să utilizați unitățile de lungime vw și vh pentru a proiecta un formular de contact receptiv în Divi.

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

Noroc!