Construirea cadrului dvs. de proiectare cu Divi 5

Dacă ați lucrat vreodată cu cadre CSS precum Bootstrap, obțineți de ce este atât de popular. Un cadru de design vă oferă o bază reutilizabilă pentru a proiecta machete rapide și consistente, astfel încât să nu construiți de la zero de fiecare dată când stilați o pagină.

Deși majoritatea cadrelor se bazează pe clase pre-scrise, ei totuși se așteaptă să scrieți CSS personalizate pentru o personalizare mai profundă, ceea ce le face dificile pentru non-codificatori. Acolo diferă Divi 5.

Este nevoie de o abordare vizuală, înlocuind CSS cu instrumente precum variabile de proiectare, presetări de grupuri de opțiuni și presetări de elemente. Obțineți toată puterea unui cadru, fără a scrie o singură linie de CSS. În această postare, vă vom arăta cum să construiți un cadru de design fără cod vizual folosind DIVI 5.

Divi 5 este gata să fie utilizat pe site -uri noi , dar nu recomandăm încă migrarea celor existente.

Cum Divi 5 vă permite să construiți un cadru de design fără cod

Divi 5 este reconstruit de la zero pentru a face designul web avansat accesibil tuturor. Indiferent de nivelul dvs. de codare, vă permite să construiți machete moderne, personalizate, vizual. Construirea unui cadru de proiectare nu este diferită.

Abonați -vă la canalul nostru YouTube

Variabilele de proiectare vă permit să definiți valorile de proiectare globală

Variabilele de proiectare vă permit să definiți valori repetabile, cum ar fi culorile, fonturile, distanțarea mărcii dvs. și multe altele într -un singur loc central. Odată salvat, puteți reutiliza aceste valori pe site -ul dvs. web pentru a -i oferi un aspect vizual consistent, de marcă.

În interiorul constructorului vizual, găsiți managerul variabil pentru a defini și stoca diferite tipuri de variabile (numere, text, imagini, link -uri, culori și fonturi) într -un mod organizat.

Variabilele de proiectare sunt ca o versiune fără cod a proprietăților personalizate CSS, dar au mult mai multă flexibilitate. De exemplu, declarați în general variabile CSS, cum ar fi : root {–primary-color: #1A73E8; } , dar cu variabilele de design ale Divi, salvezi doar culoarea ca culoare primară .

Veți vedea adevărata lor putere în timp ce faceți actualizări. Nu este nevoie să treceți prin foaia de stil; Trebuie doar să modificați valoarea variabilă salvată o dată în Variable Manager pentru a actualiza fiecare instanță pe site -ul web. Te lasă să -ți vizualizezi rapid ideile fără să vânezi prin mai multe reguli de stil.

De asemenea, puteți defini elemente de conținut repetate în mod obișnuit, cum ar fi adresa, e -mailul, linkurile, motivele de fundal etc., ca variabile de conținut. Nu trebuie să le introduceți manual de mai multe ori; Un singur clic și aceste elemente apar pe pagina dvs. De exemplu, salvați și utilizați adresa companiei dvs. ca variabilă de text.

Pentru a aplica o variabilă de design, parcurgeți opțiunea și căutați pictograma conținutului dinamic.

Aflați totul despre variabilele de design

Salvați combinații de stil comun cu presetări de grupuri de opțiuni

Presetările de grupuri de opțiuni vă permit să salvați și să reutilizați setările de design utilizate frecvent, cum ar fi distanțarea, granițele, umbrele, stilurile de text și fundalurile, fără a fi necesar să le reconstruiți de fiecare dată. Ei se concentrează pe un grup specific de opțiuni în interiorul unui modul, astfel încât să puteți stiliza acea parte și să o aplicați oriunde cu un singur clic.

De exemplu, să zicem că utilizați întotdeauna aceeași padding de 40px și marjă de 10px pe toate secțiunile mărturie. Salvați aceste setări ca o presetare de distanțare . Când adăugați un nou modul mărturisire, selectați presetarea și este finalizată.

Ceea ce face ca presetările de grupuri de opțiuni să fie puternice este că le puteți amesteca cu variabile de design . Dacă culoarea dvs. principală este salvată ca o variabilă, o puteți utiliza în interiorul unei presetări de fundal, așa că dacă culoarea mărcii se schimbă vreodată, întreaga presetare se actualizează cu aceasta. Fundalul din toate paginile dvs. se schimbă cu un singur clic.

Presetările de grupuri de opțiuni nu vă înlocuiesc întregul modul, acestea se aplică doar grupului de stil pe care îl alegeți. Dar puteți depăși întotdeauna presetările cu setări specifice modulului pentru a personaliza module specifice. Acest lucru vă permite să vă mențineți aspectul și conținutul unic, asigurând în același timp un stil vizual constant pe site -ul dvs.

Aflați totul despre presetările de grupuri de opțiuni

Salvați elemente complet proiectate cu presetări de elemente

Dacă ați fost utilizator Divi, sunteți deja familiarizați cu presetările de elemente. Acestea vă permit să salvați toate stilurile personalizate ale unui modul, inclusiv text, distanțare, culori, pictograme, efecte de hover, ca un element presetat, astfel încât să îl puteți reutiliza oriunde fără să vă construiți de la zero. Practic, creați o versiune gata de acces a modulelor dvs. cele mai utilizate.

Iată un caz de utilizare rapidă: personalizați și salvați o presetare blurb, apoi aplicați -o la alte neclarițe nestăpânite pentru a le modela rapid.

Cum se reflectă aceste instrumente în frontend HTML

Divi 5 poate arăta ca un instrument fără cod, dar scrie de fapt un cod curat, structurat în fundal. Când ajustați setările vizual, cum ar fi alegerea unei presetări de distanțare sau aplicarea culorilor mărcii dvs. de la Variable Manager, nu sunteți doar în stilul unui modul. De asemenea, scrieți codul.

Fiecare decizie de proiectare pe care o luați este tradusă într -o ieșire corectă a frontend -ului. Divi gestionează partea de codificare în timp ce vă concentrați pe design.

Pentru a vă arăta cât de puternic este acest lucru, vom compara fluxul de lucru vizual din Divi 5 cu o abordare manuală folosind un cadru tradițional CSS precum Bootstrap.

Primul Bootstrap:

Construirea unui sistem de proiectare manual cu cod în Bootstrap

De exemplu, am folosit o configurație WordPress cu tema de subliniere instalată.

Într-un flux de lucru tipic bazat pe coduri, ați începe prin definirea valorilor dvs. de proiectare globală ca variabile CSS. Iată al nostru:

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Să zicem că construim un aspect simplu de pagină de contact cu un formular de contact și un buton în stil personalizat. Pentru a menține totul consecvent și reutilizabil, vom folosi un amestec de clase de utilități Bootstrap și propriile noastre variabile CSS.

În primul rând, adăugăm cod personalizat pentru un formular de contact folosind clasele de formular încorporate de Bootstrap pentru a gestiona aspectul și stilul de intrare.

Apoi adăugăm codul pentru butonul nostru stilat. Aici, am combinat clasele de utilități de bootstrap cu variabilele noastre CSS personalizate pentru fundal, raza de frontieră și Shadow. Acest lucru ne oferă un control deplin asupra aspectului. Dacă dorim să facem modificări, ne putem actualiza variabilele.

După cum puteți vedea, este excelent și eficient, dar totul este construit manual. Am definit variabilele, am aplicat clasele și am scris întregul cod de unul singur. Și acesta este un aspect simplu, imaginați -vă construirea de pagini complexe folosind această abordare!

Acum, să construim aceeași pagină folosind DIVI 5 fără codificare.

Recrearea aceleiași pagini vizual cu Divi 5

Începem prin definirea variabilelor noastre de proiectare globală care devin parte a sistemului nostru de proiectare la nivel de site. În primul rând, mergeți la Variable Manager> Culori . Apoi, scrieți codul hex pentru culoarea primară (#E91E63) și salvați.

În mod similar, puteți economisi, de asemenea, variabile de număr pentru raza de frontieră {6px} și distanțare. În continuare, adaug modulul de formular de contact și personalizez butonul de trimitere la stilul meu preferat:

Acum salvez aceste setări de butoane ca un buton presetat pentru o utilizare ulterioară.

Dacă adaug un alt buton și selectez presetarea butonului , vezi ce se întâmplă? Este stilat automat.

Pentru a aplica o presetare a grupului de opțiuni, treceți peste setare și căutați pictograma Setări .

De asemenea, ați observat cum am aplicat mai multe stiluri personalizate pe un buton într -un singur clic, fără a atinge o singură linie de cod? Aceasta este ceea ce ne referim când spunem că vă salvați preferințele de proiectare vizual. Este tipul de flux de lucru Divi 5 pentru care este construit. Este rapid, consecvent și pe deplin vizual.

Ceea ce se întâmplă în culise este magic. Divi nu este doar stivuirea stilurilor orbește. Fiecare variabilă de proiectare, presetare și setare pe care o aplicați este organizată într -un cod curat și eficient redat pe partea frontală.

Sursa de pagină a paginii de mai sus-proiectată DIVI arată că culoarea primară este salvată în secțiunea rădăcină, la fel ca variabilele CSS:

Și pe frontend, presetările grupului dvs. de opțiuni sunt salvate automat și ieșite ca CSS curate care vizează clasele corespunzătoare (.et_pb_button, .et_pb_contact_submit).

Ambele pagini arată la fel, dar modul în care au fost construite și întreținute este complet diferit.

În Bootstrap, am beneficiat de clasele sale de utilitate, dar a trebuit totuși să scriem cod. Dar, cu Divi 5, am obținut același rezultat fără a atinge o linie de cod, numai prin utilizarea caracteristicilor sale puternice, cum ar fi variabilele de design și presetările grupurilor de opțiuni.

Fiecare modificare a fost aplicată în câteva clicuri, fără niciun risc de inconsistențe și totuși codul frontend a rămas curat. Divi îți stochează stilurile într -un format structurat, reutilizabil, fără a adăuga un marcaj inutil sau un stil inline.

Cum să vă construiți cadrul de proiectare cu Divi 5

Divi 5 vă oferă toate instrumentele pentru a construi un sistem de proiectare scalabil, dar la fel ca în dezvoltarea tradițională, ordinea în care utilizați aceste instrumente contează. Să parcurgem pașii și, mai important, să înțelegem de ce:

1. Definiți -vă variabilele de design global

Înainte de a proiecta o pagină, începeți prin definirea variabilelor dvs. de design global. Acestea sunt valorile de bază pe care întregul site pe care îl va baza, cum ar fi culorile, fonturile, dimensiunile, unitățile de distanțare, etc. Odată ce definiți blocurile de construcție ale site -ului dvs., le puteți reutiliza peste tot pentru a păstra totul consecvent, curat și ușor de gestionat.

În Divi 5, aveți managerul variabil pentru a le crea și organiza.

Iată cum joacă tipurile de variabile evidențiate:

• Culori: Salvați culorile primare, secundare și accent ale mărcii dvs., astfel încât să nu trebuie să tastați coduri hexagonale sau să potriviți nuanțele. Salvați -vă variabilele de culoare și aplicați -le cu un singur clic.
• Fonturi: Definiți fonturile exacte pe care le utilizați pentru rubrici, textul corpului sau mărturii. În loc să re-selectați Poppins Bold de fiecare dată când creați un H2, salvați-l ca o variabilă de font . Veți putea reutiliza cu ușurință același stil între module.
• Numere: Stocați valorile dvs. de design, cum ar fi o rază de frontieră de 8px pentru carduri sau căptușeală de 32px pentru module de imagine, ca variabile de număr . Puteți utiliza, de asemenea, unități avansate în variabile de număr pentru a face proiecte dinamice.

Odată ce variabilele dvs. de bază sunt setate, fiecare presetare și pagină pe care o construiți se vor baza pe ele. Și dacă direcția dvs. de proiectare se schimbă mai târziu (să spunem, doriți să vă ajustați distanța de bază) , trebuie doar să actualizați variabila într -un singur loc.

După ce ați definit corect variabilele de proiectare, nu este nevoie să vânați și să modificați fiecare instanță. Schimbați valoarea o dată în managerul variabil în sine.

2. Salvați conținutul recurent la nivel mondial

Folosind Variable Manager , puteți salva, de asemenea, valori de conținut, cum ar fi link -uri, text și imagini care se repetă adesea pe site -ul dvs. În mod normal, ați copia și lipi aceste valori de fiecare dată, dar Divi 5 vă permite să le definiți o dată și să le reutilizați oriunde.

Acest lucru este util în special pentru economisirea legăturilor de socializare, a datelor de contact ale companiei dvs. și a altor conținut recurent care trebuie adăugat manual.

Puteți salva conținut prin restul de trei variabile:

• Text: Să spunem că adresa companiei dvs. apare în subsol, pe pagina de contact și în secțiunea Hero a paginii dvs. de pornire. Salvați -o ca o variabilă de text și selectați -o oriunde doriți să apară adresa.
• Link -uri: Salvați adresele URL la pagina dvs., colecțiile de produse, profilurile sociale sau termenii și condițiile ca variabile de legătură.
• Imagini: Dacă utilizați logo -ul mărcii sau o imagine de fundal pe mai multe pagini, salvați -o ca o variabilă de imagine . Imaginați -vă înlocuirea imaginilor de localizare pe șabloane în clicuri!

Divi 5 vă permite să tratați textul, legăturile și imaginile ca blocuri de construcție reutilizabile. Aceste variabile de conținut se pot simți mici, dar foarte mult impactul, precizia și întreținerea pe termen lung. Economisiți timp, reduceți erorile și mențineți site -ul dvs. actualizat constant.

3. Creare și salvați stiluri de bază cu presetări de grupuri de opțiuni

Odată ce variabilele dvs. de proiectare sunt în vigoare, următorul dvs. pas este să definiți modelele de stil de bază ale site -ului dvs. folosind presetări de grupuri de opțiuni. Salvați setările de proiectare utilizate în mod obișnuit ca presetări și reutilizați -le pe orice modul.

Iată cum să profitați la maxim de presetări de grupuri de opțiuni:

1. Salvați presetările pentru stiluri comune

Începeți prin a economisi presetări pentru setările pe care le utilizați cel mai des, cum ar fi raza de frontieră, culorile de fundal sau distanțarea. Să zicem că folosesc întotdeauna căptușeala superioară de 40px și marginea de jos de 10px pentru mărturii, așa că am salvat aceste valori ca o presetare de distanțare.

Pot aplica instantaneu această distanță la mărturiile mele (și alte module, dacă vreau) . Faceți acest lucru pentru fiecare grup de setare pe care îl reutilizați în mod constant: granițe, umbre de cutie, fundaluri de butoane etc., astfel încât să le puteți reutiliza atunci când construiți pagini.

2. Combinați variabilele de proiectare cu presetări

În continuare, consolidează -ți cadrul combinând variabilele de design cu presetări de grupuri de opțiuni. Să zicem că ați salvat o rază de frontieră 6px ca variabilă a numărului și ați folosit -o în timp ce creați presetarea grupului dvs. de opțiuni. Dacă schimbați variabila mai târziu, presetările dvs. se vor actualiza automat și pe site.

În mod similar, puteți crea tipografie fluidă cu o valoare de clemă () pentru textul receptiv. Salvați -o în interiorul unei presetări H1 și aplicați -l în mod constant la rubricile pe tot parcursul aspectului. Această combinație de presetări și variabile este locul în care cadrul dvs. vizual începe cu adevărat să devină modular, scalabil și ușor de întreținut.

De asemenea, puteți salva presetări de grupuri de opțiuni ca valorile implicite , ceea ce înseamnă că stilurile sunt aplicate automat și la noi module. Aplicați valorile implicite în presetările dvs. comune, astfel încât nici nu trebuie să selectați o presetare de fiecare dată.

4. Creați presetări de elemente

Presetările de elemente completează cadrul dvs. de proiectare. După salvarea stilurilor preferate ca presetări, ar trebui să salvați, de asemenea, stiluri de module ca presetări de elemente.

Acest lucru este util în special pentru modulele pe care le utilizați des, cum ar fi CTA, mărturii, blurbs și formulare de contact. De exemplu, dacă ați conceput un buton CTA cu culoarea mărcii dvs., o umbră moale și o căptușeală specifică, puteți salva întregul design ca o presetare numită lumină primară. Mai târziu, aplicați -l instantaneu pe orice buton nou cu un singur clic.

Setați presetările elementelor ca implicite

De asemenea, puteți seta orice element presetat ca implicit, astfel încât fiecare nou modul de acest tip urmează automat stilurile de design salvate. Salvarea butonului de lumină primară de mai sus ca fiind implicită, veți vedea noul buton moștenind stilul său:

Valoarea implicită accelerează fluxul de lucru și le puteți trece în continuare, dacă este necesar. Dar, în cele mai multe cazuri, presetările bine definite reduce munca repetitivă și elimină ghicitul de proiectare. Cu aceste trei caracteristici combinate, urmați un cadru de design bazat pe presetare, care face ca construirea site-ului să fie complet fără cod.

Proiectarea de pagini noi pe baza cadrului dvs. de proiectare

Acum că am salvat toate variabilele mele de design preferate, presetările de grupuri de opțiuni și presetările de elemente, să ne testăm cadrul.

Construirea de noi pagini a devenit o experiență mult mai rapidă și mai ușoară. Nu trebuie să pornesc de la zero sau să restabilesc manual fiecare modul. Tot ce am nevoie este deja configurat.

După cum puteți vedea, am aplicat mai multe modificări de proiectare în doar câteva clicuri. Da, am importat un aspect Divi pre-făcut, dar l-am personalizat în câteva secunde cu cadrul meu salvat în loc.

În loc să selectez fonturi, să reglez distanțarea sau să modific culorile manual, am aplicat pur și simplu presetările salvate. Designul butonului, dimensiunile textului, stilurile de fundal și granițele de imagine au urmat toate setările cadru pe care le -am construit mai devreme.

Aplicarea manuală a acestor stiluri într -un singur modul ar putea să nu fie mare lucru. Dar când personalizați o întreagă pagină, diferența este clară. Puteți observa ușurința și viteza cu care am făcut toate aceste modificări. Acesta este adevăratul beneficiu al creării unui cadru de proiectare: vă grăbește fluxul de lucru fără a sacrifica calitatea sau consecvența.

Cea mai bună parte vine în timp ce faceți actualizări. Dacă valorile mele globale se schimbă vreodată, trebuie să modific doar variabilele mele de design salvate prin intermediul managerului variabil. De asemenea, pot modifica presetările mele de opțiuni și elemente, făcând clic pe pictograma Setări mici.

Aceasta este Divi 5 de putere pe care vi le aduce. Vă permite să creați, să salvați și să vă personalizați întregul cadru de proiectare fără a atinge o singură linie de cod.

Construirea cadrului dvs. de design fără cod vizual

Crearea unui cadru de proiectare nu mai este doar pentru dezvoltatori. Cu instrumentele potrivite, oricine o poate face, chiar dacă nu ați mai atins niciodată codul. Așa cum ați văzut pe parcursul acestei postări, este nevoie de câțiva pași inteligenți pentru a vă crea propriul sistem de proiectare. Cum? Prin utilizarea Divi 5.

Divi 5 vă oferă instrumentele pentru a face acest lucru

Divi 5 gestionează complexitatea și vă oferă un control complet prin caracteristicile sale avansate. Puteți construi mai repede, puteți rămâne consecvent și puteți face actualizări globale fără a părăsi vreodată constructorul vizual. Cool, nu? Dar acesta este doar vârful aisbergului și abia începem!

Avem multe mai multe caracteristici uimitoare aliniate pentru lansare și nu putem aștepta să le încercați. Descărcați astăzi Alfa publică și construiți -vă propriul cadru de design fără restricții de codare.

Divi 5 este gata să fie utilizat pe site -uri noi , dar nu recomandăm încă migrarea celor existente.