Utilizarea presetărilor implicite ale Divi 5 pentru a vă stiliza întregul site

Sosirea presetărilor de grupuri de opțiuni a deschis atât de multe posibilități noi în Divi 5. Nick a spus că aceasta a fost cea mai importantă caracteristică pentru a lovi Divi în ani și, pe măsură ce le testați, veți vedea exact de ce a spus asta .

Sunteți deja obișnuit cu presetările pentru elemente, dar presetările de grupuri de opțiuni adaugă un strat cu totul nou de control de proiectare pe care nu îl veți înceta niciodată. Cu toate acestea, ambele tipuri de presetări acceptă „ presetări implicite ”. Asta vreau să vă arăt pe parcursul următoarelor 2000 de cuvinte.

Ce sunt presetările implicite în Divi 5?

Presetările implicite sunt primele presetări pe care doriți să le editați pe site -urile dvs. web. În multe feluri, acestea sunt un înlocuitor total pentru personalizatorul temelor.

Aveți două tipuri de presetări implicite cu care puteți lucra imediat după editarea unei pagini - presetări implicite cu elemente și presetări de opțiuni implicite . Haideți să acoperim presetările cu elemente mai întâi, deoarece este mai familiar, dar veți dori să începeți toate design -urile dvs. cu presetări de grupuri de opțiuni.

Presetări implicite cu elemente

Presetările de elemente fac o muncă rapidă de proiectare a unui element pe care îl veți folosi de mai multe ori pe site -ul dvs. web. Cu presetări de elemente, puteți lua un modul precum modulul Blurb și puteți edita presetarea implicită a modulului. Odată ce presetarea implicită este editată, folosește aceleași stiluri atunci când adăugați un nou modul BLURB pe site -ul dvs. (deoarece elementele noi folosesc setările implicite).

Cum să editați o presetare a elementelor implicite

Editarea unei presetări implicite este simplă. Faceți clic pe elementul pentru care doriți să schimbați setările implicite (în acest caz, un modul de text). În partea de sus, faceți clic pe selectorul de presetare.

Ar trebui să vedeți cel puțin o presetare în meniul derulant - presetarea implicită pentru acel element. Găsiți setările (pictograma Gear) și faceți clic pe ea pentru a schimba opțiunile de setări din elementul de pagină specific la opțiunile de setări pentru presetarea implicită.

Veți ști că editați o presetare atunci când pesmetul (care arată poziția cuibărită a elementului la care lucrați) dispar și cuvântul „ presetare ” apare în stânga sus a panoului de setări. Veți observa, de asemenea, că selectorul presetat spune „ presetare implicită ” și devine albastru. De aici, navigați la grupul de opțiuni Element pe care doriți să îl editați. În acest caz, am decis să merg la fila Design> Text> Mărimea textului pentru a edita dimensiunea conținutului de text pentru acest modul.

Faceți clic pe „Salvați presetarea” pentru ca modificările dvs.

În caz că nu știai
Dacă ați fost în preajmă Divi de ceva vreme, știți despre presetările de module . Presetările cu elemente sunt aceleași cu presetările modulului, dar numirea presetării modulului a fost confuză, deoarece presetările pot fi utilizate și pe elemente non-module, cum ar fi secțiuni și rânduri.

Vizualizarea Wireframe a unei pagini din Divi 5. Observați cum acest rând are presetări, în timp ce nu se potrivește criteriilor pentru a fi un modul, ci mai degrabă un container.

Presetările implicite ale elementelor pot fi „anulate” pur și simplu prin aplicarea unui element personalizat diferit presetat la modul (mai multe pe acest lucru de mai jos) sau prin aplicarea stilurilor direct la un modul sau element specific. Divi, la fel ca CSS, funcționează cu reguli de specificitate și, în acest caz, setările aplicate unui modul direct sunt mai specifice decât setările aplicate la un element implicit presetat.

Dar există o nouă presetare pe bloc cu care ar trebui să vă proiectați site -urile Divi.

Presetări ale grupului de opțiuni implicite

Noile presetări ale grupului de opțiuni Divi vă permit să creați stiluri implicite care acoperă diverse module și elemente care pot utiliza grupuri de opțiuni similare. Toate acestea se realizează cu presetări de grupuri „implicite” . Dacă sunteți confuz cu privire la detaliile acestui nou concept de grupuri de opțiuni, puteți citi mai multe despre acesta în postarea noastră, ceea ce vă spune tot ce trebuie să știți despre ele.

Aflați mai multe despre presetările de grupuri de opțiuni

Pe scurt, diferite module au compoziții diferite (a se vedea tabelul de mai jos pentru un exemplu care compară patru elemente diferite).

Atunci când caracteristicile compozite ale unui element se suprapun cu altul, acestea pot împărtăși stiluri la nivelul grupului de opțiuni - ceea ce înseamnă că economisiți timp atunci când proiectați motive similare pe diferite module și elemente (cum ar fi textul de titlu în mai multe module). În special cu titluri, text corp, umbre, animații, funcționalitate lipicioasă, granițe, distanțare și butoane, veți proiecta site -uri mult, mult mai rapid.

Cum să editați o presetare a grupului de opțiuni implicite

Pentru a edita o presetare a grupului de opțiuni implicite, accesați un panou de setări al unui modul sau rând/secțiune. Treceți peste grupurile de opțiuni disponibile (text, text de titlu, buton, fundal etc.). Grupurile de opțiuni care susțin presetările vor dezvălui o pictogramă prestabilită în partea dreaptă a câmpului OG atunci când sunt trecute. Faceți clic pe pictograma Presetări pentru a afișa implicit și orice presetări personalizate pentru acel grup de opțiuni.

Iată un videoclip care demonstrează diferența dintre editarea unui aspect particular al unui singur modul și editarea aceluiași aspect cu o presetare a grupului de opțiuni.

Știți că editați o presetare a grupului de opțiuni atunci când UI se schimbă de la lumină la întuneric (cu excepția cazului în care ați fost în modul întunecat, caz în care este opus) doar pentru grupul de opțiuni pe care îl editați în prezent. Trebuie să salvați modificări pentru ca aceștia să intre în vigoare.

Care este diferența dintre presetările implicite și personalizate?

Presetările implicite sunt stilurile aplicate automat la orice elemente noi (module/secțiuni/rânduri) plasate pe o pagină sau un șablon. Indiferent de ce, fiecare element și fiecare grup de opțiuni din Divi vor avea o presetare implicită. Vedeți mai jos de unde provin stilurile implicite.

Presetările personalizate sunt presetări suplimentare, care sunt la fel de ușor de gestionat și de aplicat ca presetări implicite, dar nu vor fi utilizate automat (trebuie să aplicați aceste presetări personalizate în locul implicit). Sunt utilizate în situații speciale, cum ar fi secțiuni întunecate, bare laterale și afișaje de conținut dense - orice are nevoie de proiectarea dvs.

Fiecare site web ar trebui să fie proiectat folosind pe cât posibil presetări de grupuri de opțiuni implicite. Apoi, ar trebui create presetări suplimentare de grupuri personalizate pentru a gestiona situații similare pe specificațiile dvs. de proiectare. Orice nu este acoperit de acele presetări OG poate fi proiectat cu presetări implicite cu elemente și presetări de elemente personalizate. Puteți aplica direct stiluri la module individuale pentru cazurile de margine rămase care trebuie să fie încă proiectate.

Divi este într -o etapă interesantă, cu toate noile caracteristici care se desfășoară. Când unitățile avansate și variabilele de proiectare scad, puteți seta variabile CSS cu toate unitățile și funcțiile CSS. De acolo, puteți utiliza acele variabile CSS în toate presetările dvs., ceea ce face ca fluxul de lucru al proiectării să fie mai consistent și mai rapid.

Există, de asemenea, o caracteristică planificată care să permită presetările de grupuri de opțiuni de cuiburi în cadrul presetărilor de elemente, permițându -vă să creați presetări de elemente cu logica presetărilor de grupuri de opțiuni încorporate în ele. Asta înseamnă că atunci când editați o presetare OG, aceasta ar modifica, de asemenea, presetările de elemente conexe (și invers într -o măsură).

Viitorul arată luminos pentru designeri și dezvoltatori de pe Divi 5!

Cum să transformi o presetare personalizată într -o presetare implicită

Avem presetări implicite și avem, de asemenea, presetări personalizate. Am văzut cum să aplicăm o presetare personalizată în loc de una implicită, dar ce se întâmplă dacă ne place atât de mult, încât vrem să o facem implicită?

Ei bine, este ușor. Accesați presetările elementelor sau la meniul derulant al grupului de opțiuni . Treceți peste presetarea personalizată pe care doriți să o faceți implicit și faceți clic pe pictograma Star . Apoi salvați -vă modificările . Presetarea dvs. este acum presetarea implicită pe întregul site web.

De unde provin stilurile din presetările implicite?

Presetări implicite needitate pur și simplu moștenite valorile stilului găsite în personalizatorul temelor. Aproape toate temele WordPress folosesc în continuare un aspect al personalizatului temelor (chiar și teme blocate), deși Divi a făcut -o astfel încât să fie conectat, dar nu este necesar de utilizat . Probabil că vom înlocui personalizatul la un moment dat în viitor, dar deocamdată, este o relicvă transportată din WordPress Core, care este o problemă de teme WordPress chiar și moderne .

Spuneți că am folosit site -ul de starter al consilierului financiar (ca un exemplu concret). În personalizatorul temelor, dimensiunea textului antetului este setată la 30px .

Pot vedea aceeași valoare (30px) folosită în presetările implicite, accesând Editorul Visual pentru o pagină, făcând clic pe „ Presetarea implicită ” pentru un modul de titlu sau text și verificând textul de proiectare> Titlu pentru ridicarea H1.

O valoare gri într -un câmp Divi 5 înseamnă că este o valoare moștenită, în acest caz, moștenită de la personalizatorul temelor

Dar acesta este pur și simplu setul implicit de acest site de pornire. Dacă ați folosit presetări dintr -un pachet de layout importat sau ați pornit de la zero, diferite valori implicite ar fi setate în personalizatorul temelor.

Cum să utilizați presetările implicite pentru a construi un site web

Vă recomand să începeți construcțiile dvs. cu câteva pagini de filme. Puneți totul pe câteva pagini cu ceea ce știți că va trebui să fiți conceput.

Încercați să vă bazați pe cele mai simple module pentru a finaliza treaba și pentru a repeta utilizarea aceluiași set de module atunci când este posibil. Luați în considerare modul în care puteți utiliza modulele de titlu, text, blurb, meniu, imagine, acordeon/comutator și module video pentru a construi cea mai mare parte a celor mai multe filme ale paginii. Adăugați alte module, după cum este necesar, dar respectarea unui set de module de bază pentru majoritatea lucrurilor va face mult mai rapid să utilizați atât presetările implicite de grupuri de opțiuni, cât și elemente implicite.

Această pagină folosește module secțiuni, rânduri, coloane, text, blurb, imagine, buton și meniu. Păstrând lucrurile cât de simple pot fi pentru această anumită pagină, reduc numărul de grupuri de opțiuni cu care trebuie să le proiectez.

În continuare, veți dori să începeți să vă proiectați cele mai măturate modificări cu presetări de grupuri implicite de opțiuni. Pentru majoritatea modelelor, acesta va fi:

1. Distanță de secțiune : include margini de sus/inferioare, margini stânga/dreapta și orice căptușeală necesară.
2. Secțiune Culori de fundal : Creați o presetare a grupului de opțiuni implicite pe care doriți să o utilizați în majoritatea cazurilor și o presetare a grupului de opțiuni personalizate pentru o culoare de fundal alternativ/contrast. Nu uitați că presetările implicite la presetarea grupului de opțiuni de fundal pot fi, de asemenea, aplicate pe fundalul coloanelor.
3. Tipografie : Începeți cu H1-H6. În funcție de utilizarea modulului dvs., veți dori să le porniți în presetările de grupuri implicite de opțiuni sub textul de rubrică pentru module de titlu și text și text de titlu pentru lucruri precum modulele blurb. Apoi, lucrați la text normal, concentrându -vă pe grupul de opțiuni de text în module de text și grupuri de opțiuni de text corp , găsite în lucruri precum modulul Blurb.
4. Alte setări de design : creați presetări de grupuri de opțiuni pentru granițe, umbre de cutie, filtre (dacă sunteți imagini de stil) și animații. Pentru acestea, tind să nu folosesc presetări implicite, ci să creez presetări personalizate pe care le pot aplica selectiv la elementele de pagină.
5. Setări avansate : Acest lucru este similar cu pasul de mai sus, dar creez presetări de grupuri de opțiuni pentru lucruri precum tranziții și efecte de defilare. De asemenea, tind să nu folosesc presetări implicite, ci să creez presetări personalizate pe care le pot aplica selectiv la elementele de pagină.

Crearea presetărilor de grupuri implicite de opțiuni în acest mod va începe automat să vă aplice stilurile pe site -ul dvs. De fiecare dată când un OG implicit este actualizat, elementele relevante de pe site -urile dvs. web acceptă automat aceste modificări.

Presetările implicite vă vor economisi ore

Presetările implicite, atât elementul, cât și soiul de grupuri de opțiuni, vă vor economisi cantități masive de timp. Abia aștept să începeți să construiți site-uri cu aceste caracteristici folosind constructorul Flast-Fast al Divi 5. Și acesta nu este nici măcar sfârșitul noilor caracteristici care se desfășoară în Divi 5.

Cu funcțiile noi și planificate ale Divi, veți avea la îndemână un adevărat sistem de proiectare. Ați încercat mai întâi editarea unui site folosind presetări implicite? Cum a mers? Spuneți -ne în comentariul de mai jos și împărtășiți modul în care utilizați aceste caracteristici.

Descărcați Divi 5 Aflați totul despre Divi 5 Încercați demo -ul Divi 5