Crearea unui sistem de distanțare bazat pe goluri cu DIVI 5

Distanța constantă este fundamentul unui site web lustruit, profesionist. În loc să gestionați marjele pe elemente individuale unul câte unul, vă puteți baza pe un singur sistem care menține aspectul curat și echilibrat pe site -ul dvs.

Cu noile variabile de design Divi 5 și funcțiile FlexBox, acum puteți construi un sistem de distanțare bazat pe goluri direct în Visual Builder, nu este necesar o codificare personalizată. Să aruncăm o privire!

De ce metodele tradiționale de distanțare nu sunt scurte

Marjele și căptușeala par suficient de simple. Adăugați ceva spațiu aici, reglați căptușeala acolo. Dar această abordare poate deveni ușor dezordonată. Iată cum se joacă în practică:

Setați o marjă de 30px pe un bloc de text. Apoi aveți nevoie de spațiu în jurul unui buton, astfel încât adăugați 20px.

Un alt modul are nevoie de cameră de respirație, așa că alegeți 40px. Fiecare decizie se simte corect în acest moment, dar construiți o casă de cărți.

Treceți la mobil și totul ar putea părea dezactivat. Valorile de pixeli alese cu atenție nu se traduce. Distanța dvs. arată perfect pe desktop, dar în afara echilibrului pe dimensiuni mai mici ale ecranului. Deci, creați valori specifice mobilului, apoi valorile tabletei.

Acum gestionați trei sisteme de distanțare diferite. Această abordare divizată face ca menținerea unui ritm vizual constant pe site -ul dvs.

Modul în care proprietățile GAP fac distanță simplă

Proprietățile GAP funcționează diferit de marjele tradiționale. Nu aplicați distanțare la fiecare element individual. În schimb, setați reguli de distanțare pe containerul părinte. Containerul gestionează automat distanța dintre toate elementele copilului.

Cu FlexBox activat, primiți două controale de decalaj: orizontală și verticală. Setați decalajul orizontal la 24px și toate elementele copilului obțin 24px de spațiu între ele pe orizontală. Setați decalajul vertical la 15px, iar elementele stivuite obțin 15px de spațiu vertical.

Aceasta funcționează pentru orice conținut din containerul FlexBox. Modulele de text, imaginile, butoanele, divizoarele și orice altceva ați introdus acolo obțin aceeași distanță consistentă. Nu va trebui să săpați prin module individuale și să le reglați separat marjele; Proprietățile GAP se ocupă de distanță matematică.

Metoda tradițională face alegeri aleatorii de distanțare: 10px aici, 20px acolo, 40px în altă parte. Aceste valori împrăștiate provoacă inconsecvențe și îngreunează ce distanțare se aplică. Proprietățile GAP elimină ghicitul folosind o regulă consistentă pentru toate elementele.

Această abordare are încă limitări. Mai trebuie să vă amintiți fiecare valoare pe care ați folosit -o și să o aplicați manual oriunde aveți nevoie. Trebuie să ghiciți ce valori funcționează unde. Odată ce setați aceste valori, schimbarea minții înseamnă a găsi fiecare și a o înlocui manual, a lăsa loc erorilor și inconsecvențelor.

Un sistem de distanțare bazat pe goluri cu variabile FlexBox și Design este o abordare mult mai bună.

Cum să configurați sistemul GAP în Divi 5

Construirea unui sistem de distanțare bazat pe goluri sună complex, dar Divi 5 îl face surprinzător de simplu. Nu aveți nevoie de cunoștințe de codare sau cadre externe. Visual Builder gestionează totul prin variabile de design și controale FlexBox. Vă vom parcurge prin fiecare pas, de la crearea variabilelor dvs. de distanțare la salvarea presetărilor reutilizabile.

1. Creați variabile de distanțare

Divi 5 poate stoca valori de decalaj în interiorul constructorului vizual folosind variabile de design. Vă construiți sistemul de distanțare o dată și aplicați aceste valori oriunde apar controale FlexBox, nu sunt necesare funcții CSS personalizate.

Managerul variabil poate fi găsit în bara laterală din stânga a constructorului dvs. vizual. Faceți clic pe pictograma respectivă, apoi deschideți fila numere unde se pot adăuga variabile de distanțare.

Aici, veți crea valori care pot fi utilizate pe întregul site în loc de pixeli cu coduri hard. Mai multe variabile de proiectare sunt disponibile; Nu le vom acoperi pe cei din această postare, dar avem un ghid excelent.

Începeți cu unitatea dvs. de distanțare de bază. Majoritatea designerilor lucrează cu 8-12px ca fundament, dar puteți alege 4px, 10px sau orice altceva se potrivește ritmului dvs. de design. Puteți utiliza unități avansate aici, în afară de doar pixeli. De exemplu, începem cu REM în loc de pixeli (presupunând browserul implicit 1rem = 16px):

• Gap XS: 0.75rem (~ 12px pentru relații strânse pentru coloane cu doar pictogramă și text)
• Gap s: 1.25rem (~ 20px pentru coloane cu blocuri de text)
• Gap M: 2REM (~ 32px pentru cutii de caracteristici, coloane de service)
• Gap L: 3rem (~ 48px pentru secțiuni principale de conținut, machete bare laterale)

Aceste etichete nu sunt fixate; Tu și echipa dvs. le puteți redenumi după cum este necesar. Puteți adăuga, de asemenea, mai multe variabile GAP. Scala de unități REM cu setări de fonturi ale browserului, astfel încât vizitatorii care cresc dimensiunea textului primesc o distanțare proporțională. Acest lucru îmbunătățește accesibilitatea.

Folosiți cleme pentru a face lacune scalabile

De asemenea, putem folosi Clamp (). Vom explica pe scurt dacă nu știți ce este o clemă (). În primul rând, luați în considerare adăugarea următoarelor la variabilele de număr:

• Diferență orizontală a coloanei: CLAMP (16PX, 2VW, 32PX) (pentru goluri orizontale între carduri, caracteristici etc.)
• Gap de coloană verticală: clemă (16px, 1.5VW, 32px) (pentru goluri verticale între carduri, caracteristici etc.)

Clamp () este o unitate CSS sigură de utilizat. Dați trei valori: min, preferat și max. Browserul încearcă valoarea preferată, dar dacă este prea mic, folosește minul și, dacă este prea mare, folosește maximul.

De exemplu, decalajul coloanei orizontale: clemă (16px, 2VW, 32px). Scalele GAP cu lățimea ecranului (2VW = 2% din Viewport). Nu va trece sub 16px pe ecrane mici sau peste 32px pe ecrane mari. Acest lucru menține distanțarea echilibrată fără puncte de întrerupere sau interogări media.

Puteți utiliza orice valori. Am ales această metodă, deoarece este ușor de întreținut, se adaptează la schimbare și produce rezultate mai consistente.

2. Activați aspectul FlexBox pe secțiunile dvs.

Secțiunile noi utilizează FlexBox în mod implicit. Pentru site -uri mai vechi, convertiți o secțiune făcând clic pe pictograma Setări, deschizând fila Design, alegând stilul de dispunere sub fila Layout și selectând „Flex”. Faceți același lucru pentru rândurile și coloanele dvs.

După activarea Flex, primiți opțiuni precum justificarea conținutului pentru aliniere și distribuție. Controlurile de aliniere a articolelor vă permit să setați modul în care se comportă elementele atunci când spațiul se scurge pe orizontală.

Aici, puteți observa controalele de decalaj, care au glisoare orizontale și verticale separate pentru a seta distanța între coloane sau module într -un rând.

3. Aplicați valorile GAP folosind variabilele dvs.

După ce ați configurat variabilele de gol în managerul variabil al Divi, aplicarea lor la setările FlexBox Gap devine simplă prin sistemul de conținut dinamic. Navigați la setările de aspect și treceți peste etichetele din câmpurile de decalaj orizontal sau vertical pentru a dezvălui pictograma conținutului dinamic.

Faceți clic pe pictograma conținut dinamic pentru a deschide dialogul de selecție variabilă. Variabilele dvs. de decalaj salvate apar în acest meniu.

După cum ați observat, am adăugat două seturi de lacune pe baza contextului în care vor fi utilizate. Să facem o scufundare mai profundă pentru a înțelege de ce:

Goluri de prindere: între coloanele flexibile

Golurile dvs. de prindere ar funcționa la nivelul „containerului” prin setările FlexBox de la Divi.

Aplicați decalajul orizontal de coloană [CLAMP (16px, 2VW, 32px)] când aveți coloane aranjate cot la cot, precum trei cărți de service într -un singur rând. Odată selectat, Divi îl aplică automat la setarea GAP. Câmpul va afișa numele dvs. variabil, confirmând conexiunea. Aceasta creează o distanță orizontală proporțională între coloana 1, coloana 2 și coloana 3 când direcția de dispunere este setată ca un rând.

Aplicați gap de coloană verticală [CLAMP (16px, 1.5VW, 32px)] Când direcția de dispunere este setată pe coloană, stivuind elemente pe verticală. Acest lucru va spaționa proporțional proporțional de sus în jos atunci când direcția de dispunere este setată ca o coloană.

Când coloanele cu înfășurarea de direcție a rândului pe mai multe linii, cum ar fi șase carduri aranjate în trei coloane pe rând, aplicați ambele goluri. Un decalaj orizontal spații elemente în fiecare rând, în timp ce un decalaj vertical spațiile în sine.

Goluri de bază: Conținut în rânduri

Golurile de bază controlează relațiile dintre piesele de conținut din fiecare coloană. Când o rubrică este urmată de un paragraf și un buton în aceeași coloană, luați în considerare aplicarea GAP XS (0.75REM) între ele.

Luați în considerare utilizarea GAP S (1.25REM) pentru grupuri de conținut cu mai multe elemente de text sau Gap L (3rem) dacă aveți nevoie de o distanțare semnificativă între două coloane, mai ales dacă direcția de dispunere a coloanei este setată la un rând.

Avantajul variabilelor de proiectare

Variabilele de proiectare au mai multe beneficii față de valorile de tastare manual. Deoarece etichetele pot fi contextuale, ele mențin distanța consecventă fără a memora valorile pixelului sau REM.

Când schimbați filozofia de distanțare, actualizați o variabilă în managerul variabil pentru a actualiza fiecare decalaj utilizat pe site.

Această metodă vizuală evită, de asemenea, erorile de distanțare atunci când membrii echipei introduc valori diferite. Variabilele GAP creează un limbaj comun pentru distanțare, păstrând machete aliniate la standardele de proiectare pe care le setați. Acest lucru este util în special pentru proiectele mari cu mulți contribuitori sau după predarea clientului atunci când clienții editează sau adaugă pagini.

4. Stabiliți lacune receptive

Telefoanele mobile au un spațiu orizontal limitat. Aspectul dvs. de serviciu cu trei coloane arată excelent pe desktop, dar devine înghesuit și rigid pentru a citi pe un ecran de telefon 360px.

Divi 5 vă oferă șapte puncte de întrerupere personalizabile cu care să lucrați cu: telefon, telefon larg, tabletă, tabletă lățime, desktop, ecran lat și ultra largă. Fiecare punct de întrerupere funcționează independent. Puteți modifica direcția de dispunere, puteți schimba variabilele de decalaj sau puteți ajusta alinierea pe mobil fără a încurca desktopul. Acest lucru vă permite să vizați lățimile exacte ale ecranului în care aspectul dvs. trebuie să se schimbe.

Treceți la punctul de întrerupere al telefonului și schimbați direcția de dispunere de la „Row” la „Coloană”. Ștergeți opțiunea de decalaj orizontal, deoarece coloanele dvs. se stivuiesc vertical în loc să luptați pentru spațiul orizontal.

Diferența verticală bazată pe clemă se micșorează și crește automat pe măsură ce lățimea de vizionare se modifică. Pe un ecran mic de telefon, 2VW este egal cu aproximativ 7px, dar clema nu va depăși minimul de 16px. Pe un ecran mai mare, 2VW ar putea însemna 18px, iar pe un ecran și mai mare, 20px.

Distanța crește lin între aceste limite pe măsură ce dimensiunea ecranului se modifică. Fără a seta diferite valori manual, obțineți o distanțare strânsă pe distanță mobilă și generoasă pe desktop.

Lacunele de bază pot avea încă nevoie de modificări manuale pe punct de întrerupere. Gap M s -ar putea simți prea strâns pe mobil. Treceți la punctul de întrerupere mobil și aplicați Gap L în loc de opțiunea Vertical Gap.

De asemenea, puteți crea variabile specifice mobilului, cum ar fi „Gap Mobile S” sau „Gap Mobile L” și le puteți aplica la punctele de întrerupere a telefonului și a tabletelor. Cu toate acestea, golurile de bază și de prindere funcționează bine în majoritatea cazurilor.

5. Salvați -vă configurația ca presetare

Sistemul dvs. de goluri funcționează bine acum. Variabilele de proiectare vă oferă control asupra distanției prin interfața vizuală cu care ați lucrat. Dar configurarea configurațiilor FlexBox din nou și mai mult îmbătrânește. Trebuie să ajustați direcția de dispunere, alinierea și ambalarea. Apoi aplicați variabilele de gol la fiecare secțiune nouă. Acest proces mănâncă timp.

Presetări de grupuri de opțiuni Remediază această problemă. Acesta stochează configurația completă FlexBox, inclusiv direcția de dispunere, alinierea, ambalarea, justificarea și golurile orizontale și verticale care se referă la variabilele de proiectare.

După ce configurați toate setările FlexBox, treceți peste panoul de stil de aspect. Veți vedea pictograma de presetări ale grupului de opțiuni.

Faceți clic pe el și selectați „Creați presetare din stilurile curente.” Numiți -l pe baza a ceea ce face aspectul: „Grila cu trei coloane”, „Servicii Grila” sau „Afișajul cardului”.

Presetarea transportă configurația FlexBox în orice container. Nu copiază culori de fundal, fonturi sau alte stiluri vizuale.

Aplicați presetarea „Grila cu trei coloane” pe orice rând. Acesta stabilește automat același comportament de distanțare, aliniere și înfășurare. Fiecare rând sau coloană își păstrează aspectul vizual în timp ce folosește aceeași structură de aspect.

Petreci mai puțin timp recreând setări pe care le -ai perfecționat deja. Identitatea vizuală rămâne unică pentru fiecare secțiune. Fundația structurală rămâne consecventă pe site -ul dvs. Sistemul dvs. de decalaj rămâne rapid de implementat, iar modelele de dispunere dovedite se reutilizează eficient.

Obțineți o distanță perfectă de fiecare dată cu Divi 5

Cu noile variabile FlexBox și Design de la Divi 5, distanța constantă devine fără efort. GAP controlează machetele de echilibru pe dispozitive, în timp ce variabilele asigură că actualizările reflectă pe întregul site cu o singură schimbare.

În loc de corecții constante, obțineți un sistem clar în care puteți avea încredere. Stabiliți -vă distanța o dată, reutilizați -o peste tot și concentrați -vă pe proiectarea experiențelor excelente pentru vizitatorii dvs.