Gestionarea mărcii dvs. cu variabile de design Divi

Noile variabile de design ale Divi vă oferă opțiuni mai inteligente pentru stocarea numerelor, textului, linkurilor, culorilor, și multe altele. Sunt ușor de configurat și de aplicat pe site -ul dvs. web. Aceasta este o altă etapă pentru un design web consistent și scalabil cu Divi. Variabilele de proiectare sunt excelente pentru oricine folosește Divi, chiar dacă gestionați doar un mic site de broșură.

În această postare, vrem să luăm următoarele minute pentru a vă arăta cum să vă gestionați marca folosind variabile de design în Divi 5. Hai să ajungem la ea!

Divi 5 este gata de a fi utilizat astăzi pe noile construcții de site -uri web.

Gestionarea mărcii dvs. cu noul manager variabil al Divi

Variabilele de proiectare vă permite să stocați variabile de marcă într -un singur loc. Aceasta include culori, fonturi, imagini, șiruri de text, link -uri și chiar valori ale numărului.

Totul este realizat de la noul manager variabil . Odată setate, aceste variabile pot fi reutilizate în aproape orice câmp de modul în întregul editor. Asta înseamnă că setați toate variabilele principale de marcă și le utilizați pe tot parcursul procesului de proiectare. Și dacă trebuie să actualizați stilurile pe întregul site, puteți face acest lucru fără a actualiza fiecare instanță în care ați folosit variabila.

Căutați această pictogramă pentru a seta și aplica variabile de proiectare

Veți observa această pictogramă pe bara laterală din stânga. Făcând clic pe acesta deschide Variable Manager, unde puteți seta toate variabilele.

Variabilele de proiectare funcționează cu fiecare element din Divi Builder. Variabilele de proiectare pot reduce - și, în multe cazuri, înlocuirea - nevoia de a utiliza personalizarea Temelor WordPress. Căutați pictograma variabilă de proiectare atunci când editați un câmp care suportă variabile de proiectare. Folosind această pictogramă, puteți accesa variabilele pe care le -ați setat în managerul dvs. variabil.

Variabilele de proiectare sunt cele mai utile atunci când le definiți la începutul procesului de proiectare. Cu cât îți definești mai devreme variabilele, cu atât mai mult timp vei economisi mai departe linia.

Un „ordin de operațiuni” conceptual pentru a beneficia la maxim de noile caracteristici ale designului Divi

Managementul mărcii cu fiecare tip de variabilă de proiectare

Variabilele de design ale Divi sunt împărțite în șase clase. Sunt 1) numere, 2) șiruri de text, 3) imagini, 4) URL -uri, 5) culori și 6) fonturi. Fiecare dintre acestea poate fi utilizat pentru a seta și aplica diverse aspecte ale mărcii dvs. De acolo, folosiți -le pe site -ul dvs. web pentru a construi cu scalabilitate în minte. De asemenea, grăbește lucrurile.

1. Accesarea culorilor mărcii dvs.

Culorile sunt o mare parte din orice marcă. Variabilele de culoare ale lui Divi funcționează ca vechile culori globale, dar cu mai multă flexibilitate și o UI mai curată. Începeți cu culorile dvs. primare, secundare și text. Apoi, adăugați culori pentru pictograme, fundaluri, granițe, link -uri și multe altele.

Puteți, de asemenea,:

• Creați variante transparente (cum ar fi culoarea primară 80%, culoarea primară 60%etc.)
• Faceți nuanțe mai deschise și mai întunecate ale culorilor dvs. principale
• Schimbați -vă culorile în orice moment și urmăriți -l actualizați pe site -ul dvs. în modulele care utilizează aceste culori

Dacă ați folosit TailWind, știți despre cântarele de culoare și acum puteți crea cu ușurință cântarul de culoare ca variabile de design.

2. Configurarea fonturilor mărcii dvs.

Acesta este un favorit. Alegeți -vă o dată cu titlul și fonturile corpului și folosiți -le peste tot. Puteți adăuga un font mono dacă afișați cod pe site -ul dvs. Asigurați -vă că setați orice opțiuni suplimentare de fonturi (dincolo de titlu și fonturi ale corpului) în presetări de grupuri de opțiuni pentru a le utiliza în situațiile dvs. speciale. Titlul și textul corpului sunt setate automat ca implicit în întregul constructor.

Sau, dacă utilizați frecvent ghilimele blocului, puteți seta o anumită familie de fonturi pentru ei și să o aplicați în presetările elementelor dvs. sau în presetarea grupului de opțiuni de text corporal sub „Block Quote”.

Acesta este cel mai bun mod de a utiliza variabile de proiectare. Odată ce o variabilă este setată, utilizați -o cu presetări de grupuri de opțiuni și presetări de elemente pe întregul site. Variabilele de proiectare sunt dinamice, ceea ce înseamnă că, chiar dacă sunt utilizate în presetări, dacă schimbați o variabilă, se va schimba oriunde este utilizat.

3. Încărcarea variațiilor logo -ului

Imaginile consecvente sunt o parte importantă a prezentării mărcii tale.

Acum, puteți stoca și utiliza cu ușurință variabile de imagine pentru activele pe care le referiți adesea - cum ar fi modele de fundal, fotografii ale afacerii dvs. sau variații de logo.

Variabilele de design vă vor economisi timp cu orice imagini din designul dvs. pe care îl 1) utilizați mai multe ori pe mai multe pagini și 2) schimbați destul de des.

4. Economisirea informațiilor despre marca recurente

Cu variabile de text, vă veți găsi copiind și lipind textul mai rar. Definiți-vă frazele de mare utilizare și aplicați-le pe câmpurile de conținut pe măsură ce proiectați.

Variabilele text ajută cu consecvență și viteză atunci când le utilizați pentru lucruri precum:

• Mărturii sau citate recurente
• Numele de serviciu/produs și descrieri
• Orele de lucru și informațiile de contact
• Renunțări legale
• Fraze de apel la acțiune
• Numele afacerii (mai ales dacă este diferit de numele site -ului)

Fiecare dintre acestea poate fi o variabilă de proiectare (majoritatea variabilelor text). Dacă sunt utilizate pe alte pagini, toate instanțele pot fi actualizate în același timp exact.

Pentru site-uri mai mici, acest lucru poate reduce nevoia de ACF în sarcinile legate de proiectare. Pentru site -uri mai mari, variabilele de proiectare completează bine ACF, în special pentru consistența vizuală.

Șirurile de text sunt chiar utilizabile în fila Advanced pentru alocarea claselor CSS și ID -urilor. Câțiva designeri inteligenți vor folosi acest lucru pentru a atribui clase personalizate modulelor și elementelor utilizate frecvent bazate pe stiluri personalizate. Îți voi lăsa imaginația să -și dea seama.

5. Actualizarea linkurilor de campanie ale mărcii dvs.

Variabilele de legătură sunt ideale pentru promos, vânzări și evenimente. De exemplu, să spunem că utilizați un apel de bare de top pentru a evidenția vânzările sezoniere. Dacă configurați o variabilă de legătură, puteți trece de la un eveniment la altul folosind variabila URL. Îl puteți combina și cu variabile de text și culoare.

Puteți utiliza, de asemenea, URL -uri pentru a stoca și aloca:

• Pagini de examinare (cum ar fi profilul dvs. de afaceri Google)
• Pagini de destinație CRM sau e -mail
• Formulare ascunse sau oferte de abonat
• Tel: și Mailto: Link -uri
• Gestionați legăturile de afiliere sau CRM într -un singur loc
• Link -uri către portofoliul, Behance sau GitHub

Mecanismul de legătură intern implicit al WordPress este excelent pentru majoritatea lucrurilor, dar dacă aveți un link la care doriți să vă referiți des sau să anticipați schimbarea des, variabilele de proiectare ar trebui să fie accesul dvs.

6. Gestionarea variabilelor cu număr recurent

Da - numere, de asemenea. Puteți defini unități pentru distanțare, dimensiuni și animație. Numerele pot fi salvate ca orice tip de unitate CSS, cum ar fi:

Pixeli (PX), procent ( %), EMS (EM), rădăcină EMS (REM), Viewport Height (VH), Viewport Width (VW), Viewport Minimum (VMIN), Viewport Maximum (VMAX), unitate fracțională (FR), unitate de caracter (CH), X-HEIGHT (EX), centimetre (CM), milimetres (mm), inch (in), puncte ( P (PC), grade (DEG), radiani (rad), gradieni (grad), viraje (rotație), secunde (e), milisecunde (MS).

De asemenea, aveți acces la setarea funcțiilor pentru Clamp (), Min (), Max () și Calc ().

Utilizați clamp () pentru valori tipografice fluide. Este excelent pentru textul receptiv și ar trebui utilizat cu variabilele dvs. de font pentru a stabili un sistem complet de proiectare a tipografiei.

Utilizați variabile de număr pentru a seta și:

• Setați căptușeala și marjele consistente
• Definiți lacunele coloanelor sau lățimile maxime
• Păstrați raza de frontieră a butonului aceeași pe întreg
• Reglați duratele de animație la nivel global

Eficientizați marca dvs. cu variabilele de design Divi

Vrei să -ți gestionezi marca ca un profesionist? Folosiți variabilele de design ale Divi pentru a construi mai inteligent și mai rapid. Planificați elementele de bază ale mărcii site -ului dvs. și utilizați -le atomic pe tot parcursul.

Sunt deja încorporate în Divi 5 și puteți profita de ele astăzi. De asemenea, funcționează peste tot - presetări, șabloane de constructor de teme și pe setările individuale ale modulului.