Cum se utilizează unitățile de lungime vw și vh pentru a proiecta un formular de contact receptiv în Divi

Publicat: 2019-06-12

Formularele web sunt extrem de importante pentru succesul site-ului dvs. web. Acest lucru are sens, având în vedere că majoritatea companiilor online depind de formulare precum opțiunile de e-mail și formularele de contact pentru a face bani prin crearea listelor de e-mail și comunicarea cu potențialii cumpărători. Și, în aceste zile, trebuie să ne asigurăm că proiectăm formulare receptive care vor arăta excelent pe toate browserele și dispozitivele mobile.

În acest tutorial, vă voi arăta cum să proiectați un formular de contact receptiv folosind unități de lungime vw și vh în Divi. Vom acoperi modul de mărire și spațiu a câmpurilor de introducere și a butoanelor care se vor regla în funcție de lățimea și înălțimea browserului dvs. Acest lucru vă va permite să maximizați vizibilitatea formularului pe toate dispozitivele, chiar și pentru vizualizarea peisaj pe telefoanele mobile.

Pentru a face acest lucru, vom folosi setările încorporate ale Divi, care vă permit să personalizați cu ușurință textul formularului, câmpurile și butoanele.

Să începem.

Trage cu ochiul

Desktop

Comprimat

Telefon (portret)

Telefon (peisaj)

Descărcați GRATUIT aspectul formularului de contact receptiv (Include și un formular de răspuns optiv pentru e-mail!)

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.

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ă trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să aveți următoarea configurare:

Tema Divi instalată și activă
O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
Băutura ta preferată (opțional, cu excepția cazului în care încă nu ai luat cafeaua)

După aceea, veți avea o pânză goală pentru a începe să construiți formularele responsive în Divi.

De ce să folosiți unitățile de lungime vw și vh pentru un design receptiv

Unitățile de lungime sunt acele valori necesare pentru dimensiunea și spațiul elementelor de pe pagina dvs. web. Probabil că cele mai frecvente unități de lungime utilizate în designul web sunt pixeli și procente. De exemplu, un pixel este o unitate de lungime obișnuită utilizată pentru mărimea textului, unitatea de lungime em este utilizată în mod obișnuit pentru înălțimea liniei și o unitate de lungime procentuală este utilizată în mod obișnuit pentru spațierea și dimensionarea elementelor pentru un design receptiv. De fapt, valorile implicite ale unității de lungime pentru elementele Divi (module, rânduri, secțiuni) sunt construite folosind aceste unități comune de lungime.

Unitățile de lungime vor fi fie absolute (rămân la aceeași dimensiune, indiferent de dimensiunea altor elemente), fie relative (schimbare / scară în funcție de dimensiunea altor elemente). De exemplu, un pixel este o unitate de lungime absolută. Deci, dacă un corp de text are o dimensiune de font de 16 px, textul va rămâne 16 px indiferent de dimensiunea containerului său. Dar procentul și em sunt ambele unități de lungime relativă. Deci, o înălțime a liniei care are o valoare em se va regla pe măsură ce se modifică dimensiunea textului elementului. Și întrucât procentajul este, de asemenea, o unitate de lungime relativă, un rând cu o lățime de 80% va fi 80% din container (sau secțiune).

Unitățile de lungime vw și vh sunt, de asemenea, unități de lungime relativă, dar în loc să fie relative la elementul container părinte, este relativ la fereastra de vizualizare reală a browserului. Lățimea ferestrei (vw) este relativă la lățimea browserului, iar înălțimea ferestrei (vh) este relativă la înălțimea browserului. Utilizarea acestor unități de lungime este o modalitate de a vă păstra designul consecvent pe toate browserele, deoarece se va scala în funcție de fereastra de vizualizare. Acest lucru face ca dimensiunea fiecărui element să fie mai previzibilă și mai ușor de gestionat fără a fi nevoie să vă faceți griji atât de mult pentru a da fiecărui element o dimensiune diferită pe fiecare dispozitiv sau punct de întrerupere receptiv. Unitatea de lungime vh este utilă în special pentru afișajele telefonului mobil, deoarece va ține seama de înălțimea ecranului telefonului în vizualizarea portret și peisaj.

Această tehnică funcționează cel mai bine pentru design-urile care depind de afișajele cu lățime completă de pe desktop, o scară care se va redimensiona fără probleme în timp ce utilizatorul ajustează lățimea browserului.

Pentru o explicație mai detaliată a unităților de lungime, consultați acest ghid despre utilizarea unităților de lungime în Divi.

Partea 1: Proiectarea unui formular de contact receptiv în Divi

Crearea secțiunii și rândului

Creați o secțiune obișnuită cu un rând cu o coloană. Înainte de a adăuga module, actualizați setările secțiunii după cum urmează:

Culoarea din stânga a gradientului de fundal: # fd7b5b
Gradientul de fundal dreapta Culoare: # a92200

Apoi deschideți setările rândului și dați-i un gradient de fundal.

Culoarea din stânga a gradientului de fundal: # ffdb8b
Gradientul de fundal dreapta Culoare: # fdb15b

Apoi, să mărim rândul folosind unitatea de lungime vw, astfel încât să se redimensioneze cu browserul.

Lățime: 66vw (desktop), 66vw (tabletă), 100% (telefon)
Lățime maximă: 66vw (desktop), 66vw (tabletă), 100% (telefon)
Înălțime minimă: 100vh (telefon)

Căptușeală: 0 px sus, 0 px jos

Valoarea 66vw se va asigura că rândul va rămâne cu aproximativ două treimi lățimea ferestrei de vizualizare a browserului. Valoarea de 100vh pe afișajul telefonului se va asigura că înălțimea rândului este egală cu înălțimea ecranului telefonului (opțional, dar o atingere plăcută pentru o afișare optimă a zonei de conținut a rândurilor pe telefoane).

Observați că lățimea rândului este setată la 100% (nu 100vw). Acest lucru se datorează faptului că 100vw nu va ține cont de lățimea barei de derulare pe măsură ce derulați pagina. Deci, este întotdeauna mai bine să utilizați procentajul pentru afișajele cu lățime completă.

Crearea formularului de contact

Cu rândul nostru în poziție, putem adăuga acum modulul Formular de contact pe rând.

Odată adăugat formularul de contact, actualizați conținutul ca la un titlu și dezactivați captcha.

Titlu: Contactați-ne
Afișați Captcha: NU

Realizarea câmpurilor lățime completă

Pentru acest design, voi folosi câmpuri cu lățime completă. Acest lucru îmi va permite să adaug spații consistente între câmpuri (deoarece nu se utilizează flotante) și îmi va permite să dau o lățime personalizată fiecărui câmp pentru un design unic mai târziu. Deocamdată, deschideți setările atât pentru câmpul de nume, cât și pentru cel de e-mail și setați opțiunea „Efectuați lățimea completă” la „DA”.

Optimizarea câmpurilor pentru proiectarea receptivă

Acum reveniți la setările formularului de contact. Acum putem personaliza câmpurile formularului folosind unități de lungime vw și vh. Actualizați următoarele:

Culoare text câmp: # 333333
Marja câmpurilor (desktop și tabletă): 2vw sus, 2vw jos
Marja câmpurilor (telefon): 2vh sus, 2vh jos

Căptușirea câmpurilor (desktop și tabletă): 1vw sus, 1vw jos, 2vw stânga, 2vw dreapta
Căptușirea câmpurilor (telefon): 2vh sus, 2vh jos, 2vh stânga, 2vh dreapta

Dimensiune text câmpuri: 2,5vw (desktop), 4vh (telefon)

Notă: Utilizarea 4vh pentru telefon va permite dimensiunea textului cu înălțimea afișajului telefonului mobil, care va fi utilă pentru vizualizarea formularului în ecranul telefonului peisaj (rotind telefonul lateral). Dar dacă doriți o dimensiune a textului mai consistentă, poate doriți să utilizați o unitate de lungime a pixelilor pentru dimensiunea textului câmpului pe afișajul telefonului.

Proiectarea textului titlului

Pentru textul titlului, personalizați următoarele:

Titlu Nivel antet: H2
Titlu Font: Karla
Greutatea fontului titlului: Bold
Culoare text titlu: # f56845
Dimensiune text titlu: 7vw (desktop), 8vh (telefon)
Spațiere litere titlu: 1vw
Înălțimea liniei de titlu: 0.6em

Optimizarea butonului pentru proiectarea receptivă

Pentru butonul formular de contact, vom adăuga spațierea și dimensionarea textului similar câmpurilor pe care le-am proiectat anterior.

Faceți clic pentru a utiliza stiluri de butoane personalizate și actualizați următoarele:

Dimensiune text buton: 2,5vw (desktop), 4vh (telefon)
Culoarea textului butonului: #ffffff
Culoarea fundalului butonului: # 333333
Lățimea chenarului butonului: 0 px
Raza chenarului butonului: 0 px
Buton Font: Montserrat
Marja butonului (desktop): 1vw sus, 0px stânga, 0px dreapta
Buton Marja (telefon): 1vh sus
Buton de umplere (desktop): 3vw sus, 3vw jos
Buton de umplere (telefon): 3vh sus, 3vh jos

Shadow Box Button: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 2em
Box Shadow Vertical Position: 0.4em
Culoare umbră: rgba (245,104,69,0,29)

Adăugați spațiu la formularul de contact

Apoi, adăugați o umplere a formularului de contact folosind unitatea de lungime vw și o umbră de casetă în câmpurile formularului, după cum urmează:

Căptușeală (desktop): 3vw sus, 3vw jos, 5vw stânga, 5vw dreapta
Căptușeală (telefon): 5vh sus, 5vh jos, 3vh stânga, 3vh dreapta

Shadow Box Button: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 2em
Box Shadow Vertical Position: 0.4em
Culoare umbră: rgba (245,104,69,0,29)