Presetări de elemente și presetări ale grupului de opțiuni: diferența explicată

Ce se întâmplă dacă ai putea să -ți modelezi întregul site Divi cu flexibilitatea claselor CSS? Sistemul presetat al Divi vă permite să amestecați puterea și ușurința, ceea ce va schimba modul în care construiți site -uri web. Indiferent dacă construiți o singură pagină de destinație sau un site cu mai multe pagini, presetările vă permit să creați stiluri reutilizabile care să reducă timpul de proiectare, păstrând totul în mod consecvent.

În DIVI 5, presetările de elemente și presetările de grupuri de opțiuni fac echipă pentru a oferi un flux de lucru puternic, eficient. Presetările de elemente vă permit să creați pachete de design pre-stilate pentru elemente specifice, în timp ce presetările de grupuri de opțiuni oferă stiluri de mix și meci care funcționează pe site-ul dvs. Economisesc timp, asigură coeziunea și deblochează noi posibilități creative.

În această postare, vom explora modul în care funcționează, cum diferă și cum să le combinăm pentru un design mai inteligent și mai rapid. Până la sfârșit, veți vedea de ce sistemul presetat al Divi este un lucru indispensabil pentru următorul dvs. proiect de proiectare.

Ce sunt presetările de elemente?

Presetările de elemente vă ajută să creați consecvență pe diverse elemente Divi. În Divi, există patru tipuri de elemente recurente pe care le puteți găsi pe întregul produs: secțiuni, rânduri, coloane și module. Introduceți în Divi 4 și transportați în Divi 5, acestea vă permit să creați un pachet complet de styling pentru un element și să îl reutilizați cu un singur clic, indiferent unde lucrați pe site -ul dvs.

Presetările de elemente captează fiecare setare pe care ai aplicat -o la un singur tip de element - cum ar fi tipografia, culorile, distanța și multe altele a unui modul Blurb. De exemplu, dacă ați creat un modul Blurb cu dimensiuni specifice de fonturi, un aspect stilat pentru pictogramă și culori, un element presetat blochează toate aceste detalii într -o presetare reutilizabilă.

Presturile elementelor pot fi setate ca implicite, astfel încât fiecare nouă instanță a acelui element moștenește automat stilul presetării. Sunt modificabile la nivel mondial, ceea ce înseamnă o modificare la PERST actualizează instantaneu fiecare instanță legată de pe site -ul dvs. Dacă aveți nevoie să schimbați o presetare, puteți înlocui presetarea la nivelul elementului, oferindu -vă flexibilitate fără a rupe sistemul. De asemenea, puteți modifica presetarea la nivel global, astfel încât să aibă efect în toate cazurile în care a fost utilizată.

Presetările cu elemente sunt perfecte pentru salvarea și reutilizarea modelelor complete, lustruite pentru elemente recurente. De exemplu, atunci când creați un modul CTA, puteți face un element presetat pentru acesta și apoi să îl aplicați în mai multe pagini. Cu un element presetat, este stilat odată, salvat și gata de utilizare oriunde ai nevoie, asigurând consistența proiectării fără prea mult efort.

Ce sunt presetările de grupuri de opțiuni?

Nou în Divi 5, presetările grupului de opțiuni schimbă accentul de la elemente de design întreg la proprietăți de proiectare reutilizabile - cum ar fi tipografia, umbrele de cutie, marginile, distanța sau efectele de defilare. Sunt blocuri de stil modular pe care le puteți aplica pe diferite elemente, de la umbre de butoane până la fonturi cu titlu. Nu sunt legați de un tip de element, făcându -le incredibil de versatile.

Unul dintre lucrurile grozave despre presetările grupului de opțiuni ale Divi, care îl diferențiază puternic de concurenți, este că nu este concentrat doar pe CSS. De asemenea, include efecte construite folosind scripturi. Puteți observa acest lucru în caracteristicile mai interactive ale Divi, cum ar fi opțiunile de condiție, videoclipurile de fundal HTML, efectele de defilare și multe altele.

Presetările de grupuri de opțiuni pot fi aplicate pe toate tipurile de elemente. O secțiune, rând, coloană și modul poate împărtăși aceeași presetare de frontieră. Modulele cu setări buton încorporate pot partaja toate aceleași butoane presetate.

Presetări de elemente vs Opțiuni Presetări de grup: Diferențele cheie

Presetările de elemente servesc ca kituri de design all-in-one, construite pentru a eficientiza fluxul de lucru al Divi, blocând în fiecare detaliu de un singur tip de element-cum ar fi un modul de antet complet cu lățime completă sau o blurbă cu tipografia, culorile, distanțarea și efectele încorporate într-un model static. Concentrația lor este îngustă, legată exclusiv de un element, ceea ce le face să exceleze la duplicarea modelelor complexe, lustruite pe site -ul dvs. cu un singur clic.

Sunt perfecte pentru a accelera procesul atunci când aveți nevoie de o secțiune CTA consistentă pe cinci pagini - stilați -l o dată, salvați -l și implementați -l fără efort. În timp ce oferă actualizări globale și setări implicite, domeniul lor de aplicare este limitat, oferind un pachet fix, gata de mers, care să acorde prioritate consecvenței cu elemente întregi.

Presetări de grupuri de opțiuni

Presetări de grupuri de opțiuni, pe de altă parte, mărește stilurile sau comportamentele reutilizabile-cum ar fi umbra unui buton, stilurile de tipografie ale unei rubrici sau un efect de defilare-oferind o abordare dinamică, încrucișată, care se eliberează de matrița cu un singur element. Aceste straturi de design stivuibile pot adăuga un stil consistent la butoanele de pe orice modul care conține unul, cum ar fi un formular blur, de contact sau un modul de optare prin e-mail, aplicând stilul oriunde se potrivește, cu flexibilitatea de a se amesteca și de a se potrivi.

Strălucesc tăind redundanța într -un cadru partajat. Acestea vă permit să definiți un stil de rubrică sau o umbră de cutie o dată și să o aplicați la nivel de site, toate în timp ce susțineți modificări globale în timp real și înlocuiri la nivel de element. Spre deosebire de natura statică, a total sau nimic, presetările de grupuri de opțiuni vă oferă un stil precis și adaptabilitate pe întregul dvs. design.

Cum se utilizează presetări de elemente și presetări de grupuri de opțiuni împreună în Divi 5

Combinarea presetărilor de elemente și a presetărilor de grupuri de opțiuni în Divi 5 este ca și cum ai asocia un bucătar principal cu un bucătar sous - unul gestionează imaginea de ansamblu, iar ceilalți se aruncă în detalii. Iată un ghid pas cu pas pentru a le face să funcționeze în armonie:

Pasul 1: Începeți cu presetări de grupuri de opțiuni pentru stiluri fundamentale

Începeți prin definirea regulilor de design de bază ale site -ului dvs., cum ar fi tipografia, schemele de culori, umbrele sau efectele dinamice, cum ar fi animațiile de defilare. Salvați aceste elemente ca presetări de grupuri de opțiuni și setați -le ca implicite. Când porniți la un design, presetările de grupuri de opțiuni pot ajuta la construirea fundamentului designului site -ului dvs. De exemplu, atunci când creați un aspect al antetului în constructorul de teme, puteți face ca un grup de opțiuni să fie presetat pentru a stila un buton din meniu pentru a repeta cu ușurință stilul butonului pe întregul site atunci când vă construiți paginile web.

Fiecare element nou pe care îl adăugați și atribuiți presetarea pentru a moșteni aceste stiluri automat, oferind site -ului dvs. un aspect unificat, fără a -l regla constant.

Pasul 2: Construiți presetări de elemente

După ce ați creat presetări de grupuri de opțiuni la elemente de stil, puteți construi pe fundația dvs. de proiectare creând presetări de elemente pentru machete. De exemplu, dacă doriți să aveți mai multe module Blurb pe pagina dvs. de pornire, trebuie doar să stilați unul și să creați o presetare a elementelor. De acolo, puteți adăuga mai multe blurbs și aplicați elementul presetat la fiecare dintre ele, economisindu -vă o mulțime de timp de proiectare.

Pasul 3: Tunează-te cu modificări prestabilite

Uneori, poate doriți să modificați o presetare fără a schimba celelalte cazuri de pe site -ul dvs. Din fericire, atât presetările de elemente, cât și presetările grupurilor de opțiuni permit acest lucru. De exemplu, ați creat presetări de grupuri de opțiuni pentru titlurile dvs. - H1 până la H6 - dar doriți să schimbați culoarea de rubrică pe care intenționați să o utilizați pe un fundal de imagine. Titlurile noastre sunt stilate ca #000000 , care nu va funcționa pentru această aplicație. Puteți edita o singură instanță a acestei presetări fără a modifica presetarea în sine . Mergeți la fila de proiectare a modulului de titlu și schimbați culoarea.

Puteți edita cu precizie presetări de elemente, cum ar fi exemplul Blurb din înainte. O pictogramă nu este perfect pătrată, care pare mai largă decât altele. Prin aplicarea CSS în fila avansată, schimbarea rămâne izolată. Alte module blurb cu aceeași presetare rămân neafectate. Acest lucru crește flexibilitatea proiectării, permițând modificări la elemente individuale, fără a modifica sistemul mai larg.

Veți obține cele mai bune din ambele lumi prin încorporarea presetărilor de elemente și a presetării grupurilor de opțiuni în următorul dvs. proiect de design web: consecvență la nivel de site cu spațiul pentru libertatea creativă.

De ce lucrează mai bine împreună

• Eficiență crescută a proiectării: presetările grupului de opțiuni gestionează detaliile nitty-gritty (cum ar fi tipografia sau umbrele cutiei), în timp ce presetările de elemente vă permite să derulați secțiuni, rânduri, coloane sau module complet stilate în câteva secunde.
• Un design mai consistent: stilurile partajate rămân sincronizate prin presetări de grupuri de opțiuni, iar presetările de elemente asigură că machetele arată identice oriunde sunt utilizate.
• Încurajează scalabilitatea: schimbați o presetare a grupului de opțiuni (cum ar fi dimensiunea fontului) și fiecare presetare legată se va actualiza instantaneu - perfectă pentru site -urile în creștere unde sunt necesare pagini suplimentare.
• Este dovada viitoare: foaia de parcurs a Divi 5 indică presetările grupului de opțiuni de cuiburi în presetări de elemente, promițând o integrare și mai strânsă.

Viitorul presetărilor de elemente și opțiuni în Divi 5

Divi 5 oferă deja un sistem presetat puternic, dar viitorul promite o integrare și mai strânsă care ar putea redefini modul în care construiți sisteme de proiectare: presetări de grupuri de opțiuni de cuiburi în presetări de elemente. Deși este încă în dezvoltare, această caracteristică vă va permite să creați presetări de elemente aproape în întregime din presetările de grupuri de opțiuni modulare, deblocarea unui nou nivel de control al proiectării globale.

Imaginează-ți crearea fără efort Burbs, CTA-uri complet în stil complet și mai mult folosind presetări de grupuri de opțiuni pe care le-ați proiectat deja. Acesta va economisi timp, va face mai ușor crearea unui aspect coeziv pentru site -urile dvs. și vă va permite să construiți site -uri web mai rapid. Cu ambele grupuri presetate care lucrează împreună, puteți actualiza elementele de proiectare pe site -ul dvs. o dată și fiecare element legat se va ajusta instantaneu. Aceasta nu este doar o actualizare incrementală; Este un salt către un adevărat sistem de design asemănător CSS în cadrul constructorului vizual de drag-and-drop al lui Divi.

Deși încă nu putem cuib presetările, foaia de parcurs a lui Divi 5 le include. Când vor ajunge, vor fi modalitatea finală de a crea un sistem de proiectare: începeți cu presetări de grupuri de opțiuni ca blocuri de construcție, asamblați -le în presetări de elemente pentru o implementare rapidă și mențineți controlul global cu un efort minim.

Proiectați inteligent cu presetări de grupuri de opțiuni

Sistemul presetat al Divi 5 nu este doar o caracteristică - este o revoluție pentru designerii web. Presetările de elemente și presetările de grupuri de opțiuni ar putea părea instrumente mici, dar împachetează un pumn. Presetări de elemente vă permite să salvați și să reutilizați designuri întregi cu zero tamfe, în timp ce presetările grupurilor de opțiuni aduc flexibilitate și consecvență stilurilor și comportamentelor pe care le utilizați peste tot. Folosit împreună, creează un flux de lucru rapid, coeziv și adaptabil-fie că construiți o pagină sau un site de comerț electronic cu mai multe pagini.

Adevărata magie se întâmplă atunci când le folosești împreună. Presetările de grupuri de opțiuni vă ajută să stabiliți o fundație solidă rock, apoi să construiți modele lustruite și reutilizabile cu presetări de elemente. Rezultatul este un site web consistent, fără rigiditate, scalabil fără copleșitor și eficient, fără a tăia colțurile. Acest sistem de proiectare bazat pe presetate este un schimbător de jocuri pentru utilizatorii Divi, deblocând puterea asemănătoare CSS cu simplitate punct-și clic.

Înainte de a vă scufunda în următorul dvs. proiect, descărcați cel mai recent Divi 5 Alpha, experimentați cu presetări și vedeți cum transformă modul în care construiți site -uri web Divi.