Cum se schimbă designul bazat pe presetare, paradigma designului divi

Capacitățile de proiectare ale Divi au evoluat odată cu introducerea presetărilor de grupuri de opțiuni în Divi 5. În timp ce presetările elementelor au făcut ușor să salveze și să reutilizeze elemente complet stilate, noile presetări ale grupului de opțiuni adaugă un strat de flexibilitate, permițându -vă să reutilizați proprietățile de design, cum ar fi tipografia, distanțarea și efectele în diverse elemente.

Împreună, aceste caracteristici Divi încorporate ajută la redarea modului în care proiectanții abordează consistența și eficiența, permițând iterații de proiectare mai rapide și actualizări globale mai ușoare. În această postare, ne vom scufunda în modul în care aceste presetări funcționează împreună pentru a transforma fluxul de lucru Divi 5 Design!

Cei doi piloni ai designului bazat pe presetate

Înainte de a ne cufunda în detalii, este important să înțelegem cele două componente principale care fac ca designul presetat să fie atât de puternic. Combinând presetările de elemente și presetările grupurilor de opțiuni, puteți crea un proces de proiectare mai eficient, consistent și scalabil. Să ne uităm la acești doi piloni și la modul în care lucrează împreună pentru a vă ridica fluxul de lucru de proiectare.

Presetări de elemente: pachete de design reutilizabile

Presetări de elemente Salvați configurații întregi de proiectare pentru elemente DIVI specifice. Divi are în prezent 4 tipuri de elemente distincte: module, coloane, rânduri și secțiuni. Și când vine vorba de module, presetările elementelor sunt, de asemenea, unice pentru tipul modulului (buton, text, CTA, etc). Când aplicați o presetare a elementelor, toate setările asociate, cum ar fi tipografia, culorile, distanța și efectele sunt moștenite instantaneu atunci când sunt aplicate. Focusul presetărilor de elemente este următorul:

• Asigurați -vă consistența vizuală pe pagini
• Reduceți sarcinile de stil repetitive
• Permiteți actualizări globale pentru modificări mai rapide

Presetări de grupuri de opțiuni: control de proiectare modular

Presetările de grupuri de opțiuni se concentrează pe proprietăți de stil, cum ar fi tipografia, umbrele de cutii, marginile și efectele de defilare. Ei lucrează pe mai multe elemente, permițând proiectanților să amestece și să se potrivească stilurilor fără a fi legați de un singur tip de element. Asta înseamnă că puteți, de exemplu, să utilizați aceeași presetare de umbre a casetei atât pe rând, cât și pe un modul. Principalele avantaje ale utilizării presetărilor de grupuri de opțiuni sunt:

• Aplicați stiluri partajate la diferite elemente
• Stackabil pentru o personalizare avansată
• Permiteți modificări globale în timp real fără a afecta modulele individuale

Crearea unui flux de lucru structurat cu presetări

Acum că v -am arătat cei doi piloni ai presetărilor din Divi și am explicat pe scurt diferența, să parcurgem câteva sfaturi pentru crearea unui flux de lucru structurat.

Pasul 1: Definiți stiluri de bază cu presetări de grupuri de opțiuni

Începeți prin a stabili principiile de bază ale site -ului dvs. web. Aceasta include tipografie, culori, stiluri de butoane, distanțare și multe altele. Aceste elemente fundamentale sunt esențiale pentru menținerea consecvenței pe site -ul dvs. web.

Pentru setări recurente constant, puteți alege să setați presetarea grupului de opțiuni ca implicită. Un bun exemplu în acest sens este stilul textului paragrafului tău și îl folosești ca implicit.

Presetările de grupuri de opțiuni sunt versatile și reutilizabile, permițându -vă să aplicați aceste setări pe mai multe elemente. De exemplu, după ce definiți o presetare de umbre text, puteți aplica acea presetare la titluri pe toate tipurile de elemente de pe site-ul dvs. web. În această etapă, puneți bazele pentru restul designului dvs., iar aceste presetări ar trebui să servească ca blocuri de construcție ale site -ului dvs. web.

Pasul 2: Creați presetări de elemente pentru module specifice

După ce ați definit stilurile de bază, următorul pas este să creați presetări de elemente pentru elemente de design mai specifice. Deși urmarea acestei ordini este cea mai logică în teorie, de multe ori te vei regăsi să creezi atât simultan. Presetările de elemente sunt pachete complete de proiectare pentru elemente individuale (secțiuni, rânduri, coloane, module) și vă permit să aplicați rapid stiluri consistente pe site.

Proiectați un buton CTA pre-stilat folosind presetările de grupuri de opțiuni predefinite, concentrându-vă pe tipografia butonului, culoarea de fundal și efectele de trecere.

Salvați acest lucru ca un element presetat pentru utilizarea viitoare. Construiți alte elemente recurente, cum ar fi module de mărturie, secțiuni de caracteristici sau tabele de prețuri și stilizați -le în consecință. Fiecare dintre aceste module pre-stilate poate fi salvat ca presetare de elemente pe care o puteți aplica ori de câte ori este nevoie.

Pe măsură ce proiectați, gândiți -vă la salvarea machetei care conțin aceste presetări în biblioteca Divi. Acest lucru vă permite să mențineți o imagine de ansamblu a tuturor desenelor dvs., ajutându -vă să urmăriți fiecare stil prestabilit pe care l -ați creat. Nu trebuie să vă faceți griji pentru a obține totul perfect de la început. Pe măsură ce vă construiți site -ul, probabil veți modifica aceste elemente pe măsură ce mergeți.

Pasul 3: Implementați și ajustați după cum este necesar

După ce ați creat grupul de opțiuni și elementele de presetare, le puteți aplica pe site -ul dvs. web. Dacă construiți un site web de la zero fără a utiliza în avans software de proiectare, șansele sunt mari că ați aplicat deja presetările în timpul primei pagini.

Este posibil să fie nevoie să faceți ajustări la nivelul elementului în timp ce lucrați. De exemplu, dacă aplicați o presetare pe un modul mărturie, dar trebuie să schimbați distanța pe o anumită pagină, puteți face acest lucru fără a afecta restul site -ului. Această flexibilitate vă permite să vă ajustați pe măsură ce mergeți, asigurându -vă că proiectarea dvs. rămâne scalabilă și adaptabilă.

Cheia aici este să ne gândim la presetări ca la un instrument pentru crearea unui sistem de proiectare flexibil, coerent, mai degrabă decât un cadru rigid pe care trebuie să -l urmezi exact. Probabil că va trebui să vă reglați stilurile pe măsură ce continuați să construiți, așa că întotdeauna nu ezitați să modificați presetările atunci când este nevoie și să le treceți la nivel de element. Continuați să vă rafinați designul și să profitați din plin de editarea în timp real a Divi pentru a face aceste ajustări din zbor.

Pasul 4: Păstrați -vă stilurile organizate în biblioteca Divi

Pentru a urmări toate presetările și aspectele elementelor dvs., salvați -le într -un aspect pe care îl puteți păstra în biblioteca Divi.

Pe măsură ce site -ul dvs. crește, veți putea să vă ajustați presetările salvate pentru a vă îmbunătăți designul. Sunteți întotdeauna capabil să vă modificați presetările în elementul la care lucrați. După ce actualizați o presetare, se va actualiza pe întregul site web.

Pasul 5: iterați și îmbunătățiți

Unul dintre lucrurile grozave despre sistemul presetat al Divi este capacitatea de a îmbunătăți și perfecționa continuu designul. Pe măsură ce construiți mai multe pagini și machete, revizuiți presetările grupului de opțiuni și elementelor pentru a face ajustări globale.

Dacă decideți să vă schimbați culoarea butonului principal sau să actualizați dimensiunea fontului tuturor rubricii, puteți face acest lucru o dată și să-l reflectați pe site-ul în toate cazurile în care se aplică presetarea respectivă.

Pe măsură ce continuați să lucrați, veți obține o înțelegere mai profundă a elementelor care funcționează bine împreună și care au nevoie de ajustări suplimentare. Nu vă fie frică să modificați presetările pe măsură ce mergeți și să profitați de flexibilitatea Divi pentru a face mici schimbări care se potrivesc viziunii dvs. în evoluție.

Prin iterarea continuă și îmbunătățind presetările dvs., veți crea un site care nu este doar coeziv, ci și adaptabil la schimbările viitoare sau tendințele de proiectare. Nu uitați, sistemul presetat este un instrument care vă ajută să vă eficientizați procesul - nu un set de reguli pe care trebuie să le urmați strict din prima zi.

Beneficiile unui flux de lucru bazat pe presetare

Acum că am trecut prin elementele de bază ale creării unui flux de lucru structurat cu presetări divi, să trecem peste câteva dintre beneficiile care vin cu această abordare.

Viteză: reduceți timpul de proiectare cu presetări gata de utilizare

Cu sistemul presetat al Divi, puteți reduce drastic timpul necesar pentru a proiecta un site web. În loc să începeți de la zero de fiecare dată când trebuie să proiectați un element, pur și simplu creați și reutilizați elementele și presetările grupului de opțiuni. Indiferent dacă este vorba despre un buton CTA, un stil de rubrică sau un modul de mărturie, aceste presetări vă permit să aplicați un pachet complet de proiectare cu un singur clic.

De exemplu, după ce ați conceput un stil de frontieră cu presetările grupului dvs. de opțiuni, îl puteți aplica în mod constant pe toate paginile, fără a fi nevoie să refaceți munca.

Presetările cu elemente vă economisesc și mai mult timp, permițându-vă să reutilizați module întregi pre-stilate. Puteți implementa un modul complet proiectat cu un singur clic, asigurându -vă că aspectul dvs. se potrivește instantaneu.

Această abordare gata de utilizare a proiectării vă permite să vă construiți mai repede și să vă concentrați pe aspectele creative ale proiectului dvs. în loc de sarcinile repetitive de a stiliza elemente individuale.

Coerență: mențineți stilul uniform pe pagini

Un avantaj major al unui flux de lucru bazat pe presetare este consistența. Folosind presetări ale grupului de elemente și opțiuni, vă asigurați că fiecare pagină de pe site -ul dvs. web respectă aceleași reguli de proiectare, de la tipografie la distanțare la culori.

Setarea unei presetări de grupuri de opțiuni unice ca butonul implicit asigură că dimensiunile și stilurile de font ale site -ului dvs. rămân uniforme, indiferent unde apar. Această consistență consolidează identitatea vizuală a site -ului dvs. și îi oferă un aspect lustruit, coeziv.

În loc să te ocupi de stiluri inconsistente pe diferite pagini, puteți menține un sistem de proiectare unificat care îmbunătățește experiența utilizatorului și face ca site -ul dvs. să pară mai profesionist.

Scalabilitate: extindeți -vă cu ușurință și actualizați designul site -ului

Presetările fac incredibil de ușor să vă extindeți site -ul pe măsură ce crește. Indiferent dacă adăugați pagini noi sau modificați designul celor existente, vă puteți actualiza designul rapid și eficient. Dacă trebuie să adăugați o nouă pagină, aplicați pur și simplu presetările de element și opțiuni existente, asigurându -vă că noua pagină se potrivește perfect cu restul designului site -ului dvs.

Trebuie să faceți actualizări globale? Cu sistemul presetat al Divi, puteți schimba o presetare o dată și o puteți reflecta automat în toate cazurile în care se aplică presetarea respectivă. De exemplu, dacă doriți să schimbați culoarea tuturor butoanelor de pe site -ul dvs., pur și simplu actualizați presetarea butonului și fiecare buton legat de presetarea respectivă se va actualiza instantaneu.

Această scalabilitate înseamnă că, pe măsură ce site -ul dvs. evoluează, puteți continua să vă dezvoltați designul fără a fi nevoie să refaceți fiecare element individual. Indiferent dacă adăugați un blog, produse noi sau secțiuni complet noi, designul dvs. va rămâne coerent și consecvent.

Flexibilitate: înlocuiți elementele individuale fără a rupe sistemul

În timp ce presetările vă oferă o abordare structurată a designului web, ele permit totuși flexibilitate. Dacă trebuie să faceți ajustări la un element specific, puteți înlocui presetarea pentru acel element fără a afecta restul designului.

De exemplu, dacă aplicați un element presetat pe un modul Blurb, dar trebuie să ajustați dimensiunea pictogramei sau distanțarea pentru o anumită instanță, puteți face aceste modificări direct pe modul, fără a afecta alte cazuri ale presetării în altă parte a site -ului. Cu presetări de grupuri de opțiuni, puteți regla setări individuale, cum ar fi dimensiunea fontului sau culoarea butonului, pentru elemente specifice, menținând în același timp stilurile de bază de pe site.

Această flexibilitate este esențială pentru a obține un aspect personalizat pentru secțiuni unice ale site -ului dvs. Permite o personalizare detaliată fără a rupe consistența și structura pe care presetările le oferă. Pe măsură ce designul dvs. evoluează, puteți continua elementele de reglare fină, după cum este necesar, oferind un echilibru de control și ușurință care face ca procesul să fie mai neted și mai adaptabil.

Începeți să proiectați mai inteligent cu presetări în Divi 5

Îmbrățișarea unui flux de lucru bazat pe presetare va redefini modul în care construiți site-uri web cu Divi. Utilizând presetări de elemente și presetări ale grupului de opțiuni împreună, puteți crea site-uri web uimitoare, extrem de adaptabile și ușor de gestionat. Presetările de grupuri de opțiuni sunt disponibile în DIVI 5 exclusiv, așa că acum este cel mai bun moment pentru a începe să vă familiarizați cu interfața DIVI 5!