Cum să proiectezi o secțiune de erou fluid în Divi

Secțiunea erou a unui site web este unul dintre cei mai buni candidați pentru designul fluid. Spre deosebire de designul receptiv tradițional care se ajustează la diferite puncte de întrerupere, designul fluid se adaptează perfect cu vizualizarea browserului și păstrează designul consecvent pe orice dispozitiv. La urma urmei, secțiunea erou este primul lucru pe care utilizatorii îl văd pe un site web.

Este posibil să fi văzut proiectarea fluidelor demonstrată în tutoriale anterioare privind tipografia fluidelor, modulele fluidelor și / sau butoanele fluidelor. În acest tutorial, vă vom arăta cum să creați o întreagă secțiune de erou fluid în Divi. Cheia pentru crearea acestui design fluid este adăugarea unei dimensiuni a fontului rădăcină fluid la fiecare dintre modulele utilizate și apoi încorporarea unității de lungime em (care este relativă la dimensiunea fontului corpului rădăcinii) în setările modulului.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Observați modul în care designul fluid se potrivește ușor cu lățimea ferestrei de vizualizare a browserului.

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!

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.

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).
3. Alegeți opțiunea „Build From Scratch”.

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

Cum să proiectezi o secțiune de erou fluid în Divi

Pentru a construi secțiunea erou fluid, vom adăuga o dimensiune a fontului rădăcină fluid la fiecare dintre cele trei module. Aceste module vor compune titlul, subtitrarea și butonul. Apoi vom folosi unitatea de lungime em în setările de proiectare a modulelor pentru a ne asigura că elementele de proiectare sunt relative la dimensiunea fontului rădăcină fluidă. Apoi, vom poziționa imaginea în partea stângă a paginii cu o poziție absolută și un offset. Rezultatul va fi o secțiune de erou fluidă, care se adaptează perfect cu lățimea ecranului, astfel încât designul să fie consistent pe toate dispozitivele.

Setări secțiune

Pentru a începe, să actualizăm setările de proiectare existente pentru secțiune. Deschideți setările secțiunii și actualizați următoarele:

• Culoarea din stânga a gradientului de fundal: # ff2000
• Culoarea dreaptă a gradientului de fundal: # 121212
• Direcția gradientului: 45 grade
• Poziția inițială: 30%
• Poziție finală: 0%

Sub fila de proiectare, actualizați căptușeala:

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

Creați rândul

Apoi, adăugați un rând cu o coloană la secțiune.

Setări rând

Deschideți setările pentru rând și actualizați următoarele sub fila de proiectare:

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 1700 px
• Înălțime minimă: 100vh (desktop), niciuna (tabletă și telefon)
• Căptușeală: 0 px sus, 0 px jos

Creați text de antet fluid cu margine

Acum că secțiunea și rândul sunt terminate, putem adăuga textul de titlu fluid la secțiunea erou. De asemenea, vom adăuga o margine fluidă la modulul text pentru un element de design creativ.

Adăugați un modul de text

Pentru a crea textul și marginea antetului, adăugați un nou modul de text în coloană.

Setări text

Sub fila conținut, actualizați conținutul corpului cu următorul HTML:

<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>

Pentru a face elementele de design fluide, trebuie mai întâi să adăugăm o dimensiune a fontului rădăcină fluidă la modul folosind funcția CSS Clamp (). Sub fila avansată, treceți de următorul fragment CSS:

font-size: clamp(32px, 4.1vw, 70px);

Având dimensiunea fontului rădăcină fluidă, suntem gata să actualizăm setările de proiectare. Este important să utilizați unitatea de lungime a em, deoarece unitatea de lungime a em este relativă la dimensiunea fontului rădăcină al elementului.

Sub fila Proiectare, actualizați următoarele setări de proiectare a textului antetului:

• Tip de antet: H1
• Titlu Font: Montserrat
• Greutatea fontului antet: greu
• Culoare text antet: #ffffff
• Dimensiune text antet: 1em
• Distanța dintre litere: 0,1em
• Înălțimea liniei de direcție: 1.2em

De asemenea, actualizați modulul de umplere după cum urmează:

• Căptușeală: 1em (sus, jos, stânga, dreapta)

Pentru a crea designul de margine fluid, actualizați următoarele:

• Lățimea chenarului: 1em
• Culoare margine: #ffffff
• Culoarea chenarului inferior: transparent
• Culoarea chenarului stâng: transparent

Crearea frontierei de accent

Pentru a crea marginea accentului, putem duplica modulul de text existent.

Scoateți conținutul corpului existent și actualizați setările de proiectare după cum urmează:

• Lățime maximă: 6,5em
• Înălțime: 3,25em
• Lățimea chenarului: 0,5em
• Culoare margine: # ff2000

Amintiți-vă, aceeași dimensiune a fontului rădăcină fluidă este inclusă în acest modul duplicat. Deci, putem folosi unitatea de lungime em pentru a regla dimensiunea și lățimea chenarului. Acest lucru vă va asigura că designul se va regla împreună cu designul modulului text de antet.

Pentru a poziționa marginea accentului, adăugați o poziție absolută cu un decalaj egal cu lățimea chenarului în modulul de text al titlului (1em). Sub fila avansată, actualizați următoarele opțiuni de poziție:

• Poziție: Absolută
• Locație: dreapta sus
• Decalaj vertical: 1em
• Decalaj orizontal: 1em

Creați textul corpului subtitrării fluide

Sub textul titlului, vom adăuga textul fluid al subtitrării. Deoarece acest text este mai mic, vom adăuga o dimensiune mai mică a fontului rădăcină fluidă.

Adăugați un nou modul de text

Pentru a crea textul subtitrării, adăugați un nou modul de text sub modulul de text de antet existent.

Puteți adăuga câteva propoziții de text de completare după cum urmează:

• Conținutul corpului: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Adăugați dimensiunea fontului rădăcină fluidă

În continuare, trebuie să adăugăm o nouă dimensiune de font fluidă, care este mai potrivită pentru textul mai mic. Sub fila avansată, lipiți următorul fragment CSS sub Elementul principal:

font-size: clamp(14px, 1.4vw, 24px);

Setări de proiectare a textului

Sub fila Proiectare, actualizați următoarele:

• Greutatea fontului textului: Semi Bold
• Culoarea textului textului: #ffffff
• Text Dimensiune text: 1em
• Înălțimea liniei de text: 1.6em

Apoi actualizați dimensiunea și spațiul după cum urmează:

• Lățime maximă: 19em
• Marja: 2em jos, auto stânga, 5em dreapta

Creați butonul fluid

Pentru a crea butonul fluid, adăugați un nou modul buton sub modulul text subtitrare.

Apoi actualizați textul butonului pentru a citi „Încercare gratuită de 7 zile”.

Adăugați dimensiunea fontului rădăcină fluidă

Apoi, trebuie să adăugăm o nouă dimensiune a fontului fluid, care este adecvată pentru un buton. Sub fila avansată, lipiți următorul fragment CSS sub Elementul principal:

font-size: clamp(20px, 2.35vw, 40px);

Setări de proiectare butoane

Sub fila Proiectare, actualizați următoarele:

• Aliniere buton: dreapta

• Culoarea textului butonului: # ff2000
• Buton Gradient de fundal Culoare stânga: transparent
• Buton Gradient de fundal Culoare dreaptă: #ffffff
• Direcția gradientului: 45 grade
• Poziția inițială: 25%
• Poziție finală: 0%
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Buton Font: Montserrat
• Buton Font Greutate: greu
• Stil Font Buton: Italic
• Pictogramă buton: săgeată triunghi dreptunghi (vezi captura de ecran)
• Plasare pictogramă buton: stânga

• Marja: 8em dreapta
• Căptușeală: 0,2em sus, 0,2em jos, 1,5em stânga, 1em dreapta

Creați o imagine pentru secțiunea Hero

Cu tot conținutul secțiunii erou pe dimensiunea corectă a paginii, suntem gata să adăugăm imaginea secțiunii erou în partea stângă. Pentru a face acest lucru, mai întâi adăugați un modul de imagine sub buton.

Deschideți setările imaginii și încărcați o imagine.

Setări de proiectare a imaginii

Sub fila Design, actualizați următoarele setări:

• Aliniere imagine: stânga (desktop și tabletă), centru (telefon)
• Lățime maximă: 48% (desktop și tabletă), 70% (telefon)
• Căptușeală: 4% la stânga

În cele din urmă, dați imaginii o poziție absolută cu un offset folosind unitatea de lungime vmin după cum urmează:

• Poziție: Absolută (desktop și tabletă), relativă (telefon)
• Locație: Stânga sus (desktop și tabletă)
• Offset vertical 30vmin (desktop și tabletă), 0 px (telefon)

Rezultat final

Iată rezultatul final pe o pagină live.

Iată cum designul fluid se potrivește ușor cu lățimea ferestrei de vizualizare a browserului.

Suport pentru browser

Funcția CSS clamp () (utilizată pentru dimensiunea fluidă a fontului în acest tutorial) este surprinzător de bine susținută de toate browserele majore, cu excepția IE. Există o eroare de safari ciudată care nu scară dinamic la ajustarea ferestrei browserului, dar se afișează corect la încărcarea paginii. Pentru a remedia acest lucru, aparent tot ce trebuie să faceți este să dați fiecărui modul o înălțime minimă de 0vw.

Gânduri finale

Adăugarea unui design fluid într-o secțiune de erou poate fi o modalitate convenabilă de a vă asigura că aspectul de mai sus este frumos coerent pe toate dimensiunile browserului, fără a fi nevoie să actualizați designul la anumite puncte de întrerupere sau să utilizați interogări media.

Nu uitați să consultați celelalte articole despre designul fluidelor, inclusiv despre cum să creați tipografie fluidă, module fluide și butoane fluide.

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

Noroc!