Cum se înlocuiește fonturile cu variabilele de design de font Divi 5

Actualizările fontului pot fi o durere de cap. Schimbați un font de titlu și, dintr -o dată, urmăriți fiecare loc în care apare. Ratați o rubrică sau două, iar designul dvs. se simte imediat. Actualizarea manuală a fonturilor invită inconsecvența.

Divi 5 rezolvă acest lucru cu variabile de font și presetări. În loc să urmărești fiecare instanță, poți seta fonturile o dată și să lași sistemul să se ocupe de restul. Tipografia rămâne curată și unificată, indiferent câte module utilizați. Aruncați o privire la cât de simplu poate fi.

De ce fonturile statice pot crea probleme

Configurațiile de fonturi statice creează o rețea de complicații care se înrăutățesc în timp. Când adăugați fonturi direct în fiecare element, împrăștiați opțiunile de tipografie în sute de locuri diferite.

Construiți un site folosind afișajul Playfair pentru rubrici și poppins pentru textul corpului. Câteva luni mai târziu, doriți să treceți la o stivă de font mai modernă. Acum, vânați prin fiecare modul, fiecare presetare, fiecare setare personalizată pentru a găsi unde locuiesc acele fonturi. Mi -e dor chiar și pe o rubrică îngropată adânc într -o secțiune de mărturie, iar designul tău poate părea rupt.

Când actualizați manual fonturile unul câte unul, puteți utiliza accidental diferite dimensiuni sau greutăți. Actualizați cele mai multe rubrici la 32px, dar ratați câteva care rămân la 28px. Designul tău odată coeziv se simte acum dezechilibrat.

Această metodă împrăștiată transformă modificări simple de fonturi în proiecte majore. Ceea ce ar trebui să dureze minute până la ore de vânătoare și actualizare obositoare. Petreci mai mult timp gestionând tipografia decât proiectarea de fapt cu ea.

Ce ar trebui să utilizați în schimb: variabilele și presetările de design Divi 5

Variabilele de proiectare stochează setările de proiectare, pe care le puteți reutiliza oriunde. Setați un font o dată, salvați -l ca o variabilă de proiectare, apoi utilizați -l pe site -ul dvs. Schimbați variabila mai târziu și toate elementele folosind -o automat.

Divi oferă șase tipuri variabile: numere, text, imagini, link -uri, culori și fonturi. Două variabile de font implicite sunt gata de utilizare: una pentru rubrici și una pentru textul corpului. Managerul variabil se află în bara laterală din stânga sub pictograma bazei de date.

Aceste variabile funcționează în câmpuri care nu le susțin, cum ar fi câmpurile numerice, câmpurile de fonturi și setările de distanțare. Faceți clic pe pictograma variabilă de lângă orice câmp acceptat pentru a vedea opțiunile dvs.

Ce opțiune fac presetările grupului

Presetările de grupuri de opțiuni economisesc grupuri de stil specifice, cum ar fi tipografia, granițele sau distanțarea, nu modulele întregi. De exemplu, puteți crea o presetare doar pentru fonturi și dimensiuni.

Când aplicați o presetare a grupului de opțiuni, aceasta schimbă doar acea zonă de stil. Restul modulului dvs. rămâne același. Puteți combina diferite presetări pe un element fără probleme. Se amestecă variabile de proiectare cu presetări de grupuri de opțiuni pentru mai multă flexibilitate. Creați presetații care vă folosesc variabilele. Când actualizați o variabilă, toate presetările folosind și actualizarea acesteia.

Ghid pas cu pas pentru a crea un sistem de fonturi dinamice cu DIVI 5

Configurarea variabilelor de font durează aproximativ douăzeci de minute. Odată ce lucrează, schimbările de font se întâmplă instantaneu pe întregul dvs. site. Iată cum să ajungi acolo:

1. Creați variabile de font pentru noul dvs. sistem

Deschideți Variable Manager făcând clic pe pictograma bazei de date din bara laterală din stânga. Accesați fila Fonturi. Veți vedea două variabile implicite: una pentru titluri și una pentru textul corpului.

• Configurați fonturile principale: faceți clic pe variabila de rubrică. Alegeți -vă familia și greutatea de fonturi, apoi economisiți -o. Faceți același lucru pentru textul corpului, dar alegeți ceva curat și ușor de citit.
• Adăugați mai multe fonturi, dacă este nevoie: unele modele au nevoie de fonturi suplimentare pentru ghilimele, mărturii sau text special. Faceți clic pe „Adăugați o nouă variabilă” și dați -i un nume clar.
• Completați toate detaliile: Fiecare variabilă deține familia dvs. de fonturi, greutatea, stilul și alte setări. Folosiți greutăți îndrăznețe pentru titluri, greutăți obișnuite pentru textul corpului și italice atunci când doriți să adăugați accent.
• Păstrați -vă numele simplu: în loc să confundați etichete, numiți -le „Citat Font” sau „Entersion Font”.
• Nu uitați să salvați: modificările dvs. nu se vor lipi până nu apăsați butonul de salvare.

Majoritatea site -urilor web au nevoie doar de titluri și fonturi ale corpului. Adăugați doar variabile suplimentare pentru nevoi speciale de proiectare, nu pentru modificări de text minuscule. Mai puține variabile facilitează crearea de conținut nou.

2. Adăugați variabile de număr pentru dimensiunile fontului

Treceți la fila numere în Variable Manager. Aici, creați variabile de dimensiuni care funcționează cu fonturile dvs. Gândiți -vă la acestea ca la scara ta de tipografie.

Începeți cu dimensiunile dvs. de rubrică. Creați variabile numite H1, H2, H3 și așa mai departe. Setați fiecare la o dimensiune diferită, care are sens pentru designul dvs. Puteți utiliza valori obișnuite de pixeli precum 32px sau unități sensibile precum Clamp () pentru dimensiuni care se adaptează la alte ecrane.

Textul corpului are nevoie și de variabila sa de dimensiuni. Numiți -l ceva de genul „dimensiunea corpului” și setați -l la o dimensiune confortabilă de citire, de obicei în jur de 16px la 18px.

De asemenea, puteți crea variabile pentru nevoi speciale de text. Poate doriți o variabilă „text mic” pentru subtitrări sau o variabilă „text mare” pentru mărturii. Numiți -le clar, astfel încât să vă amintiți pentru ce sunt mai târziu.

Aceste variabile de număr funcționează oriunde ai nevoie de dimensionare constantă. Folosiți -le pentru înălțimi de linie, distanțare sau orice măsurare care apare de mai multe ori pe site -ul dvs. Când actualizați o variabilă de număr, totul folosind ea se schimbă automat.

Majoritatea site -urilor web au nevoie doar de titluri și fonturi ale corpului. Adăugați doar variabile suplimentare pentru nevoi speciale de proiectare, nu pentru modificări de text minuscule. Mai puține variabile facilitează crearea de conținut nou.

3. Folosiți Găsiți și înlocuiți -vă pentru a schimba fonturile statice

Faceți clic dreapta pe orice câmp de font din setările modulului dvs. pentru a vedea opțiunea Găsiți și înlocuiți. Aceasta deschide un panou în care Divi încarcă automat setările curente de fonturi. Acum puteți schimba acel font static cu una dintre variabilele dvs. de proiectare.

Câmpul Element sursă arată din ce modul ați pornit. Puteți schimba acest lucru pentru a alege orice alt element din pagina dvs. ca punct de plecare.

Valoarea Find afișează orice font pe care doriți să îl înlocuiți. În loc să alegeți un alt font static, setați valoarea de înlocuire la una dintre variabilele dvs. de proiectare a fontului.

Găsiți și înlocuiți lucrări și pentru dimensiuni de fonturi. Faceți clic dreapta pe orice câmp de dimensiune a fontului pentru a accesa același panou de înlocuire. Acest lucru vă permite să schimbați dimensiuni la nivel de element precum 24px cu variabilele dvs. de număr.

Căutați module de text în care setați manual dimensiunile fontului. Aceste setări de dimensiuni împrăștiate creează aceleași probleme ca și fonturile statice. Când doriți să vă ajustați scala de tipografie, ajungeți la vânătoare prin fiecare modul pentru a găsi fiecare dimensiune. Înlocuiți aceste dimensiuni statice cu variabilele dvs. H1, H2, dimensiunea corpului sau alte număr.

Setați -vă limitele de înlocuire

Găsiți și înlocuiți controalele de locație unde se întâmplă modificările. Alegeți „întreaga pagină” pentru a actualiza fonturile pe întregul aspect. Alegeți „Elementul actual și copiii” pentru a limita modificările la acea secțiune specifică și orice altceva cuibărit în ea.

De asemenea, puteți viza containerele părinților sau zonele de pagini specifice.

Găsiți și înlocuiți tipul de element vă ajută să vă concentrați pe module specifice. Selectați „Toate elementele” pentru un swap complet de fonturi sau alegeți „Module” pentru a omite containerele și elementele structurale. Puteți obține și mai specific vizând doar anumite tipuri de module.

Evitați înlocuirile accidentale

Opțiunea „Înlocuiți doar câmpurile identice” împiedică modificările nedorite. Porniți acest lucru atunci când doriți să înlocuiți fonturile fără a afecta alte setări care ar putea partaja aceeași valoare.

Acest lucru vă menține raza de frontieră la 10px chiar și atunci când înlocuiți un font care se numește „10px” sau ceva similar.

Fără această setare, găsiți și înlocuiți căutarea valorii dvs. țintă peste tot. Cu acesta activat, sistemul schimbă doar câmpurile de fonturi reale, lăsând alte setări de proiectare singure.

4. Lucrați prin sistemul dvs. de fonturi

Veți avea nevoie de operațiuni separate pentru descoperire și înlocuire pentru diferite greutăți și stiluri de font. Site -ul dvs. ar putea folosi aceeași familie de fonturi în greutăți obișnuite și îndrăznețe. Gestionați fiecare variație individual, înlocuindu -le cu variabilele de proiectare corespunzătoare pe care le -ați creat mai devreme.

De fiecare dată, procesul este același: faceți clic dreapta pe câmpul de font, setați valoarea de înlocuire pe o variabilă de proiectare, alegeți sfera de aplicare și aplicați modificările. Repetați acest lucru pentru fiecare font static care are nevoie de actualizare.

5. Creați presetări cu variabilele dvs.

Accesați orice modul de text și navigați la fila Design. Localizați tipografia și faceți clic pe pictograma presetată. Selectați variabila fontului de titlu din meniul derulant. Aplicați variabila numărul H1 pentru dimensionare.

Configurați înălțimea liniei și valorile de distanțare. Denumiți presetarea „titlu principal” și salvați -l. Faceți clic pe pictograma STAR pentru a seta acest lucru ca implicit. Noile module de text vor adopta automat aceste setări. Toate modulele existente cu aceeași etichetă de titlu și niciun stil nu vor moșteni și aceste setări.

Puteți repeta acest proces pentru fiecare nivel de rubrică. Fiecare presetare menține consecvență în timp ce îndeplinește scopuri diferite.

Aceste presetări de tipografie funcționează cu orice modul care conține câmpuri de text. Modulele blurb, conținutul acordeonului, mărturii și formularele de contact acceptă toate aceleași presetări. Această compatibilitate transversală elimină sarcinile de stil repetitive.

Presetări de grupuri de opțiuni vizează doar categorii de stil specifice. Aplicați o rubrică presetată pe textul butonului, păstrând intact fundalul butonului și setările de frontieră.

6. Extindeți -vă noile variabile pe toate elementele

Faceți clic dreapta pe orice element folosind noile dvs. variabile. Selectați „Extindeți atributele” din meniu. Configurați elementul sursă ca modul actualizat recent.

Setați locația la „întreaga pagină” pentru actualizări complete. În conformitate cu tipurile de atribute, alegeți „stiluri” pentru a vă concentra doar pe elemente de design.

Activați „Înlocuiți doar câmpurile identice” pentru a preveni modificările nedorite la căptușeală, marje sau alte valori numerice care ar putea să se potrivească dimensiunilor fontului. Selectați „Toate elementele” pentru a actualiza module și containere sau alegeți „Module” pentru a viza elemente de conținut în mod specific.

Procesați pagini complexe în secțiuni mai mici, mai degrabă decât actualizări la nivel de site. Selectați „Secțiunea curentă” pentru a limita modificările la o zonă simultan. Începeți cu secțiunea dvs. de antet. Aplicați extensii variabile, revizuiți rezultatele și treceți la principalele zone de conținut. Completați ultima secțiune de subsol.

Această abordare metodică identifică formatărea conflictelor din timp și controlează procesul de actualizare.

Divi 5 facilitează tipografia

Ai trecut de la afișajul Playfair la ceva modern și să actualizezi majoritatea rubricii, dar ratează această mărturie de la pagina a treia. Site -ul dvs. părea mai bine săptămâni întregi.

Variabilele Divi 5 simplifică tipografia site -ului dvs. web. Schimbați variabila de rubrică din pictograma bazei de date din bara laterală și fiecare modul de text se actualizează instantaneu. Este inclusă subsolul formularului de contact.

Data viitoare când veți rebrand, veți actualiza două variabile în loc să faceți clic pe cincizeci de module. Instrumentul Găsiți și înlocuiți surprinde ceea ce în mod normal vă lipsește. Tipografia ta rămâne strânsă, iar weekendurile tale rămân ale tale.