Cele mai rapide modalități de a actualiza designul paginii dvs. cu Divi 5

Divi 5 introduce o mână de instrumente noi inteligente pentru a vă ajuta să lucrați mai repede și să proiectați mai liber. Dar, cu atâta putere la îndemână, este ușor să te simți nesigur de unde să începi, mai ales atunci când actualizezi un aspect existent.

Probabil că știți deja cum să reglați distanțarea, să reglați culorile și să curățați machete, așa că această postare nu se referă la relația elementelor de bază. Este vorba despre a le face mai repede cu Divi 5. În pașii de mai jos, parcurgem un flux de lucru de actualizare practic pe care îl puteți urma pe orice pagină existentă. Și dacă modificările recente s -au simțit copleșitoare, începeți aici. Vă veți ușura cu claritate și încredere.

8 pași pentru a actualiza designul paginii dvs. cu Divi 5

Pentru acest tutorial, folosim pagina de destinație a Business CV din biblioteca de pachete DIVI Layout.

Abonați -vă la canalul nostru YouTube

Vom parcurge cum să actualizăm pagina folosind noile instrumente ale Divi 5, cum ar fi găsirea și înlocuirea, proiectarea variabilelor și extindem atributele, pentru a accelera fluxul de lucru și a reduce modificările repetitive. Să începem.

1. Optimizați-vă tabloul de bord pentru editare fără distragere

Chiar și întreruperile minore vă pot rupe concentrarea atunci când actualizați un aspect. S -ar putea să sari între secțiuni, să deschizi în mod repetat setările și să pierzi pe locul unde ai plecat. Aceste tipuri de întârzieri se adaugă rapid, în special pe pagini mai lungi sau mai complexe.

Divi 5 ajută la reducerea fricțiunii cu un mediu de editare mai flexibil. Puteți conecta panourile pentru a menține setările cheie vizibile, puteți deschide mai multe module în file și puteți utiliza panoul straturi pentru a naviga la aspectul dvs. fără a derula interminabil. În loc să faceți clic pe și să ieșiți din module, puteți păstra totul deschis și accesibil pe măsură ce vă deplasați.

Panoul de straturi vă oferă o imagine de ansamblu structurală completă a aspectului, astfel încât să puteți sări instantaneu la orice secțiune, rând sau modul doar făcând clic. Este util mai ales pentru a sări pe pagini mari, fără a derula.

Mai devreme, fluxul de lucru a însemnat adesea deschiderea unui modul, salvarea acestuia, derularea din nou, deschiderea următorului și repetarea acelui ciclu. Divi 5 omite toate astea. Puteți deschide mai multe module înapoi în spate; Fiecare rămâne vizibil ca o filă în panoul de editare. Acest lucru face ca compararea setărilor sau comutarea între elemente să fie mai ușoară fără a închide în mod repetat și redeschiderea setărilor elementelor.

S -ar putea să fie nevoie de unele ajustări pentru a se obișnui cu noul flux de lucru. Pe măsură ce panourile se comportă diferit, astfel că trecerea între module nu se va simți a doua natură imediat. Dar dă -i un pic de practică, iar aceste mici modificări încep să se adauge.

Pe măsură ce urmați pașii de mai jos, încercați să lucrați cu panouri în mod diferit, să vă deplasați câteva, să stivați un cuplu în file sau să mențineți panoul straturilor deschise. Vei începe să simți ceea ce funcționează cel mai bine pentru fluxul tău.

2. Setați mai întâi variabilele de design global

Când gestionați un aspect complet, ultimul lucru pe care îl doriți este să vă repetați. Dar exact asta se întâmplă atunci când fiecare stil este setat manual în fiecare modul. S -ar putea să funcționeze la început, dar în timp, pagina dvs. se transformă într -un patchwork de alegeri deconectate. În cele din urmă, ceva este întotdeauna ratat.

Variabilele de proiectare vă ajută să evitați acest lucru. Acestea vă oferă un loc central pentru a vă defini limbajul de proiectare. Definiți valorile reutilizabile pentru fonturi, culori, distanțare, imagini, adrese URL sau legături. Odată aplicate, aceste valori rămân legate de fiecare modul care le folosește.

Iată un exemplu simplu. Spuneți că doriți ca toate rubricile dvs. să folosească fontul Lato. În loc să alegeți Lato în fiecare modul, creați o variabilă de font . Dă -i un nume, selectează Lato și salvează -l. Orice rubrică pe care o legați de acea variabilă va rămâne acum în sincronizare.

Dacă doriți să treceți la un alt font mai târziu, trebuie doar să actualizați variabila. Fiecare modul conectat va reflecta automat schimbarea.

Și acesta este doar un caz de utilizare. Puteți seta, de asemenea, variabile pentru căptușeala constantă a secțiunilor, stilurile de butoane, culorile de fundal sau orice altceva utilizați în mod repetat. Nu trebuie să definiți totul dintr -o dată dacă se simte prea copleșitor. Începeți cu stilurile pe care le știți că veți reutiliza și extindeți -vă sistemul de proiectare de acolo.

3. Înlocuiți valorile statice cu variabile de proiectare

Uneori, machetele au stiluri codate, astfel încât actualizarea lor manual face ca procesul să fie inconsistent. De aceea, înlocuim valorile statice cu variabilele globale pe care tocmai le -am definit.

Nu trebuie să le vânați individual. Instrumentul de găsire și înlocuire al Divi facilitează schimbarea valorilor statice pentru variabile în doar câteva clicuri. Să spunem că titlurile dvs. folosesc toate fonturi selectate manual. Deschideți orice modul de titlu, faceți clic pe câmpul Font și selectați Find și înlocuiți.

În panoul de valori de înlocuire , treceți peste câmp și deschideți managerul variabil . Selectați variabila de font All Titluri și confirmați modificarea.

Veți vedea imediat magia: fiecare instanță a acelui font de -a lungul aspectului este înlocuită imediat. Aceeași metodă funcționează pentru culori, distanțare, stiluri de butoane și orice ați setat o variabilă.

Și nu trebuie să schimbi totul simultan. Începeți mici, alegeți stiluri veți reutiliza cel mai mult, cum ar fi căptușirea secțiunii sau fundalurile butonului și le puteți schimba mai întâi. Pe măsură ce mergeți, aspectul dvs. trece de la un patchwork de modificări manuale la un sistem complet conectat. Și atunci când acest sistem este în vigoare, fiecare schimbare viitoare devine mai ușoară, mai rapidă și mai consistentă în mod implicit.

4. Utilizați extinderea atributelor pentru a aplica actualizări în câteva secunde

Odată ce valorile dvs. globale sunt în vigoare, următorul pas este rafinarea. De multe ori te vei găsi făcând mici modificări în secțiuni individuale și îți dorești să poți transporta aceste modificări la restul aspectului fără a reface lucrarea. Este posibil cu atribute extinse.

Vă permite să copiați instantaneu stiluri, conținut sau presetări dintr -un element și să le aplicați altora. De asemenea, funcționează chiar dacă modulele nu sunt de același tip. De exemplu, dacă ați proiectat o bordură și o umbră personalizată pentru o singură imagine, o puteți utiliza ca referință pentru fiecare imagine din secțiune.

Faceți clic dreapta pe imaginea stilată și alegeți Atributele Extindeți.

Când se deschide panoul Extension, a -l conecta în lateral, deoarece probabil veți reveni la el. În meniuri verticale, setați domeniul de aplicare la secțiunea părinte și tipul elementului la imagine, apoi confirmați.

Acea acțiune aplică actualizarea dvs. la fiecare imagine din acea secțiune, fără a fi nevoie să le atingeți individual.

Și de aici își câștigă cu adevărat locul. Este nevoie de ceea ce ar fi fost o serie de modificări manuale, repetitive și le transformă într -o singură mișcare constantă. Puteți să -l utilizați pentru secțiuni cu mai multe coloane sau module similare, cum ar fi o galerie de imagini sau blocaje. Este cel mai rapid mod de a aduce un sentiment de polonez la designul tău fără a arde timp pe fiecare modul.

5. Salvați modificări reutilizabile ca presetări de grupuri de opțiuni

Pe măsură ce vă rafinați aspectul, probabil că veți modifica distanțarea, granițele sau culorile de fundal pentru a obține lucrurile corecte. În loc să repetați aceste ajustări de fiecare dată, economisiți -le ca presetări de grupuri de opțiuni.

Spuneți că ați personalizat distanțarea, bordura și fundalul unei coloane. Îți place cum arată și vrei să -l refolosești în altă parte. Deschideți setările pentru acea coloană, derulați la grupul de stil pe care l -ați modificat (cum ar fi distanțarea sau bordura) și faceți clic pe pictograma presetată pentru a o salva.

Pentru a aplica presetarea pe alte coloane, faceți clic dreapta pe original și alegeți Extension Atributes> Extindeți presetările de coloane . În panou, setați domeniul de aplicare pe rândul părinte, alegeți coloana ca tip de element și hit extension atribute.

Acea presetare se aplică acum fiecărei coloane din rând într -o singură mișcare. Este util în special pentru machete cu elemente repetate, cum ar fi tabele de prețuri, blurbs, mărturii sau oriunde doriți consistență vizuală fără efortul manual. Și având în vedere că presetările sunt salvate la pachetul de aspect, le veți avea gata de utilizare și în alte pagini.

6. Utilizați Copiere/Lipire pentru modificări rapide

După ce ați extins stilurile la o secțiune sau un rând complet, este posibil să doriți să faceți în continuare modificări mici, vizate. Poate doar o coloană sau un modul are nevoie de un aspect ușor diferit. În loc să extindeți din nou presetările, utilizați funcția de gestionare a atributelor.

De exemplu, dacă ați personalizat granița și umbra unei coloane și doriți ca doar unul sau doi să se potrivească, faceți clic dreapta pe coloana stilată și alegeți Copiați stiluri de articole . Apoi, faceți clic dreapta pe coloana pe care doriți să o actualizați și selectați lipirea stilurilor de articole .

Acest lucru nu va suprascrie alte setări și nu funcționează instantaneu, ceea ce îl face ideal pentru situațiile în care doriți să rămâneți flexibili. Puteți copia și lipi stiluri din aproape orice element și decideți exact ce să copiați, fie că este vorba de distanțare, culori, margini sau alte modificări de design.

Extindeți atributele gestionează modificările în vrac și copiați/lipiți gestionează detaliile. Este perfect pentru a regla bine un aspect care se face mai ales, dar mai are nevoie de câteva atingeri personale.

7. Comutați între punctele de întrerupere personalizate pentru a perfecționa vizualizarea receptivă

Asigurați -vă că aspectul desktop arată excelent pe fiecare dimensiune a ecranului. Punctele de întrerupere personalizabile ale Divi 5 fac acest lucru ușor, permițându -vă să comutați între tabletă, telefon și chiar lățimi de ecran personalizate cu un singur clic. Pictogramele dispozitivului sunt chiar în interiorul constructorului, astfel încât să puteți previzualiza rapid modul în care secțiunile dvs. se comportă pe ecrane mai mici.

Dacă este necesar, puteți defini, de asemenea, propriile puncte de întrerupere pentru mai mult control.

Acesta este momentul perfect pentru a verifica distanțarea, dimensiunile fontului și alinierea imaginii. Durează doar câteva minute, dar vă salvează de la probleme de dispunere mai mari mai târziu, în special pe paginile grele de conținut sau orientate spre conversie. Și nu trebuie să vă schimbați fluxul de lucru. Instrumentele Divi funcționează la fel de lin în vizualizarea receptivă, așa că faceți modificările dvs., previzualizați aspectul și mergeți mai departe.

8. Actualizați -vă variabilele de proiectare pentru a reîmprospăta întregul aspect instantaneu

Mai devreme, am configurat variabilele dvs. de design global și am înlocuit valorile statice folosind Find and Replace. Și acum aspectul dvs. este complet conectat la un sistem de proiectare centralizat.

Variabilele de proiectare fac ca actualizările la nivel de site să fie extrem de ușoare. Să spunem că brandul dvs. își actualizează tipografia sau culoarea principală. În loc să săpați prin fiecare modul pentru a face aceleași modificări în mod repetat, doar actualizați variabila salvată. Acea modificare se aplică instantaneu pe întregul aspect.

Pentru a vedea acest lucru în acțiune, aruncați o privire la această comparație cot la cot. Structura aspectului rămâne aceeași, dar procesul din spatele ei devine dramatic mai simplu și mai rapid.

Acum gândiți -vă la modul în care această scale. Imaginează -ți întregul site web, fiecare pagină și secțiune, construite pe același sistem. Nu vă mai retrageți pașii pentru fiecare schimbare. O singură modificare la o variabilă actualizează totul. Vă gestionați întreaga marcă gestionând valorile prin intermediul managerului variabil.

Acest tip de flexibilitate este exact pentru ce a fost proiectat Divi 5. Nu este vorba doar de modificări mai rapide, ci de reducerea repetării, de a stimula precizia și de a vă oferi mai mult control cu mai puțin efort.

Personalizați -vă fluxul de lucru Divi 5

Până acum, ați văzut cum instrumente precum variabilele de proiectare, extinderea atributelor și presetările grupurilor de opțiuni pot modela modul în care actualizați machete. Dar nu există o singură modalitate de a le folosi.

Acest pas este doar o versiune a procesului. S -ar putea să urmați pașii într -o altă ordine, să săriți câțiva sau să le amestecați în propria rutină. Și asta este complet în regulă, deoarece obiectivul nu este să urmezi o formulă, ci să găsești un ritm care să se simtă natural și să se potrivească așa cum îți place să lucrezi.

Experimentează puțin. Cu cât joci mai mult cu instrumentele, cu atât vei începe să recunoaștem ce funcționează cel mai bine pentru fluxul tău. Dacă lucrurile se simt mai line, actualizările dvs. sunt mai rapide, iar designul dvs. rămâne consecvent, acesta este semnul dvs. că funcționează.

Și dacă vă întrebați dacă aceste instrumente pot păstra pe măsură ce fluxul dvs. de lucru evoluează, pot fi absolut pentru că ...

Divi 5 este proiectat să se adapteze la modul dvs. de lucru

Aceasta este gândirea din spatele fiecărei caracteristici pe care le -am acoperit. Indiferent dacă doriți să definiți fiecare stil în avans sau să faceți modificări pe măsură ce construiți, instrumentele se adaptează la modul în care preferați să lucrați.

Vă puteți mișca rapid sau vă puteți lua timp. Începeți de la o pagină goală sau rafinați un aspect existent. Constructorul nu te forță într -un flux de lucru rigid. Este construit pentru a reduce munca ocupată, pentru a sări editări repetitive și pentru a vă ajuta să vă concentrați pe ceea ce contează de fapt: proiectarea cu claritate, viteză și încredere.

În cele din urmă, este vorba despre construirea unui proces care se simte ca al tău și ține pasul cu tine pe măsură ce proiectele și ideile tale cresc. Sunteți gata să construiți un flux de lucru de proiectare care să se îmbunătățească cu dvs.?