Gestionarea conținutului repetat cu variabilele de design Divi 5

Dacă există un lucru care încetinește construirea site -urilor web, se ocupă de conținut repetat - adrese, date de contact, link -uri cu buton sau misiunea companiei dvs. Conținutul repetat este necesar pentru consecvență, dar poate fi obositor să gestioneze manual.

Variabilele de design Divi 5 ajută la rezolvarea acestui lucru. În loc să copiați și să lipiți același conținut pe pagini, puteți acum să introduceți și să actualizați elemente repetate precum text, link -uri, imagini, fonturi și culori. În această postare, ne vom concentra în mod specific pe tipurile de conținut repetat pe care l -ați putea avea pe site -ul dvs. web și cum îl puteți eficientiza cu variabilele de design Divi 5. Hai să mergem la ea!

Divi 5 este gata să fie utilizat pe site -uri noi, dar nu recomandăm să migrați site -urile existente către Divi 5 încă.

Care sunt variabilele de design în Divi 5?

Variabilele de proiectare din Divi 5 sunt valori reutilizabile pe care le puteți defini o dată și aplicați pe site -ul dvs. în câteva clicuri. De asemenea, puteți edita variabile definite în interiorul managerului variabil pentru a actualiza automat fiecare instanță (unde apar). Puteți crea diferite tipuri de variabile, de la șiruri de text la fonturi, numere și multe altele.

Variabil Manager vă permite să creați, să numiți și să salvați variabile sub fiecare tip, ceea ce le face mai ușor de găsit. Pentru a aplica variabile la proiectele dvs., treceți peste opțiunile de setări pentru a localiza pictograma conținutului dinamic și vor apărea variabilele salvate.

Această mică schimbare vă ajută să optimizați procesul de proiectare web, folosind și gestionând elemente de conținut repetate.

Tipuri de variabile de proiectare

Divi 5 vă permite să definiți variabile de proiectare pentru șase tipuri diferite. Fiecare servește un scop diferit:

• Variabile de text: șiruri de text simplu reutilizabile. Puteți defini variabile de text precum numele companiei, numerele de telefon, liniile de etichetă, copia butonului etc.
• Variabile de font: facilitează tipografia consecventă. De exemplu, definiți familia de fonturi pentru rubrica (H1 la H6) și textul corpului.
• Variabile de număr: standardizați dimensiuni precum căptușirea, marjele și înălțimea liniei. De exemplu, definiți și aplicați o setare de margine a căptușelii la toate secțiunile dvs.
• Variabile de culoare: versiunea modernă, modernizată a culorilor globale pentru consistența la nivel de site.
• Variabile de legătură: Definiți adresele URL utilizate frecvent, cum ar fi legăturile sociale, butoanele sau paginile legale.
• Variabile de imagine: salvați imagini comune, cum ar fi logo -ul companiei dvs., motive de fundal, imagini de produs etc., pentru a le reutiliza cu ușurință.

Aflați totul despre variabilele de design

Cum se creează și se utilizează variabile de proiectare

Construim Divi 5 de la sol pentru a face designul web accesibil chiar și pentru începători. Fiecare caracteristică este ușor de utilizat, iar variabilele de proiectare nu sunt diferite. Să parcurgem rapid etapele practice implicate în configurarea variabilelor de proiectare.

Crearea unei noi variabile

În interiorul Divi Builder, accesați Variable Manager făcând clic pe pictograma DataStack (pictograma cu trei straturi din bara de instrumente Builder).

Va apărea o fereastră care include cele șase tipuri de variabile descrise mai sus. Alegeți -l pe cel pe care doriți să îl creați. Pentru exemplul nostru, vă vom arăta cum să salvați adresa companiei mele ca o variabilă de text global, așa că vom alege opțiunea Variabilă de text .

Faceți clic pe Adăugare șir global pentru a adăuga o nouă variabilă de text.

Aici, vom numi și vom adăuga un șir de text asociat cu acea valoare variabilă a textului. Mai întâi, numiți variabila de text și apoi atribuiți o valoare șir.

După ce ați atribuit o valoare și șir adecvată a numelui dat, faceți clic pe Salvați variabilele pentru a salva variabila de text. Asigurați -vă că numele șirului dvs. este unic.

Și asta este! Ați creat o variabilă de text global care va fi acum disponibilă pe toate paginile site -ului dvs. web. Să vedem cât de ușor este să aplici această variabilă.

Aplicarea unei variabile

Să zicem că vreau să schimb adresa din secțiunea mea de subsol.

Pentru a aplica variabila de text, faceți clic pe elementul pe care doriți să îl modificați - în cazul nostru, adresa. Deoarece este variabila de text, accesați conținutul din panoul de setări și treceți peste corp pentru a localiza pictograma conținutului dinamic.

După ce faceți clic, în partea de sus a listei vor apărea toate variabilele salvate (șirurile globale în cazul variabilelor text).

Ne -am salvat adresa ca adresă. Pentru a aplica variabila de adresă , faceți clic pe ea.

Și asta este. Cu adresa companiei salvate ca variabilă de text, o pot introduce cu ușurință în orice pagină cu doar câteva clicuri.

Tipuri comune de conținut repetat pe site -uri web

Pentru a vă oferi o privire asupra a ceea ce este posibil cu variabilele de design, am compilat o listă cu toate elementele de conținut repetate pe care nu mai trebuie să le creați sau să le copiați/să le lipiți manual de fiecare dată.

Rețineți că acestea sunt doar elemente de conținut (exemple bune pentru tipuri de text, imagine și link -uri), dar cu alte variabile de design, puteți salva setări repetate în mod obișnuit, cum ar fi stilurile și culorile de fonturi, ceea ce vă face munca și mai ușoară.

Cazuri de utilizare realistă: variabile de proiectare Simplificarea conținutului repetat

De asemenea, am colectat câteva exemple din lumea reală pentru a arăta cum fiecare variabilă de proiectare din Divi 5 vă poate simplifica fluxul de lucru prin eliminarea actualizărilor de conținut repetate.

1. Actualizarea copiilor butonului în timpul unei vânzări

Actualizarea copiilor butonului, a titlurilor de produse, a descrierilor etc., a devenit acum o sarcină care poate fi editată o singură dată pentru a reflecta modificările la nivel de site. Să presupunem că rulez o vânzare Black Friday pe magazinul meu online și vreau să afișez o reducere de 30% pe fiecare buton de pagină de pornire.

O pot face cu ușurință într -o singură editare folosind variabile de text . Am creat și salvat deja un buton de text numit (30% reducere) cu un magazin de valori de șir acum (30% reducere !! ), așa că trebuie să -l aplicăm o singură dată la toate butoanele pentru a reflecta copia.

Partea cea mai bună este că atunci când se încheie vânzarea, trebuie să actualizați valoarea variabilei de text o singură dată, iar toate butoanele vor reveni automat la copia lor originală.

Puteți crea variabile de text similare pentru adresa companiei dvs., datele de contact, liniile de etichetă etc., pe care le veți folosi mai des. Un alt exemplu ar fi salvarea mărturiilor clientului ca șiruri de text și reutilizarea lor în zone cheie precum pagina de prețuri, sub formularul de contact sau în apropierea butoanelor de service. Acest lucru ar construi în mod subtil încredere și ar ajuta vizitatorii să ia decizii mai rapid.

2. Extinderea culorilor tematice la toate butoanele

Să presupunem că doriți să schimbați toate culorile butonului site -ului dvs. în negru în timpul vânzării Black Friday. Deoarece toate butoanele dvs. moștenesc culorile din variabila de culoare a butonului site -ului pe care ați salvat -o, tot ce trebuie să faceți este să schimbați culoarea în negru, iar toate butoanele vor reflecta spiritul Black Friday.

Rețineți că, dacă vă schimbați temporar culorile primare sau secundare (ca în exemplul de mai sus), ar trebui să vă mențineți codurile originale de culoare hexagonală, astfel încât să le puteți restabili întotdeauna schimbând din nou valorile.

3. Gestionarea valorilor globale pentru tipografie

Nu trebuie să repetați aceleași setări de tipografie atunci când adăugați un nou titlu sau un modul de text. În loc să reglați fiecare titlu manual prin setarea mărimii textului, atribuiți -vă o dată valorile preferate și reutilizați -le oriunde este necesar. Puteți defini dimensiunile globale de fonturi pentru fiecare nivel de rubrică de la H1 la H6 și le puteți aplica pe site -ul dvs. cu un singur clic. De asemenea, puteți utiliza cu ușurință variabilele de proiectare în interiorul presetării elementului sau grupului de opțiuni.

Este o economie uriașă, mai ales atunci când lucrați la pagini mari sau actualizați stiluri precum unități de distanțare, lățimi de frontieră sau raporturi de imagine în diferite secțiuni. În loc să reglați fiecare element individual, puteți aplica valori consistente instantaneu pentru a vă menține designul curat și eficient.

4. Economisiți și gestionați mai eficient fonturile globale

Salvați și reutilizați fonturile globale pentru rubrici, corp și secțiuni specifice. Puteți atribui diferite tipografii unor secțiuni, cum ar fi paginile de categorie sau paginile de destinație, pentru a se potrivi cu tonul.

De exemplu, s-ar putea să utilizați un font serif puternic pentru pagini de categorie de bloguri precum „opinie” sau „editorial” pentru a le oferi o senzație mai serioasă, tipărită, în timp ce utilizați un sans-serif curat, modern, pentru paginile de produse sau de aterizare pentru a menține lucrurile pe lumină și axată pe conversie. De asemenea, s -ar putea să doriți să utilizați un alt font pentru mărturii sau bannere în linie. Adăugați mai multe variabile de fonturi, etichetați-le clar și aplicați-le la nivel de site fără actualizări manuale.

5. Salvați motivele de fundal pentru acces rapid

Puteți salva motivele de fundal ca variabile de imagine și le puteți aplica pe fundalul secțiunii, rândului și modulului în câteva clicuri.

În mod similar, salvarea logo -ului companiei, a imaginilor produsului, a fotografiilor personale (dacă construiți o marcă personală), Image Hero și mai mult ca variabile de imagine face foarte ușor să le accesați într -un singur clic atunci când este nevoie.

6. Adăugați instantaneu linkuri de cumpărare

Salvați adresele URL -uri cheie, cum ar fi legăturile de cumpărare, paginile de contact sau politicile de confidențialitate ca variabile de legătură și aplicați -le la butoane sau text cu un singur clic. Nu mai există pașare de copiere de fiecare dată. Acest lucru este util mai ales pentru legăturile utilizate frecvent care apar pe mai multe pagini sau șabloane.

Variabilele de proiectare joacă un rol cheie în sistemul de proiectare bazat pe presetare Divi 5, mai ales atunci când gestionăm conținutul repetat în mod eficient. În loc să reaplicați aceleași stiluri sau să lipiți textul exact pe pagini, puteți defini variabile o dată și le puteți reutiliza oriunde. Combinate cu presetări, variabilele de proiectare devin și mai utile.

Acest lucru nu numai că îți accelerează fluxul de lucru, dar asigură consecvența pe site -ul tău. Indiferent dacă este vorba despre o variabilă număr pentru dimensiunile fontului sau o variabilă de text pentru informațiile dvs. de contact, variabilele de proiectare vă permite să actualizați conținutul repetat la nivel global, fără a săpa prin fiecare modul.

Cele mai bune practici pentru utilizarea variabilelor de proiectare în mod eficient

Pentru a obține cele mai multe variabile de design, începeți să le includeți în etapele incipiente (planificarea) procesului de proiectare a site -ului dvs. web. Iată câteva sfaturi pentru a vă ajuta:

1. Începeți mic

Dacă începeți cu variabile de design, începeți cu elementele esențiale pe care le știți că veți reutiliza adesea, cum ar fi sigla, fonturile globale, culorile, dimensiunile fontului sau căptușeala cu buton. Configurarea acestora mai întâi vă oferă o bază consecventă. Apoi, pe măsură ce designul dvs. evoluează, stați pe mai multe variabile, după cum este necesar.

2. Urmați o convenție de denumire clară

Pe măsură ce adăugați mai multe variabile, este ușor să începeți să -l confundați cu altul, chiar și cu categoriile în loc. De aceea, o convenție de denumire clară este esențială. Evitați etichetele vagi precum text1 sau promo . În schimb, utilizați nume descriptive precum Company_Name , Main_CTA sau FEBER_DISCILAMER pentru a rămâne organizat și pentru a economisi timp.

3. Actualizați variabilele înainte de paginile site -ului

Dacă derulați o ofertă la nivel de site sau actualizați brandingul, doriți să modificați individual elementele principale. Nu. Reglați mai întâi variabila. Apoi, scanați paginile dvs. pentru a confirma totul în sincronizare. O actualizare este tot ce trebuie; Vânătoarea fiecărui buton sau secțiune nu este necesară.

4. Nu folosiți excesiv, fiți strategici

Deși este tentant să transformi fiecare text într -o variabilă, asta poate fi rapid copleșitor, mai ales dacă nu îți numești variabilele contextual. Deci, modele de observație, cum ar fi fraze sau linii utilizate în mai multe loc. Și convertiți doar acestea în variabile. Dacă o frază apare o singură dată, este în regulă să o lași așa cum este.

Variabilele de proiectare simplifică gestionarea conținutului

Gestionarea manual a conținutului repetat, cum ar fi actualizarea aceleiași etichete sau apeluri la acțiune pe zeci de pagini, a fost o parte obositoare a jobului unui designer web. Copierea, lipirea, verificarea dublă-a fost ușor să ratați ceva și chiar mai ușor să vă frustrați. Nu mai.

Cu variabile de proiectare, vă puteți centraliza setările de conținut. Schimbați variabila o dată și fiecare instanță se actualizează instantaneu. Nu mai sunt modificări repetitive sau nepotriviri de versiune - doar actualizări mai rapide, fluxuri de lucru mai curate și mai puține dureri de cap.

Descărcați cel mai recent Divi 5 Alpha

Variabilele de proiectare sunt acum disponibile în Divi 5 Alpha și sunt aici pentru a simplifica fluxul de lucru. Puteți controla conținut și stiluri repetate de la o singură sursă, de la fonturi și culori globale la variabile de legătură și text. Configurați -vă elementele de bază, aplicați -le pe secțiuni și actualizați totul dintr -o singură dată. Fie că rafinați un proiect client sau reconstruiți site -ul dvs., această caracteristică vă ajută să vă deplasați mai repede cu mai puține erori.

Sunteți gata să îl încercați? Descărcați DIVI 5 Alpha și începeți să experimentați cu variabile de proiectare. Definiți fonturi, reutilizați etichetele cu butoane sau configurați stiluri globale în mod inteligent. Și nu uitați să vă împărtășiți feedback -ul cu echipa Divi - construim acest lucru în minte.

Divi 5 este gata să fie utilizat pe site -uri noi, dar nu recomandăm să convertiți site -urile existente în Divi 5 încă.