Cum se înlocuiește stilurile statice cu variabilele de design Divi 5

Dacă ați modificat vreodată culori, căptușeală sau fonturi un modul la un moment dat, probabil că ați realizat cât de lent, predispus la erori și plictisitor pot fi schimbările de stil manual.

Divi 5 introduce o modalitate mai inteligentă de a -l gestiona. Cu variabile de design și găsiți și înlocuiți, puteți actualiza stilurile statice pe aspectul dvs. și puteți construi un sistem de design reutilizabil în câteva minute. Să vedem cum.

Divi 5 este gata să fie utilizat pe site -uri web noi.

Ce sunt „stiluri statice”?

Când importați un aspect Divi sau utilizați o secțiune pre-proiectată, totul, cum ar fi fonturi, culori, distanțare și granițe, vine deja setat. Dacă un aspect nu utilizează presetări, veți observa că aceste valori sunt aplicate la nivel de element.

O rubrică ar putea avea dimensiunea fontului său tastat manual, un buton ar putea utiliza un cod de culoare specific, iar căptușeala sau distanțarea ar putea utiliza numere fixe. Aceste valori aplicate direct se numesc stiluri statice.

Și în timp ce par inofensivi la început, pot deveni rapid o problemă atunci când doriți să faceți schimbări. Problema cu stilurile statice este că necesită mai mult timp pentru a gestiona. Dacă doriți să schimbați culoarea tuturor butoanelor sau să reglați distanțarea pe secțiuni, trebuie să editați fiecare manual. Este lent și frustrant.

Acum, imaginați -vă că actualizați manual o marcă completă a site -ului web sau lucrați la un aspect complex plin de stiluri repetate. Mulți designeri au împărtășit cât de frustrant poate fi acest proces. Dar de ani de zile, nu a existat o modalitate fiabilă de a -l repara. De aceea am construit o soluție mai inteligentă în Divi 5.

Cum Divi 5 face înlocuirea stilurilor statice ușoare

Unul dintre obiectivele noastre cu DIVI 5 este de a face fluxul de lucru de proiectare mai rapid și mai puțin repetitiv. Pentru a ajuta acest lucru, am adăugat două caracteristici puternice: variabile de design , care vă permit să vă centralizați stilurile și să găsiți și să înlocuiți , ceea ce vă permite să le actualizați instantaneu pe aspectul dvs. Să le înțelegem în detaliu.

Variabilele de proiectare vă permit să vă definiți stilurile globale

Cu Divi 5, puteți să vă construiți în sfârșit propriul cadru de design și să îl utilizați pentru a modifica rapid stilurile de marcă.

În loc să aplici manual aceeași culoare, font sau distanțare pe fiecare modul, Divi 5 vă permite acum să salvați aceste valori ca variabile de proiectare. Acestea sunt valori reutilizabile pe care le puteți face referire pe întregul site pentru a vă face designul mai consistent și mai ușor de întreținut.

În interiorul constructorului vizual, managerul variabil vă permite să creați și să organizați variabile în șase tipuri diferite: culori, fonturi, numere (cum ar fi distanțare sau dimensiuni), text, imagini și link -uri.

Puteți salva fiecare variabilă cu un nume clar, cum ar fi căptușirea secțiunii, astfel încât găsirea și reutilizarea acesteia este mai ușoară. Spre deosebire de scrierea variabilelor CSS manual, interfața Divi vă permite să gestionați aceste valori vizual fără a atinge codul.

Aplicarea acestor variabile salvate este, de asemenea, mai ușoară. În timp ce personalizați un modul, accesați setări, localizați pictograma managerului variabil și alegeți variabila dvs. din listă.

Veți vedea avantajul real când este timpul să faceți schimbări. Să zicem că doriți să schimbați căptușeala de pretutindeni. În loc să editați zeci de module, actualizați doar valorile o dată în managerul variabil și se actualizează pe site -ul dvs.

Observați valorile care se schimbă în timp real în câmpurile de setare aplicate? Aceasta este puterea unui sistem de proiectare globală.

Și acest lucru nu se limitează la stiluri de design. Pentru a gestiona în mod eficient conținutul repetat, puteți salva, de asemenea, text, imagini și link -uri, cum ar fi o adresă, e -mail sau etichetă de companie, ca variabilă de conținut. Nu mai este nevoie să copiați paste, ci doar să-l introduceți ca un conținut dinamic și va rămâne consecvent pe site-ul dvs.

Aflați totul despre variabilele de design

Găsiți și înlocuiți vă permite să treceți de la stiluri statice la globale

Funcția Find and Repling's Find și înlocuire vă permite să actualizați rapid valorile stilului pe aspectul dvs. fără a edita fiecare modul individual. Este conceput pentru a vă ajuta să schimbați valorile statice, cum ar fi culorile, fonturile, distanțarea sau orice altă setare care se repetă pe secțiuni dintr -un singur punct de plecare cu doar câteva clicuri.

Pentru a-l folosi, faceți clic dreapta pe orice câmp de stil din interiorul constructorului vizual sau treceți peste și faceți clic pe cele trei puncte. Veți vedea opțiunea Găsiți și înlocuiți în derulare.

Aceasta deschide un nou panou de descoperire și înlocuire . Aici, puteți face modificările dorite și le puteți aplica în vrac.

• (1.) Element sursă: setarea pe care o vizați (de exemplu, text, culoare sau distanțare). Deschideți meniul derulant și veți observa că este de fapt ierarhia straturilor.
• (2.) Găsiți valoarea: valoarea exactă pe care doriți să o înlocuiți, cum ar fi un font specific sau un cod de culoare.
• (3.) Înlocuiți valoarea: noua valoare sau variabila pe care doriți să o aplicați în schimb.
• (4.) Găsiți și înlocuiți în locație: alegeți unde să aplicați modificarea. Acest modul, secțiunea sau întreaga pagină.
• (5.) Găsiți și înlocuiți în tipul de element: decideți dacă modificarea ar trebui să se aplice tuturor elementelor sau numai tipurilor de modul specifice.
• (6.) Înlocuiți câmpurile identice: atunci când sunt activate, înlocuirile se întâmplă numai dacă atât setarea, cât și valoarea se potrivesc exact.

Iată cum funcționează. Să zicem că doriți să schimbați fontul de rubrică utilizat pe toată pagina. În loc să mergem modul după modul, vom folosi panoul Find and Replace.

Când îl deschideți din setările unui titlu, elementul sursă este selectat automat, astfel încât nu trebuie să-l alegeți întotdeauna manual.

(Puteți, de asemenea, să faceți clic pe diferite elemente, iar opțiunile panoului se vor regla automat.)

În valoarea Find, introduceți valoarea care trebuie înlocuită. Pentru exemplul nostru, este Medula One, actualul font aplicat. În valoare de înlocuire , alegeți noua valoare pe care doriți să o aplicați. Să selectăm ACLONICA.

Apoi selectați dacă doriți să actualizați toate instanțele din întreaga pagină sau doar în coloana, rândul sau secțiunea din găsire și înlocuiți în locație. Păstrați descoperirea și înlocuiți -vă în tipul de element ca toate elementele , deoarece dorim să vizăm toate modulele de rubrică.

Și asta este. Trebuie doar să descoperiți și să înlocuiți, iar în câteva secunde, 20 de instanțe de rubrică sunt actualizate. Observați textul corpului și fonturile butonului rămân neatinse? Asta pentru că folosesc valori diferite. Și atât de precis este sistemul.

Divi aplică doar modificări în cazul în care găsește o potrivire exactă. Acest lucru înseamnă că puteți curăța stilurile statice cu încredere, fără a încurca modele care nu au nevoie de schimbare. Dar cum se potrivesc variabilele de proiectare aici?

Sunt ca glazura de pe tort. Puteți utiliza, de asemenea, variabile de proiectare în câmpul de înlocuire . Treceți peste ea, faceți clic pe pictograma Manager Variable și introduceți o variabilă salvată.

Acest lucru vă leagă stilurile de un sistem reutilizabil la nivel mondial, care este mult mai ușor și mai eficient de actualizat. Acesta este exact modul în care vom înlocui toate valorile noastre statice cu variabile de design pentru site-ul nostru web pentru viitorul nostru pentru actualizări mai ușoare.

Aflați totul despre descoperire și înlocuire

Ambele caracteristici (și multe altele) sunt disponibile în Divi 5. Constructorul a fost reimaginat pentru a oferi performanțe mai rapide, fluxuri de lucru mai inteligente și mai mult control. Sincer, citirea despre ele este interesantă, dar veți observa schimbarea reală atunci când veți experimenta aceste caracteristici pentru voi.

Cum se înlocuiește stilurile statice cu variabile salvate

Acum că știți ce instrumente vom folosi, este timpul să le vedem în acțiune.

Pentru a vă parcurge procesul, am importat aspectul paginii de aterizare a magazinului de plăcintă. Detaliile de design ale acestui aspect, cum ar fi fonturi, culori și distanțare, au fost aplicate ca stiluri statice. Modul tradițional necesită să -l personalizați modulul după modul. Dar în acest tutorial, le vom înlocui pas cu pas folosind fluxul de lucru pe care tocmai l -am acoperit.

Dar înainte de a vă scufunda, luați un moment pentru a vă scana aspectul pentru modele. Căutați stiluri repetate, cum ar fi aceeași culoare folosită pe butoane, dimensiuni similare de fonturi în titluri, distanțare constantă între secțiuni sau setări de frontieră identice. Aceste valori repetate sunt cei mai buni candidați pentru variabile de proiectare, mai ales dacă este posibil să le schimbați mai târziu.

1. Salvați -vă variabilele de proiectare

După ce am analizat aspectul magazinului de plăcintă, am identificat câteva valori care apar constant pe pagină și aș dori să le actualizez cu stilurile mele preferate. Acestea includ:

• Lățimea frontierei de rând
• Umplutură cu buton
• Text de îndreptare
• Text corporal
• Culoarea textului corpului

În acest moment, sunt aplicate ca stiluri statice. Deci, în loc să repet aceleași setări manual, le voi transforma în variabile de proiectare. Acest lucru îmi oferă un cadru simplu, reutilizabil, pentru a actualiza stilurile de pagini cu doar câteva clicuri.

Să începem cu lățimea de frontieră pe rânduri. Pentru a crea și salva o variabilă, deschideți variabila Manager și alegeți tipul. Pentru lățimea de frontieră a unui rând, voi alege variabila numărului . În continuare, numiți -vă variabila și alocați -i o valoare. Faceți clic pe Salvați variabilele.

Odată salvat, această variabilă este gata de a fi reutilizată cu un clic. Va apărea oriunde poate fi setată lățimea frontierei. Voi urma același proces pentru textul de rubrică, fontul corpului, culoarea textului și umplutura cu buton. Aceste variabile salvate acum constituie fundamentul limbajului de design al mayout -ului meu. Faci la fel.

În acest fel, dacă decideți să modificați distanța butonului sau să schimbați fontul mai târziu, nu va trebui să actualizați fiecare modul unul câte unul. Doar actualizați variabila, iar restul se va actualiza.

2. Folosiți Găsiți și înlocuiți pentru a schimba stilurile statice la variabile

Cu variabilele noastre de proiectare gata, următorul pas este să înlocuim valorile statice pe aspectul folosind descoperirea și înlocuirea. Să începem cu căptușeala butonului.

În momentul de față, fiecare buton folosește căptușeală introdusă manual: 6px pentru sus și de jos și 1px pentru stânga și dreapta. Pentru a aduce consecvența și a facilita actualizările, am creat două variabile:

• Buton-t = 12px pentru căptușeală de sus și de jos.
• Buton-l = 32px pentru căptușeala stânga și dreapta.

Pentru a aplica acestea, voi deschide setările oricărui buton, accesați proiectarea> distanțare> Padding , faceți clic dreapta pe valoarea de căptușeală și alegeți Găsiți și înlocuiți din opțiuni.

În panoul Find and Replace, voi înlocui valoarea statică existentă cu variabila salvată de la Variable Manager.

După ce faceți clic pe Găsire și înlocuire , toate cele cinci instanțe de buton din actualizarea paginii se actualizează instantaneu pentru a utiliza noile valori de padding.

Puteți urma aceiași pași pentru orice alte stiluri statice pe care le -am identificat anterior. Utilizați Find and Reploy pentru a schimba fiecare cu variabilele salvate și veți ajunge la un aspect complet conectat la sistemul dvs. de proiectare globală.

3. Convertiți -vă stilurile preferate în presetări (opțional)

Acest pas este opțional pentru sfera de aplicare a acestui articol, dar este o modalitate puternică de a vă extinde sistemul de proiectare.

După ce ați înlocuit stilurile statice cu variabile, puteți salva aceste module ca presetări de grupuri de opțiuni. De exemplu, după ce am atribuit o variabilă salvată pentru lățimea frontierei într -un rând, am salvat acel rând ca presetare de frontieră.

Utilizarea variabilelor din presetări înseamnă orice actualizări viitoare ale sistemului dvs. de proiectare, cum ar fi schimbarea valorii unei variabile, se vor reflecta automat pe toate modulele care utilizează acea presetare. Nu este nevoie să aplicați sau să actualizați nimic manual.

Așadar, nu numai că am actualizat întreaga pagină cu un brand nou în doar câteva clicuri, dar am creat și un sistem flexibil care face ca actualizările viitoare să fie mai rapide, mai ușoare și complet conectate. Cum funcționează asta într -un aspect real? E timpul să -l văd în acțiune.

Actualizarea stilurilor de pagină este mai ușoară ca niciodată

Motivul pentru care trecem de la stiluri statice la variabile de proiectare este simplu: fac actualizări mai ușoare. Cu variabile de design în loc, editarea aspectului dvs. devine incredibil de simplă.

Dacă doriți vreodată să schimbați fontul de rubrică pe site -ul dvs. web, nu trebuie să editați fiecare modul unul câte unul. Deschideți doar variabila Manager, actualizați valoarea fontului pe care ați salvat -o mai devreme, iar modificarea se aplică peste tot acea variabilă este utilizată.

Presetările grupului dvs. de opțiuni se vor actualiza automat dacă utilizează variabile de proiectare. Acest lucru vă menține stilurile conectate, astfel încât nu trebuie să repetați aceleași modificări pe diferite module sau pagini.

Când am personalizat aspectul magazinului de plăcinte mai devreme, nu am ajustat manual fiecare buton sau titlu. Pur și simplu mi -am editat variabilele salvate. Fontul, umplutura și culorile pe care le -am definit anterior aplicate automat pe pagină. Aspectul a urmat sistemul pe care l -am construit deja.

Sigur, reglarea căptușelii sau schimbarea unei culori într -un singur modul nu este greu. Dar când actualizați zeci de stiluri pe un întreg site, diferența este masivă. Nu este doar mai rapid, este mai curat, mai fiabil și mult mai puțin predispus la eroare.

Aceasta este valoarea reală a trecerii la variabile: întregul dvs. design devine mai ușor de gestionat. Și când clientul dvs. solicită o schimbare rapidă de branding luna viitoare? Vei fi făcut înainte de a -și termina cafeaua.

Faceți ușor modificările în vrac cu descoperire și înlocuiți

Nu trebuie să începeți de la zero de fiecare dată când se schimbă designul. Cu sistemul Divi 5 în vigoare, actualizările se simt mai puțin ca o corvoadă și mai mult ca un simplu pas înainte.

Acest flux de lucru nu este doar util în timpul configurației. Este ceea ce facilitează actualizările viitoare. Indiferent dacă clientul dvs. solicită un font nou sau doriți să testați o culoare diferită de marcă, puteți face schimbarea o dată și să o vedeți reflectată peste tot.

Divi 5 este conceput pentru a susține modul în care oamenii reali proiectează site -uri web. Și acum, sistemul dvs. de proiectare poate fi la fel de flexibil ca și ideile dvs.