Doriți să creați o secțiune Erou în Divi care este fluid în loc de responsive tradiționale?
Secțiunea Hero din a site-ul web este unul dintre cei mai buni candidați pentru proiectarea fluidelor. Spre deosebire de designul receptiv tradițional care se adaptează la diferite puncte de întrerupere, designul fluid se adaptează perfect la fereastra de vizualizare a browserului și menține designul consecvent pe orice dispozitiv. La urma urmei, secțiunea Hero este primul lucru pe care utilizatorii îl văd pe a site-ul web.
În acest tutorial, vă vom arăta cum să creați o secțiune întreagă de erou fluid în Divi. Cheia pentru crearea acestui design fluid este să adăugați o dimensiune fluidă a fontului rădăcină la fiecare dintre modulele utilizate și apoi să încorporați unitatea de lungime em (care este raportat la dimensiunea fontului corpului rădăcină ) în setările modulului.
Să începem!
studiu
Iată o privire rapidă asupra designului pe care îl vom crea în acest tutorial.
Observați cum designul fluid se adaptează fără probleme la lățimea ferestrei browserului.
Creați o pagină nouă cu Divi Builder
Pentru a începe, va trebui să faceți următoarele:
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizare Divi Constructor
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe să proiectați Divi.
Citiți și: Divi: Cum se creează o secțiune Hero cu modulul Fullwidth Header
Cum să proiectați o secțiune Fluid Hero în Divi
Setări secțiune
Pentru a începe, să actualizăm setările de design existente pentru secțiune. Deschideți setările secțiunii și actualizați următoarele:
- Opriri de gradient:
- 30%: #ff2000
- 30%: #121212
- Direcția gradientului: 45 de grade
Sub filă Amenajări, actualizați umplutura:
- Umplutură: 0px sus, 0px jos
Creați o linie
Apoi, adăugați un rând cu o singură coloană la secțiune.
Setări de linie
Deschideți setările liniei și actualizați următoarele sub filă Amenajări :
- Lățimea jgheabului: 1
- Latime: 100%
- Lățimea maximă: 1 px
- Înălțime minimă: 100 vh (desktop), niciuna (tabletă și telefon)
- Umplutură: 0px (sus și jos)
Creați text de antet fluid cu chenar
Acum că secțiunea și linia sunt complete, putem adăuga textul antet care curge la secțiunea Hero. De asemenea, vom adăuga un chenar fluid la modulul Text pentru un element de design creativ.
Adăugați un modul Text
Pentru a crea textul titlului și chenarul, adăugați un nou modul Text la coloană.
Setări text
Sub filă Conţinut, actualizați-l cuprins a corpului cu următorul cod HTML:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Pentru a face elementele de design fluide, trebuie mai întâi să adăugăm o dimensiune fluidă a fontului rădăcină la modul folosind funcția CSS Clamp().
Sub filă Avansat, inserați următorul fragment CSS:
font-size: clamp(32px, 4.1vw, 70px);
Sub filă Amenajări, actualizați următoarele setări de proiectare a textului antetului:
- Textul titlului:
- Tip: H1
- Font: Montserrat
- Greutatea fontului: Greu
- Culoare: #ffffff
- Dimensiune: 1 em
- Spațiere între litere: 0,1 em
- Înălțimea liniei: 1,2 em
De asemenea, actualizați modul de umplutură după cum urmează:
- Umplutură: prima (sus, jos, stânga și dreapta)
Pentru a crea designul chenarului fluid, actualizați următoarele:
- Lățimea chenarului: 1 em
- Culoare chenar: #ffffff
- Culoarea marginii inferioare: clară
- Culoarea chenarului din stânga: clar
Crearea chenarului de accent
Pentru a crea chenarul de accent, putem duplica modulul Text existent.
Sterge-l cuprins a corpului existent și actualizați parametrii de proiectare după cum urmează:
- Latime maxima: 6,5 cm
- Înălțime: 3,25 em
- Lățimea chenarului: 0,5 em
- Culoare chenar: #ff2000
Pentru a poziționa chenarul de accent, adăugați o poziție absolută cu un offset egal cu lățimea chenarului în modulul Heading Text (1em).
Sub filă Avansat, actualizați următoarele opțiuni de poziție:
- Poziție: absolută
- Locație: dreapta sus
- Offset vertical: 1 em
- Offset orizontal: 1em
Creați text de subtitrare
Sub textul titlului, vom adăuga textul subtitrare care curge. 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 Text
Pentru a crea textul subtitrării, adăugați un nou modul Text sub modulul existent Header Text.
Puteți adăuga câteva propoziții de text de umplere, după cum urmează:
- Continut: 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ă
Apoi, trebuie să adăugăm o nouă dimensiune fluidă a fontului, care funcționează mai bine pentru textul mic. Sub fila Avansat, inserați următorul fragment CSS sub elementul principal:
font-size: clamp(14px, 1.4vw, 24px);
Setări de proiectare text
Sub filă Amenajări, actualizați următoarele:
- Text:
- Greutatea fontului: semi-aldine
- Culoare: #ffffff
- Dimensiune: 1 em
- Înălțime: 1,6 em
Apoi actualizați dimensiunea și spațierea după cum urmează:
- Latime maxima: 19 cm
- Marja: 2 em (jos), automat (stânga), 5 em (dreapta)
Creați butonul de fluid
Pentru a crea butonul fluid, adăugați un nou modul Buton sub modulul Subtitle Text.
Apoi, actualizați textul butonului pentru a citi „7 Day Free Tral”.
Adăugați dimensiunea fontului rădăcină fluidă
Apoi, trebuie să adăugăm o nouă dimensiune fluidă de font potrivită pentru un buton.
Sub filă Avansat, inserați următorul fragment CSS sub elementul principal:
font-size: clamp(20px, 2.35vw, 40px);
Setări de design pentru butoane
Sub filă Amenajări, actualizați următoarele:
- Alinierea butoanelor: dreapta
- Utilizați dimensiune personalizată pentru buton: DA
- Culoarea textului butonului: #ff2000
- Opriri de gradient:
- Culoare 1 25%: limpede
- Culoare 2 25%: #ffffff
- Direcție gradient: 45 de grade
- Buton:
- Lățimea chenarului: 0 pixeli
- Raza chenarului: 0 pixeli
- Font: Montserrat
- Greutatea fontului: gros
- Stil: cursiv
- Afișați pictograma butonului: DA
- Pictogramă: săgeată în formă de triunghi la dreapta (vezi captura de ecran)
- Plasarea pictogramei: dreapta
- Marja: 8em (dreapta)
- Căptușeală: 0,2 em (sus și jos), 1,5 em (stânga), 1 em (dreapta)
Creați o imagine pentru secțiunea Hero
Cu toate cuprins a secțiunii Hero la dimensiunea corectă a paginii, suntem gata să adăugăm imaginea secțiunii Hero din partea stângă. Pentru a face acest lucru, mai întâi adăugați un modul Imagine sub butonul.
Deschideți setările pentru imagine și încărcați o imagine.
Setări de proiectare a imaginii
Sub filă Amenajări, actualizați următoarele setări:
- Alinierea imaginii: stânga (desktop și tabletă), centru (telefon)
- Lățime maximă: 48% (desktop și tabletă), 70% (telefon)
- Umplutură: 4% (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ă), 0px (telefon)
Rezultat final
Iată rezultatul final pe o pagină live.
Vezi si: Divi: Cum să utilizați măștile și modelele de fundal pentru o secțiune de eroi
Acesta este modul în care designul fluid se adaptează fără probleme la lățimea ferestrei browserului.
Descărcați DIVI acum!!!
Concluzie
Adăugarea unui design fluid la o secțiune Hero poate fi o modalitate la îndemână de a vă asigura că partea superioară a pliului este frumos consecventă pentru toate dimensiunile de browser, fără a fi nevoie să actualizați designul în anumite puncte sau să utilizați interogări media.
Sperăm că această tehnică va adăuga o altă abilitate de design utilă pentru proiectele viitoare.
De asemenea, sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
