Tot ce trebuie să știți despre unitățile avansate ale Divi 5

Instrumente de proiectare excelente vă oferă control asupra fiecărui aspect al site -ului dvs. web. Indiferent dacă este vorba de o căptușeală perfectă sau de a asigura cântarele de text impecabile pe dispozitive, fiecare detaliu contează. Divi a fost un însoțitor de încredere pentru designeri de ani buni, oferind o bază solidă pentru construirea de site -uri profesionale. Divi 5 o duce mai departe, introducând o caracteristică numită unități avansate.

Unitățile avansate din Divi 5 ajută la îmbunătățirea modului în care construiți site -uri web. De la calculele dinamice ale Calc () până la scalarea fluidului Clemp (), o gamă completă de unități CSS precum VW și REM și flexibilitatea variabilelor CSS. În această postare, ne vom scufunda adânc în unități avansate, cum să le folosim în constructorul vizual și de ce sunt necesare pentru fiecare utilizator Divi. Indiferent dacă sunteți de reglare fină sau visezi noi modele îndrăznețe, unitățile avansate oferă un control și mai mult asupra receptivității designului tău.

Să ne scufundăm.

Ce sunt unitățile avansate în Divi 5?

Unitățile avansate din Divi 5 vă permit să controlați elementele de proiectare cu câmpul său unitar multifuncțional. Este un singur câmp de intrare puternic, care acceptă spectrul complet al unităților, funcțiilor și variabilelor CSS.

Este o mică modificare a constructorului vizual care acceptă toate unitățile CSS cu un nou suport pentru variabilele Fit-Content, Unset, Calc (), Clamp () și CSS.

Unitățile avansate vă eliberează de constrângerile valorilor statice. Nu trebuie să ghiciți dimensiuni fixe de pixeli sau să luptați cu puncte de întrerupere pentru a face lucrurile să se potrivească așa cum le doriți. Fără a părăsi constructorul vizual, puteți construi machete care se flexează și se extind fără efort-cu tipografie fluidă, distanțare adaptivă și modele conștiente de vizor. Nu este vorba doar despre mai multe opțiuni; Este vorba despre o creativitate mai inteligentă, mai scalabilă.

Explorarea unităților avansate în Divi 5

Funcția avansată a unităților Divi 5 oferă diverse opțiuni de proiectare, fiecare cu modalități unice de a modela machete. Să examinăm jucătorii cheie și să vedem cum funcționează.

Unități CSS în Divi 5

Unitățile avansate deschid o paletă completă de unități CSS, mult dincolo de pixeli și procente. Luați Lățimea Viewportului (VW), de exemplu - Setați lățimea unei secțiuni la 80VW și va prelua întotdeauna 80% din lățimea Viewport (pe orizontală), scalând perfect de la desktop la mobil.

Root EM (REM) se leagă de dimensiunile fontului rădăcină al site -ului - idee pentru o tipografie consistentă, cum ar fi 4.5rem pentru o rubrică.

Puteți încerca, de asemenea, Fit-Content, care dimensionează un element în funcție de conținutul său. De exemplu, utilizarea Fit-Content pentru lățimea unui antet se poate asigura că se adaptează perfect. Puteți adăuga conținut potrivit la câmpul de lățime la rând pentru a menține antetul compact și proporțional, evitând spațiul excesiv sau revărsarea, menținând în același timp un aspect lustruit.

Aceste unități se adaptează la dimensiunile și contextele ecranului, oferind machete care se simt vii, mai degrabă decât blocate în loc.

Calc () este un calculator dinamic

Funcția CACL () este ca un mini calculator încorporat în divi. Vă permite să amestecați unități cu operații - adăugare, scădere, înmulțire și diviziune - pentru rezultate dinamice. Un exemplu clasic este Calc (100% - 50px) , care stabilește lățimea unei secțiuni la 100% și scade 50 de pixeli. Dacă elementul dvs. este aliniat central, 25px din ambele părți se reduce.

Puteți utiliza Calc () pentru distanțare receptivă, cum ar fi setarea unei secțiuni sau a lățimii rândului pentru a lăsa jgheaburi perfecte pe fiecare parte. Calc () se ajustează pe zbor pe măsură ce se modifică Viewport, asigurându -se că proiectarea dvs. rămâne echilibrată fără a face modificări manuale.

Clemă () pentru controlul fluidului

Funcția Clamp () vă ajută să controlați dimensiunile care se reglează fără probleme pe dimensiunile ecranului. Folosește trei valori: o dimensiune minimă, o dimensiune preferată și o dimensiune maximă. Un exemplu bun este Clamp (36px, 4VW, 48px) .

Aceasta înseamnă că dimensiunea începe de la 36px, crește pe baza a 4% din lățimea vizorului, dar niciodată nu depășește 48px. Este excelent pentru text, cum ar fi un modul de rubrică care arată bine atât pe telefoane mici, cât și pe ecrane mari. Clamp () vă asigură că designul dvs. rămâne echilibrat și lizibil indiferent de dispozitiv.

Variabile CSS pentru flexibilitate globală

Variabilele CSS (sau proprietăți personalizate) Vă permit să definiți valori reutilizabile, cum ar fi -dimensiunea de dimensiuni: 5EM , în opțiunile tematice ale Divi sau setările paginii câmpul CSS. Atunci când adăugați variabile CSS în Divi 5, asigurați -vă că le adăugați în elementul părinte ca acesta:

:root {
--font-size:5em;
}

Odată definit, puteți arunca var (–Font-size) în câmpul de dimensiune a textului unui rubrică pentru a-l aplica.

Este un economisitor de timp care îți menține designul consecvent și editabil în zbor.

Valori fără unitate

Unitățile avansate ale Divi 5 includ, de asemenea, valori inițiale, neset și automate. Proprietatea inițială resetează o proprietate CSS la valoarea sa implicită, așa cum este definită de specificația CSS. De exemplu, setările Color: inițial pe un paragraf o revine la negru, ignorând orice stil personalizat sau moștenit. UNSET șterge o proprietate înapoi la starea sa naturală, acționând ca inițială pentru proprietăți neredibile sau revenind la valorile moștenite, atunci când este cazul. Între timp, Auto lasă browserul să decidă o valoare bazată pe context, cum ar fi înălțimea unei secțiuni pentru a se potrivi cu conținutul său.

Cum funcționează unitățile avansate în Divi 5

Unitățile avansate din Divi 5 aduc un nou nivel de control direct în constructorul vizual, ceea ce face ușor crearea de designuri dinamice receptive. Puteți tasta instantaneu orice unitate, funcție sau variabilă CSS - cum ar fi VW, Calc () sau Clamp () - și vezi rezultatele. Iată cum funcționează unitățile avansate în Divi.

Lățimea secțiunii receptive cu Calc ()

Să zicem că doriți o secțiune care să se întindă cu 80% din înălțimea Viewport, dar elimină unele umpluturi din partea de sus și de jos. Navigați la fila de proiectare a secțiunii, localizați câmpul de înălțime și adăugați Calc (80VH - 60px) în câmp.

Acest calcul permite secțiunii să se extindă cu fluid cu Viewport, menținând 80% din înălțimea Viewport, scăzând 30px de sus și de jos.

Tipografie fluidă cu clemă ()

Clamp () poate fi util dacă aveți nevoie de titluri care cresc cu dimensiunea ecranului, dar rămâneți lizibil. În fila de design a unui modul de rubrică, setați dimensiunea textului de titlu la CLAMP (52px, 2VW, 36px) .

Acest lucru stabilește textul la 52px, se scalează pe baza a 2% din lățimea de vizionare și plasează dimensiunea la 36px - oferind fără efort o tipografie receptivă și echilibrată.

Dimensiuni de fonturi conduse de variabilă

Variabilele CSS ale Divi 5 sunt o modalitate excelentă de a obține uniformitate în spațiu, text și alte zone. Puteți seta variabile o dată și apoi le puteți folosi în mod repetat pe întregul proiecte, pur și simplu adăugându -le într -un câmp de unitate modul, coloană, rând sau secțiune. De exemplu, să zicem că doriți dimensiuni constante de rubrică fără a le seta manual sau utilizarea unei presetări de grupuri de opțiuni pentru a le defini.

Puteți adăuga următoarele opțiuni tematice sau setări de pagină , sub Advanced> CSS personalizate :

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

De acolo, adăugați pur și simplu o variabilă la dimensiunea textului de rubrică în orice modul de rubrică. De exemplu, pentru această rubrică în secțiunea noastră de eroi, adăugăm pur și simplu var (–Text-size-H1) . Divi o va recunoaște ca o variabilă și va atribui stilul corespunzător la titlu.

Cele mai bune practici pentru unități avansate

Pentru a beneficia la maxim de unități avansate din Divi 5, o abordare atentă poate economisi timp și să vă asigure proiectele să strălucească. Iată câteva bune practici pentru a vă ghida:

Începe simplu

Dacă sunteți nou în utilizarea funcțiilor și variabilelor CSS, ușurați -vă cu unități familiare precum pixeli (PX) sau procente (%), apoi experimentați cu Calc () pentru ajustări dinamice de bază. De exemplu, încercați Calc (100% - 40px) pentru o lățime a secțiunii înainte de a vă scufunda în variabile de clemă () sau CSS. Acest lucru creează încredere fără să te copleșească mai devreme.

Variabile de pârghie pentru stiluri comune

Definiți variabilele CSS în opțiunile tematice pentru consistența la nivel de site. De exemplu, setarea - Gutter: 30px vă permite să reutilizați distanța pe secțiuni, rânduri și module. Variabilele CSS pot fi, de asemenea, bune pentru setarea unei dimensiuni de text uniform pentru toate rubricile. O editare actualizează totul, accelerând procesul de proiectare și păstrând designul coerent.

Receptivitatea testelor

Sistemul de vizualizare receptiv al Divi este o modalitate excelentă de a vă proiecta designul pe mai multe dimensiuni ale ecranului. După ce ați aplicat unități precum VW sau CLAMP (), comutați între desktop, tabletă și vizualizare mobilă pentru a vă asigura că aspectul dvs. se adaptează fără probleme. Un titlu setat către CLAMP (20px, 3VW, 40px) ar putea arăta perfect pe un desktop, dar poate avea nevoie de ajustare pentru ecrane mai mici, așa că testați -l pentru a fi sigur.

Nu te complica prea

Deși puteți cuib funcții precum Calc (Clamp (20px, 5VW, 50px) - 10px), ar trebui să rămâneți la formule simple, cel puțin în timp ce învățați. Complexitatea excesivă poate încetini performanța și poate face mai greu depanarea atunci când lucrurile nu apar așa cum ar trebui. Lipiți -vă de calcule curate, intenționate, pentru a facilita viața.

De ce unitățile avansate ridică Divi 5

Unitățile avansate sunt excelente pentru eficientizarea procesului de proiectare. Iată câteva dintre avantajele cheie care vin cu această nouă caracteristică:

• Libertatea creativă: amestecarea unităților, funcțiilor și variabilelor deblochează machete care au consumat mai mult timp în versiunile anterioare ale Divi. Formulele simple vă permit să reglați înălțimi, lățimi, dimensiuni de fonturi și multe altele. Această flexibilitate vă permite să construiți mai bine și să executați mai repede, toate în cadrul constructorului vizual.
• Designuri mai bune receptive: unitățile avansate schimbă divi către proiectele de fluide care se adaptează fără efort. Utilizarea VW sau Clamp () vă asigură că site -ul dvs. se simte natural pe orice dispozitiv, reducând nevoia de înlocuire manuală și oferind o experiență lustruită.
• Este rezistent la viitor: unitățile avansate se aliniază misiunii Divi 5 de a moderniza constructorul vizual pentru web-ul de astăzi. Prin îmbrățișarea întregii puteri a CSS, Divi 5 vă echipează cu instrumentele necesare pentru a construi site -uri web moderne. Nu este vorba doar de a ține pasul; Este vorba despre a rămâne în fața curbei cu instrumente care oglindesc ceea ce utilizează dezvoltatorii profesioniști.

Descărcați cel mai recent Divi 5 Alpha

Unitățile avansate este o caracteristică utilă care a fost adăugată recent la Divi 5. De la precizia Calc () la fluiditatea clemei () și a eficienței variabilelor CSS, aceste instrumente fac ca distanțarea, dimensionarea și scalabilitatea să fie mai intuitive ca niciodată. Indiferent dacă utilizați Divi de ani buni sau tocmai l -ați descoperit, puteți construi site -uri web responsive, dinamice, cu mai puțin efort.

Sunteți gata să o vedeți singur? Descărcați Divi 5 Alpha acum și începeți să experimentați cu unități avansate. Joacă -te cu VW și VH pentru distanțarea Viewport, testează clema () pentru tipografie sau configurați variabile pentru a regândi modul în care construiți. Este o șansă de a -ți împinge design -urile în continuare și de a descoperi ce este posibil.