Utilizarea noilor opțiuni pentru înălțime și lățime ale Divi pentru a crea un design receptiv

Deși nu sunt de obicei primul lucru pe care îl observă vizitatorii despre site-ul dvs., lățimea și înălțimea proprietăților CSS vă ajută să vă păstrați site-ul împreună și să arate minunat. Și acum, cu noile opțiuni de dimensionare glisabile ale Divi, puteți controla literalmente lățimea fiecărui element, lățimea maximă, înălțimea minimă, înălțimea și înălțimea maximă din interiorul constructorului. Acest lucru vă oferă libertatea de a crea site-uri web care sunt foarte receptive pe diferite dimensiuni de ecran.

Acum, toate acestea sună grozav, dar cum se traduce acest lucru într-un site frumos, practic vorbind? Exact despre asta vom vorbi în această postare. Vom începe prin a explica mai întâi diferența dintre toate proprietățile de înălțime și lățime disponibile în setările Divi și apoi le vom folosi în diferite scenarii pentru a face ca proiectele paginilor noastre să se comporte exact așa cum dorim.

Să ajungem la asta!

Abonați-vă la canalul nostru Youtube

Înțelegerea diferenței dintre proprietăți

Înainte de a utiliza lățimea și lățimea maximă în procesele noastre zilnice de proiectare, este important să înțelegem ce fac. Aceasta este explicația teoretică:

Lățime - Lățimea reală a unui element de proiectare. Dacă acesta este 100%, este la fel de larg pe cât îl permite containerul. Lățimea este de obicei exprimată folosind%. Cu cât procentul este mai mic, cu atât elementul de design va fi mai îngust.

Lățimea maximă - Lățimea maximă are putere peste lățime. Dacă lățimea unui modul este setată la 100%, acesta va adera la acea valoare atâta timp cât rămâne sub valoarea lățimii maxime. Odată ce valoarea lățimii maxime este atinsă, aceasta nu o va depăși.

Dar cum se traduce asta prin design receptiv? Pentru a explica diferența, vom crea o comparație vizuală activând Visual Builder pe o pagină nouă. Vom adăuga o secțiune cu un rând cu o coloană. Apoi, introduceți un modul de text cu un anumit conținut, o culoare de fundal și ceva umplutură personalizată.

Schimbarea lățimii

Când modificați lățimea modulului de text la 80%, veți vedea modulul de text micșorat în dimensiune. Se afișează și posibilitatea de a alinia modulul oricum doriți.

Modificarea lățimii maxime

Când modificați lățimea maximă, valoarea atribuită va începe să se aplice numai din momentul în care lățimea reală depășește valoarea lățimii maxime. Să demonstrăm că este foarte rapid:

Nu a fost depășit

Depășit

Pe lângă lățime și lățime maximă, veți putea găsi înălțimea minimă, înălțimea și înălțimea maximă în setările de dimensionare ale fiecărui element. Iată ce puteți înțelege teoretic din acești termeni:

Min Height - Înălțimea minimă pe care doriți să o atribuiți unui element. Dacă această valoare este mai mare decât înălțimea de intrare, intrarea în înălțime minimă va domina.

Înălțime - Aceasta definește înălțimea reală pe care doriți să o atribuiți elementului.

Înălțime maximă - Această valoare devine noua înălțime odată ce înălțimea depășește valoarea care a fost atribuită înălțimii.

Schimbarea înălțimii minime

Dacă modificați înălțimea minimă a unui element, acea valoare devine norma. Când îl testați, veți vedea automat înălțimea modulului de text modificată în timp real.

Schimbarea înălțimii

Dacă combinați o înălțime minimă și o înălțime, va trebui să vă asigurați că înălțimea este mai mare decât înălțimea minimă. Dacă nu, înălțimea va fi ignorată. În cele două GIF-uri de mai jos, veți putea vedea diferența în timp real.

Nu depășește

Depășește

Schimbarea înălțimii maxime

Înălțimea maximă preia dacă depășește înălțimea minimă, dar este mai mică decât înălțimea. Dacă, de exemplu, ați atribui o valoare mai mare înălțimii minime decât înălțimii maxime, înălțimea minimă ar domina.

Modificarea lățimii maxime pentru rânduri

Una dintre cele mai bune practici în proiectarea web este să alegeți o anumită lățime maximă pentru întregul dvs. site web. Acest lucru ajută la păstrarea tuturor a aspectului receptiv pe diferite dimensiuni de ecran. De asemenea, ajută proiectanții să creeze cadre precise.

Modificarea lățimii maxime globale

S-ar putea să știți sau nu că puteți seta o anumită lățime maximă implicită pentru conținutul dvs. în Customizerul tematic accesând Setările generale și continuând la Setările de aspect. Menținerea lățimii maxime persistente ajută la capacitatea de reacție.

Modificați lățimea maximă pentru un rând în special

Cu noua actualizare de dimensionare glisabilă, aveți, de asemenea, posibilitatea de a defini individual o lățime maximă pentru rânduri. Acest lucru este excelent pentru excepțiile în care are mai mult sens să mergeți cu o lățime maximă mai mare.

Oferirea modulelor la aceeași înălțime

O altă tehnică pe care ar trebui să o rețineți se concentrează pe acordarea elementelor similare la aceeași înălțime. Acest lucru este estetic plăcut ochiului și îi ajută pe vizitatori să caute conținut cu ușurință. Există două modalități comune de a aborda acest lucru:

Utilizarea Egalizatorului de coloane

Prima metodă este una care a fost cu Divi de mult timp. Dacă doriți să creați aceeași înălțime pentru fiecare dintre coloanele din rândul dvs., puteți activa Egalizatorul de coloane în setările de dimensionare ale rândului dvs. Dacă utilizați culorile de fundal ale coloanei, veți observa rapid diferența.

Atribuirea înălțimii fiecărui modul

O altă modalitate de abordare este prin atribuirea unei înălțimi predefinite modulelor pe care le adăugați.

Alinierea conținutului într-un modul

După ce ați atribuit o înălțime tuturor modulelor, puteți juca și cu alinierea conținutului. Pentru a face acest lucru, puteți utiliza fie padding personalizat pentru a determina manual spațiul alb dintr-un modul, fie puteți utiliza câteva linii de cod CSS pentru a alinia automat conținutul.

display: flex;
flex-wrap: wrap;
align-content: center;

Alegerea Înălțimii elementului de design sau a lățimii și transformați Overflow în Scroll

Un alt lucru interesant pe care îl puteți face cu noile opțiuni de dimensionare glisabilă este transformarea revărsării în scroll. Acest lucru vă va ajuta cu ușurință să economisiți spațiu pe paginile dvs. și să adăugați o interacțiune suplimentară. Există doi pași în acest sens; setează o înălțime pentru elementul tău și modifică depășirea în setările de vizibilitate. Începeți prin schimbarea înălțimii elementului dvs.

Apoi, accesați setările de vizibilitate ale elementului dvs. și schimbați revărsarea verticală în scroll.

Crearea unei secțiuni Hero Fullscreen pe toate dimensiunile ecranului

La următorul și ultimul sfat! Doriți să creați o secțiune de erou pe ecran complet? Deschideți secțiunea erou de pe pagina dvs., accesați setările de dimensionare și modificați înălțimea. Este important să utilizați unitatea de vizualizare în înălțime pentru a vă asigura că totul rămâne receptiv pe toate dimensiunile ecranului.

• Înălțime: 100vh

Doriți să aliniați central conținutul în secțiunea erou pe ecran complet? Adăugați și următoarele linii de cod CSS personalizate la elementul principal al secțiunii dvs.:

display: flex;
flex-wrap: wrap;
align-content: center;

Gânduri finale

În această postare, am trecut peste noile opțiuni de lățime și înălțime care vin cu actualizarea de dimensiune glisabilă Divi. V-am arătat cum funcționează și cum le puteți utiliza pentru a crea design de pagină adaptabil pentru orice tip de site web pe care îl creați. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.