Cum să schimbați rapid stilurile de pachet de aspect cu descoperirea și înlocuirea

Actualizarea designului unui pachet de aspect complet sună simplu până când vă dați seama că trebuie să schimbați aceleași stiluri pe cinci sau șase pagini diferite. Deoarece aceste stiluri sunt aplicate ca valori statice, chiar și o mică actualizare, cum ar fi schimbarea fontului sau reglarea paddingului secțiunii, devine consumatoare de timp atunci când se termină pagina cu pagină.

Dar dacă puteți actualiza toate acele stiluri repetate în doar câteva clicuri? Exact asta este ceea ce găsește și înlocui în Divi 5. Indiferent dacă schimbați fonturi, înlocuiți culorile sau reglați distanțarea, această caracteristică vă ajută să faceți modificări la nivel instantaneu. Vă vom arăta cum să -l folosiți pentru a curăța și a restabili un întreg pachet de aspect.

Ce este găsit și înlocuit în Divi 5

Găsirea și înlocuirea este o caracteristică din DIVI 5 care vă permite să actualizați rapid valorile de stil repetate în aspectul dvs. Fie că este vorba de un font, un cod de culoare, o căptușeală sau chiar un efect de umbră, acum puteți schimba această valoare o dată și o aplicați pe mai multe elemente.

Deci, cum funcționează de fapt acest lucru? Începe cu orice modul din Visual Builder. Treceți peste un câmp de stil, cum ar fi culoarea textului sau dimensiunea fontului și veți vedea o pictogramă cu trei puncte. Faceți clic pe acesta (sau faceți clic dreapta pe câmp) și selectați Găsiți și înlocuiți .

Aceasta deschide un panou în care definiți ce valoare să înlocuiți, care ar trebui să fie noua valoare și unde să aplicați modificarea. Puteți să-l păstrați concentrat doar pe acel modul, să-l extindeți pe întreaga secțiune sau să mergeți la nivel de aspect pe toată pagina.

După ce experimentați acest flux de lucru, veți înțelege de ce este un instrument atât de util. În loc să vânați prin zeci de module pentru a schimba aceeași culoare sau font, faceți o actualizare vizată și urmăriți -o să se ofere pe întregul aspect în câteva secunde. Dar pentru a debloca cu adevărat și înlocuirea potențialului lui, trebuie să vedeți cum funcționează cu variabile de proiectare, care schimbă totul.

Cum găsirea și înlocuirea ajută la actualizarea stilurilor de aspect mai rapid

Vom parcurge două scenarii: mai întâi, o descoperire de bază și o înlocuire, apoi aceeași sarcină folosind variabile de proiectare (aceasta este arma secretă).

Utilizarea Find and Replace in Divi 5

Procesul este simplu: declanșați -l din orice câmp de stil, alegeți ce să înlocuiți și aplicați schimbarea pe mai multe module. Să ne plimbăm prin el cu un adevărat exemplu.

Spuneți că doriți să măriți dimensiunea fontului din toate titlurile de pagină. Începeți făcând clic pe orice modul de titlu din interiorul constructorului vizual. Accesați Setări> Proiectare> Text Titlu> Text Titlu H1 Dimensiunea fontului. Faceți clic dreapta sau treceți-vă pentru a găsi opțiunea Find și înlocuiți printre altele.

Aceasta deschide panoul Find and Repling cu multe opțiuni:

• (1) Element sursă: Aceasta definește setarea pe care o vizați, cum ar fi dimensiunea textului, culoarea sau căptușeala. Este selectat automat pe baza locului în care ați deschis panoul.
• (2) Găsiți valoarea: valoarea curentă utilizată pe aspectul dvs. Aceasta ar putea fi o dimensiune a fontului precum 30px, un cod de culoare precum #000000 sau orice altă setare de proiectare. Acest lucru este adăugat automat.
• (3) Înlocuiți valoarea: noua valoare pe care doriți să o aplicați. Divi caută valoarea potrivită și o înlocuiește cu acesta.
• (4) Găsiți și înlocuiți în locație: alegeți unde trebuie aplicată modificarea. Puteți să -l limitați la un singur modul, secțiunea sa sau întreaga pagină.
• (5) Găsiți și înlocuiți în tipul de element: decideți ce module ar trebui să afecteze schimbarea. Îl puteți aplica pe toate modulele sau numai tipuri specifice, cum ar fi butoane, text sau neclarițe.
• (6) Înlocuiți doar câmpuri identice: porniți acest lucru pentru a actualiza doar câmpurile care se potrivesc exact cu valoarea de găsire. Acest lucru ajută la evitarea modificărilor accidentale ale elementelor fără legătură.

De exemplu, înlocuim dimensiunea fontului de la 30px la o clemă fluidă (20px, 4VW, 50px). Am selectat întreaga pagină și toate elementele, deoarece vrem să actualizăm toate rubricile de pe pagină.

Faceți clic pe butonul Găsiți și înlocuiți și urmăriți ce se întâmplă. Toate rubricile cu dimensiunea fontului 30px au acum o valoare de clemă fluidă ().

Celelalte rubrici au rămas neschimbate, deoarece Divi actualizează doar valori care se potrivesc exact în domeniul de aplicare selectat. Nu este necesară o editare manuală și nici măcar modificări accidentale ale elementelor fără legătură. Această precizie o face perfectă pentru curățarea stilurilor implicite în pachetele de aspect.

Aflați totul despre descoperirea și înlocuirea lui Divi

Utilizarea variabilelor de proiectare în Găsirea și înlocuirea

Găsirea și înlocuirea devine și mai puternică atunci când este asociată cu variabile de design. În loc să înlocuiți o valoare statică cu o altă valoare statică, o puteți înlocui cu o variabilă salvată din managerul variabil. Aceasta creează un sistem de proiectare consistent, ușor de actualizat mai târziu.

Să continuăm cu același exemplu, actualizând toate dimensiunile fontului de rubrică. Dar de această dată, în loc să înlocuim 30px cu o valoare directă a clemei, o vom înlocui cu o variabilă numită dimensiunea fontului H3.

În primul rând, creați variabila. Deschideți managerul variabil din bara laterală din stânga și mergeți la coloana de numere . Denumiți variabila dvs., alocați o valoare și salvați.

Acest lucru face ca variabila să fie disponibilă pe toate câmpurile de mărime a fontului. Acum vine magia: îl puteți folosi direct în panoul Find and Replace pentru a atribui variabila salvată la toate dimensiunile fontului de titlu simultan.

Deschideți panoul Găsiți și înlocuiți ca înainte. În câmpul de înlocuire Value , treceți peste intrare și faceți clic pe pictograma Manager Variable . Selectați variabila salvată, dimensiunea fontului H3 și continuați cu aceleași setări.

Faceți clic pe Găsiți și înlocuiți pentru a aplica modificarea. Toate rubricile care utilizează 30px vor face referire acum la variabila de dimensiune a fontului H3 în loc de un număr fix.

Iată unde devine interesant. Trebuie să ajustați această dimensiune a fontului mai târziu? Accesați managerul variabil , deschideți variabila de dimensiune a fontului H3 și schimbați valoarea. Actualizați clema la CLAMP (24px, 5VW, 60px) și la fiecare rubrică folosind automat această variabilă.

Nu este necesar să repetați Găsirea și înlocuirea. Cu o singură actualizare, aspectul dvs. se ajustează peste tot, este utilizată variabila.

Această combinație de variabile de găsire și înlocuire și proiectare face ca actualizarea pachetelor întregi de aspect atât de eficiente și vom urma acest proces în acest tutorial. Veți defini o singură dată variabilele de proiectare, apoi utilizați Find și înlocuiți pentru a trece de la valorile statice la variabile salvate pe toate paginile. După aceea, actualizarea devine fără efort.

Aflați totul despre variabilele de design ale Divi

Sunteți gata să puneți acest lucru în practică? Veți avea nevoie de Divi 5 pentru a utiliza atât variabilele de găsire și înlocuire și proiectare. Constructorul a fost reconstruit complet pentru performanțe mai rapide și fluxuri de lucru mai inteligente.

Cum se înlocuiește stilurile pe un pachet de aspect

Acum că știți cum să găsiți și să înlocuiți funcționează și cum să o asociați cu variabile de design, să o punem în acțiune pe un pachet de aspect real. Pentru exemplul nostru, vom importa sistemul de management al învățării, care include mai multe pagini precum acasă, despre, contact, aterizarea cursului și prețurile.

Fiecare pagină folosește aceleași fonturi, culori și distanțare, dar toate ca valori statice. În tutorialul de mai jos, le vom actualiza pe toate paginile, le vom transforma în variabile și vom conecta totul la un sistem de proiectare centrală.

1. Auditați stilurile de design ale aspectului dvs.

Înainte de a începe să înlocuiți orice, luați câteva minute pentru a vă examina pachetul de aspect. Deschideți fiecare pagină și enumerați rapid toate stilurile de design care se repetă, cum ar fi dimensiunile fontului, culorile butonului, distanțarea textului, padding -ul secțiunii și stilurile de bord. Iată ce am găsit după ce am examinat aspectul LMS:

• Mărimi de font: 30px este utilizat pentru toate rubricile H3 și 48px pentru H2S pe mai multe pagini
• Fonturi: Poppins este utilizat în mod constant pentru toate rubricile
• Butonul primar: culoarea de fundal este #4449E0 cu text alb
• Padding: Majoritatea secțiunilor folosesc 60px superior și inferior
• Pictograme blurb: dimensiunea pictogramei este setată la 24px
• Blurb Borders: Nu se aplică nicio frontieră la modulele Blurb
• Fundaluri de secțiune: culoarea verde #47BE68 apare pe secțiunea de subsoluri din aproape fiecare pagină

Toate acestea sunt introduse manual ca valori statice în cadrul fiecărui modul. De exemplu, modulul Blurb folosește #4449E0 pentru culoarea pictogramei și o lățime de 24px.

După ce identificați stiluri repetate ca acestea, veți ști exact ce să vă transformați în variabile de design.

Acest pas de audit creează fundamentul pentru tot ceea ce urmează. Vă ajută să construiți o abordare sistematică care să vă mențină aspectul consecvent și să fie întreținut.

2. Salvați -vă variabilele de proiectare

După ce ați auditat aspectul și ați remarcat stilurile de repetare, următorul pas este crearea de variabile de design ale valorilor preferate. Acest lucru vă permite să transformați stilurile hardcodate în jetoane reutilizabile, făcând aspectul mai ușor de actualizat mai târziu. După ce ne -am salvat toate valorile, le vom înlocui pe cele actuale cu ale noastre.

Crearea unei variabile de culoare

În exemplul anterior, am descoperit că pictogramele Blurb folosesc culoarea #4449E0, dar vreau să o schimb la culoarea mea principală de marcă, #6C012A. Pentru a face acest lucru, voi crea o variabilă de culoare.

Accesați managerul variabil din bara laterală din stânga, apoi deschideți coloana de culoare .

Derulați în jos și faceți clic pe opțiunea + Adăugare Global Color . Denumiți variabila dvs. și introduceți o valoare. Faceți clic pe Salvați variabilele și s -a terminat.

Crearea unei variabile de număr

În continuare, vreau să adaug o bordură de 2px în jurul Blurbs, așa că voi avea nevoie de o variabilă de număr . Procesul este similar, dar într -o coloană diferită. Accesați coloana de număr . Faceți clic pe + Adăugați numărul global, denumiți variabila dvs., alocați o valoare și salvați.

Crearea unei variabile de font

De asemenea, vreau să schimb toate fonturile de rubrică către Askhar, fontul meu de marcă. Aceasta necesită o variabilă de font . Navigați la coloana de font , creați o nouă variabilă, alocați un nume, alegeți un font și salvați.

A terminat. Acest font va fi acum selectabil în toate câmpurile de text cu titlu pe tot parcursul aspectului.

Urmați același proces pentru restul constatărilor dvs. de audit, cum ar fi căptușirea secțiunii, alte dimensiuni de rubrică sau culori suplimentare ale mărcii. Fiecare stil repetat din aspectul dvs. poate (și ar trebui) să devină o variabilă.

În acest fel, nu trebuie să vă amintiți coduri hexagonale, nume de fonturi sau valori specifice. Ei locuiesc în managerul dvs. variabil și vă urmăresc prin module și pagini. Și cel mai bine, puteți utiliza Find și să înlocuiți pentru a le aplica la nivel de aspect, pe care le vom face în continuare.

3. Utilizați Găsirea și înlocuiți -vă pentru a aplica variabile

Iată cea mai interesantă parte pe care am așteptat -o. Cu variabilele noastre salvate, schimbarea stilurilor întregului aspect este rapidă și ușoară. Să vedem cum.

Schimbarea culorilor pictogramelor

În primul rând, să schimbăm culoarea pictogramelor în variabila noastră de culoare primară salvată. Navigați la Setările Blurb> Design> Imagine și pictogramă. Acum, treceți peste opțiunea de culoare pictogramă și faceți clic pe cele trei puncte. Alegeți Find și înlocuiți .

Pe panoul Find and Replace, tot ce trebuie să faceți este să vă plimbați pentru a localiza pictograma Manager Variable și pentru a selecta variabila.

Și exact așa, toate pictogramele au o culoare nouă. Aș fi putut, de asemenea, să o fac altfel, alocând culoarea mărcii mele ca valoare statică în loc să economisesc o variabilă de proiectare, dar am adăugat un pas suplimentar pentru a simplifica actualizările viitoare.

Cum? Imaginează -ți că ai modificat toate paginile de aspect, dar vrei să -ți schimbi culoarea mărcii. Nu este nevoie să vă simțiți copleșiți de revizuirea tuturor paginilor sau de a face modul în modul. Deoarece ați salvat deja o variabilă de design de culoare a mărcii, trebuie doar să schimbați valoarea pentru a o actualiza la nivel de site.

Schimbarea tuturor titlurilor font

În continuare, să schimbăm toate fonturile de rubrică către fontul meu de marcă. Accesați setările oricărui titlu> Proiectare> Text de titlu. Treceți peste fontul de titlu și deschideți Find & Înlocuiți . În coloana de valoare înlocuită , alocați variabila fontului de titlu de marcă .

Actualizarea lățimii de frontieră a tuturor modulelor Blurb

Pentru actualizarea lățimii de frontieră, voi folosi variabila mea de modul Blurb . Procesul rămâne consecvent. Navigați la setările de frontieră ale oricărui Blurb, deschideți Find și înlocuiți, alegeți -vă variabila și aplicați.

După ce ați schimbat toate valorile statice cu variabilele dvs. de proiectare, veți fi legat stilurile de aspect direct la variabile. Aceasta înseamnă că dacă doriți vreodată să schimbați culoarea mărcii, să modificați tipografia sau să reglați lățimile de frontieră, nu va trebui să refaceți înlocuirile. Doar actualizați variabila și toate elementele legate se vor ajusta instantaneu.

Pasul bonus: creați și salvați presetări (opțional)

În timp ce găsiți și înlocuiți și proiectați variabilele vă oferă o bază solidă, există un pas opțional care se bazează și mai mult pe acest sistem. Presetările vă permit să împachetați stiluri complete și să le reutilizați oriunde cu un singur clic.

După ce sunteți mulțumit de variabilele de bază, puteți să -l luați cu un pas mai adânc și să creați presetări pentru un stil mai granular. Acest lucru nu este necesar pentru procesul de bază prin care tocmai am trecut, dar merită să explorăm dacă doriți o eficiență maximă.

Să zicem că doriți să adăugați un efect de umbră la toate neclarițele dvs., așa că ați proiectat stilul de umbră perfect pentru modulul dvs. Blurb. În loc să copiați manual acest stil de fiecare dată, îl puteți salva ca presetare.

Făcut. Această presetare apare acum în derularea presetării fiecărui modul. Îl puteți aplica instantaneu la alte module; Nu este nevoie să refaceți distanțarea, marginile, umbrele sau orice alte modificări de design.

Ceea ce face presetările și mai puternice este flexibilitatea lor. Puteți crea grupuri presetate pentru diferite combinații de setări pentru o mai bună optimizare a fluxului de lucru și control granular. De exemplu, s -ar putea să aveți un grup presetat pentru stiluri de butoane cu variații precum lumina primară, primară și conturul de lumină primară, fiecare conținând combinații diferite de fundaluri, granițe și distanțare.

În acest fel, mențineți consecvența în timp ce aveți opțiuni pentru diferite contexte. Presetările sunt utile în special atunci când aspectul dvs. are 10+ module folosind același stil. În loc să vă bazați pe memorie sau modificări manuale, standardizați totul în avans.

Aflați totul despre presetările grupului de opțiuni Divi

După aplicarea tuturor variabilelor de design salvate, iată cum arată versiunile anterioare și după:

4. Aplicați același proces în alte pagini

Odată ce variabilele și presetările de proiectare sunt configurate, actualizarea restului pachetului de aspect devine mult mai rapid.

Luați pagina de destinație a cursului, de exemplu. Veți vedea aceleași valori statice folosite aici, fonturi de îndreptare, culori butoane, borduri blurb, culori pictograme și multe altele. Din nou, în loc să reglați manual fiecare setare, deschideți modulul relevant, declanșați găsiți și înlocuiți și alocați variabila de proiectare potrivită.

Repetați acest proces pentru fiecare stil repetat în toate paginile dvs. După ce ați terminat, întregul dvs. pachet de aspect va fi conectat la variabile și presetări, ceea ce face ca modificările viitoare să fie aproape fără efort.

Pagina de destinație actualizată a cursului folosind variabilele Divi Find and Repling and Design's Find

Faceți modificări la nivel de aspect în câteva secunde cu descoperirea și înlocuiți-vă

Configurarea variabilelor de proiectare și învățarea Găsirea și înlocuirea în Divi 5 ar putea dura ceva timp în avans. Dar, după ce ați făcut -o pentru un pachet de aspect, nu veți dori niciodată să vă întoarceți la clic manual prin zeci de module.

Am transformat un întreg pachet de aspect de la valori statice împrăștiate într -un sistem de proiectare conectat. Ceea ce ne -a luat minute cu Find & Repline ar fi luat ore întregi făcând în mod vechi, modul după modul, pagină cu pagină.

Nu este vorba doar de economisirea timpului în acest proiect. Construiți un sistem de proiectare care va face ca fiecare viitor Divi să fie mai rapid și mai consistent.