Crearea unui sistem de dimensionare și distanțare cu variabile de design Divi 5

Divi 5 vă oferă un mod structurat de a defini, gestiona și reutiliza deciziile de dimensionare și distanțare pe întregul site. Folosind variabile de proiectare și presetări, puteți crea un sistem de proiectare scalabil ușor de întreținut, de reglat și de reproduce.

În această postare, vă vom arăta cum să gândiți în sisteme și vă vom parcurge prin construirea unui sistem cuprinzător de dimensiuni și distanțări.

Divi 5 este gata să fie utilizat pe orice site nou pe care îl creați, dar este sugerat să vă mențineți pe migrarea site -urilor existente (deocamdată).

De ce să folosiți un sistem de dimensionare și distanțare?

Majoritatea utilizatorilor Divi doresc consecvență în machete, marje și tipografii. Dar puțini își fac timp pentru a defini aceste standarde mai devreme. Sau dacă o faceți, probabil că ați făcut -o printr -o temă de copil puternic stilată. Acum, poți:

Abonați -vă la canalul nostru YouTube

1. Definiți o variabilă de număr o dată (cum ar fi 16px sau clemă (16px, 4VW, 48px))
2. Alocați -l presetărilor modulului/elementelor
3. Sau presetări de grupuri de opțiuni (cum ar fi distanțarea sau dimensionarea)
4. Actualizați variabila mai târziu și consultați modificări reflectate la nivel de site
5. Utilizați mai puțin CSS în general pentru paginile mai subțiri

Cu alți constructori de site -uri, proiectanții tind să se sprijine foarte mult pe cadrele CSS pentru a aplica distanțare și dimensiune constante în timp ce utilizează un sistem pe care îl pot lua de la proiect la proiect. Cu DIVI 5, puteți crea propriul „cadru de design” care funcționează în cadrul Divi UI folosind variabilele de design Divi, fără a fi nevoie să atingeți o singură linie de cod.

Dimensiunea elementului, căptușeala și marjele

Fiecare element web are trei componente care afectează distanța și dimensiunea generală:

• Dimensiunea elementului : dimensiunea conținutului de bază a unui element, definită de lățime și înălțime.
• Padding : spațiu adăugat în interiorul unui element, crescând zona sa de clic și dimensiunea vizuală.
• Marja : spațiu adăugat în afara unui element, îndepărtându -l de alte elemente.

Exemple practice pentru elementele Divi

În general, acesta este modul în care vă puteți aștepta să utilizați căptușeală și marjă în Divi:

• Secțiunile au, de obicei, căptușeală superioară și inferioară (nu marjă) pentru a crea distanță verticală într -o pagină.
• Rândurile beneficiază adesea de căptușeală verticală, dar altfel lăsați conținutul să le umple.
• Coloanele se concentrează în principal pe marja aplicată pentru a crea goluri de coloane.
• Modulele folosesc în mod obișnuit o marjă de jos pentru a separa în mod clar elemente stivuite, dar cantitatea de marjă depinde de grupări vizuale.

Valorile de distanțare implicite ale Divi

Începătorii pentru designul web care folosesc Divi, probabil, nici măcar nu își dau seama că Divi ia unele decizii de distanțare pentru tine în afara cutiei. Designerii mai experimentați le ajustează adesea pentru a se potrivi cu obiectivele lor, dar aceste valorile implicite permit majorității oamenilor să își înceapă rapid proiectele.

Aceste implicite pot fi de ajutor, dar designerii preferă adesea să -și stabilească propriile standarde de distanțare. Dacă doriți să vedeți cum ar arăta pagina dvs. fără configurarea implicită a căptușelii, puteți face acest lucru:

1. Accesați orice element și găsiți grupul de opțiuni de distanțare sub fila Design .
2. Deschideți grupul de opțiuni implicite și setați căptușeala de sus și de jos la 0 (zero).
3. Salvați distanța implicită OG Presetare pentru a o aplica la nivel de site la fiecare element.

Acest lucru vă va arăta cum arată paginile dvs. fără setările implicite ale Divi. Nu va arăta la fel de bine, dar veți începe să vedeți ce trebuie să faceți pentru a vă crea propriul sistem de proiectare (sau puteți utiliza implicitele Divi și puteți face modificări după cum considerați potrivit).

Folosind o scară de distanțare în 8 puncte

Scara în 8 puncte este o schemă de aspect în care valorile de distanțare sunt construite folosind creșteri de 8. Deci, în loc să utilizați valori arbitrare precum 13px sau 27px, vă lipiți de valori precum 8, 16, 24, 32, 40, 48 și așa mai departe.

Acest sistem ajută:

• Păstrați ritmul vertical și orizontal folosind o rubrică consistentă de dimensiuni
• Asigurați distanțarea stivelor curat pe punctele de întrerupere
• Accelerați luarea deciziilor (mai puține opțiuni = design mai rapid)

Puteți utiliza scala în PX sau REM, în funcție de preferința sau tipul de scară. De exemplu, 16px devine 1rem atunci când dimensiunea fontului de bază este 16px.

Mockup -ul unei pagini care vă grupează atenția asupra zonelor selectate și împinge vizitatorii în jos pe pagină cu distanțare verticală

Distanța verticală spune cititorului unde să se concentreze. Elementele grupate împreună cu o distanțare mai strânsă sunt văzute în mod natural ca fiind legate între ele. Lucrurile separate de mai mult spațiu indică o idee nouă.

Cum se creează un sistem de dimensionare și distanțare

Un sistem pentru dimensiunile și spațiile dvs. constă din două lucruri: setarea variabilelor sau jetoanelor care vor fi utilizate pe întregul design și utilizând constant acele variabile în întregul design al site -ului. Iată cum poți face asta cu Divi.

Pasul 1: Creați variabile de număr în managerul de variabilă de proiectare

Divi 5 introduce o interfață vizuală pentru definirea valorilor numerice reutilizabile. Fiecare variabilă a numărului include:

1. Un nume ușor de reamintit (de exemplu, Gap-Sm, Text-H1) care nu este prea lung
2. O valoare numerică sau funcție Calc () sau Clamp ()
3. O unitate CSS (PX, REM, %, VW etc.)

Din cauza managerului variabil, nu trebuie să scrieți variabile CSS într -o foaie de stil separată. Setați toate acestea în managerul de variabilă de proiectare și apoi le selectați din câmpurile de intrare din Visual Builder.

Mai jos este un set de pornire complet al variabilelor de număr pentru a se potrivi cu un sistem de proiectare în 8 puncte. Nu trebuie să folosiți acest lucru, dar vă oferă o idee despre ce este posibil.

Și iată cum pare să completeze acest lucru în managerul variabil.

Rețineți că aceste valori de distanțare vor fi utile în viitoarea caracteristică FlexBox a Divi 5

Pasul 2: Planificarea sistemului dvs. de distanțare în 8 puncte

Paginile dvs. vor conține de obicei modele repetate ale elementelor. Căutați grupuri comune sau clustere, cum ar fi:

• Rubrică, paragraf, buton
• Direcționare mică, titlu mare, paragraf
• Pictogramă, paragraf
• Cărți care conțin mai multe elemente

Cu firele dvs. inițiale (sau proiectele de locație), veți avea ocazia să creați potențiale modele. De asemenea, veți crea lucruri care nu se încadrează în modele pe care va trebui să le decideți cum să vă descurcați. Dar asta face parte din proiectare.

Puteți face acest lucru în Figma sau prin crearea directă a unei pagini cu cadre de fir cu elemente de plasare în DIVI. Obțineți doar tot ce puteți pune pe o pagină. Puteți utiliza o extensie Chrome numită Măsurați totul pentru a vă ajuta să vizualizați distanța (la început cu distanțarea implicită a Divi) în timp ce începeți să le ajustați.

Pentru a utiliza extensia, activați -o din bara de instrumente de extensie Chrome. Apoi faceți clic pe un element din pagina care vă interesează, concentrând instrumentul pe acel element. De acolo, mutați mouse -ul pentru a măsura diverse aspecte între elementul selectat în prezent și alte elemente în timp ce treceți peste ele.

Pasul 3: Alocați variabile de număr la presetările de grupuri de opțiuni

Cu un fir de fir al unei pagini configurate și o variabilă de proiectare în loc, puteți începe să faceți distanță și modificări legate de dimensionare pe pagina dvs. Mai întâi puteți începe cu grupuri de conținut. Să ne concentrăm pe rubrica, paragraful și butonul din secțiunea Hero.

Firur cu conținut de loc și dimensionare a fontului/fontului în loc

Rețineți că, în acest moment, veți dori deja să aveți un prim proiect al tipografiei dvs. configurat deja. Aceasta include fonturi, dimensionarea fonturilor și distanța de înălțime/literă a liniei. Fără aceasta, este foarte probabil să vă reechilibrați toată dimensiunea dvs. odată ce vă stabiliți sistemul tipografic.

Exemplu de opțiuni de dimensionare a tipografiei configurate ca variabile de număr

Acum, vrem să evaluăm ce distanțare implicită se aplică în proiectare. Pentru a face acest lucru, puteți să vă uitați la graficul mai devreme în postare și să îl comparați cu ceea ce avem în secțiunea Hero. Evident, există o secțiune (nr. 1) și două rânduri (#2 și#3). Deocamdată, vom seta căptușeala implicită de sus/de jos la zero.

În continuare, avem două opțiuni pentru distanțarea secțiunilor: putem seta căptușeala la zero și să o descoperim mai târziu sau putem seta o căptușeală preliminară de sus și de jos în presetarea elementelor implicite pentru ca secțiunile să arate așa ceva:

• Desktop : Set de căptușeală de sus și de jos la Space-XXXL
• Tabletă : Padding de sus și de jos setat pentru Space-XXL
• Mobile : Padding de sus și de jos setat pentru Space-XL

Dar ceea ce faceți este în întregime de dvs. și de variabilele de design de distanțare pe care le terminați să se configureze (sau utilizând valorile implicite dacă preferați să le adoptați ca fiind proprii). Ce avem acum (cu padarea implicită a rândului setat la zero și padding de secțiune personalizată):

Pasul 4: Distanța modulului

Următorul lucru de făcut este să lucrezi la distanțarea dintre modulele din secțiuni/rânduri. Cheia este de a alege un mod consistent de aplicare a distanției la module.

Aveți opțiuni, puteți împărți distanța în mai multe moduri:

• Aplicați distanțarea pe marginea-top
• Aplicați distanțarea pe fundul marjei
• Aplicați distanță uniform între marginea-top și fundul marjei

Este important să ne amintim că multe module au un fund de marjă aplicat în mod implicit, așa că vă recomand să mergeți cu acea convenție și să începeți acolo atunci când setați paradigma de distanțare. Pentru început, puteți seta marjele de sus/inferioare la zero pentru a vedea cum arată distanța dintre module fără implicite aplicate la acestea.

În cadrul acestei secțiuni, am aplicat 0px la marginea de sus și de jos pentru a vedea toate aceste module fără distanțare implicită

Acum, putem începe să atribuim variabile de design de distanțare în fundul marjei acestor module pentru a crea un sistem de distanțare. Vom începe cu titlul și textul corpului.

Pe măsură ce începeți să vedeți modele cu distanțarea modulului dvs., este posibil să doriți să adăugați aceste opțiuni de distanțare la presetările implicite ale elementelor. Și cum trebuie să creați reguli de distanțare pentru elemente care se abat, puteți crea presetări de elemente personalizate. Noile elemente vor folosi presetarea implicită de acolo, dar puteți selecta rapid o presetare a elementelor personalizate pentru diverse situații.

Cum veți folosi Divi 5 pentru dimensionare și distanțare?

Crearea unui sistem de distanțare și dimensionare cu care sunteți mulțumit se reduce la practicarea elementelor fundamentale și aplecarea în instrumentele disponibile. Divi 5 este pe cale de a crea sistemul de proiectare de facto pentru site -urile web WordPress. Acesta lovește locul dulce de a avea multă flexibilitate, dar este ușor să -ți înfășoare capul.

Dacă nu ați avut în vedere niciodată crearea de sisteme de proiectare, Divi vă permite să vă gândiți la asta de la o variabilă de proiectare și nivel presetat, nu numai la un nivel individual sau la nivel de element. Acest lucru vă ajută să aplicați în mod constant decizii de proiectare de bază pe elemente mai repede ca niciodată.

Vei încerca sistemul în 8 puncte sau ai alte lucruri planificate? De asemenea, este prima dată când te gândești la distanța implicită a Divi? Face proiectarea cu Divi automat, dar pentru proiectanții profesioniști, poate doriți să schimbați unele dintre aceste implicite pentru a vă atinge viziunea perfectă pentru pixeli.

Divi 5 este gata să fie utilizat pe orice site nou pe care îl creați.