Introducerea variabilelor de design pentru Divi 5

Publicat: 2025-04-04

Sunt încântat să introduc variabile de design pentru Divi 5, o nouă caracteristică care va îmbunătăți semnificativ fluxul de lucru al designului Divi și va oferi utilizatorilor Divi un picior serios față de alți constructori.

Puteți defini variabile pentru orice, cum ar fi culori, fonturi, numere, imagini și text și să le conectați la elemente și presetări divi. Când actualizați o variabilă, designul și conținutul site -ului dvs. se schimbă.

Sinergia dintre variabile și noul sistem de design bazat pe presetare este fantastic. Permiteți -mi să vă arăt cum funcționează.

Consultați următorul videoclip pentru a vedea noua caracteristică în acțiune.

Cuprins
  • 1 Divi merge „global” cu management variabil
    • 1.1 Crearea de noi variabile
    • 1.2 Utilizarea variabilelor în elemente și presetări
  • 2 Exemple variabile de proiectare
    • 2.1 Exemplul unu: Gestionați fonturile globale
    • 2.2 Exemplul doi: Gestionați dimensiunile globale
    • 2.3 Exemplul trei: Globalizează -ți întregul site web
  • 3 Încercați Divi 5 astăzi
  • 4 SNAKE PEEK: rânduri cuibărite
  • 5 alte actualizări Divi 5 sunt pe drum

Divi merge „global” cu managementul variabil

Datorită sistemului global de culori Divi, este posibil să fiți deja familiarizați cu conceptul de variabilă de proiectare. O culoare globală este un tip de variabilă de design. Cu această actualizare, însă, introducem totul global! În plus, gestionarea setărilor globale este mai ușoară ca niciodată, datorită unui nou manager variabil.

Crearea de noi variabile

Pictograma Variabile din bara laterală din stânga va deschide managerul variabil al site -ului dvs. web. Adăugați o nouă variabilă, dați -i un nume și o valoare, apoi puteți conecta această variabilă la setările relevante pe orice pagină. Divi acceptă în prezent șase tipuri de variabile care acoperă toate câmpurile de intrare nativă ale Divi:

  • Culori : Culorile sunt esențiale pentru fiecare site web; Majoritatea site -urilor web folosesc doar trei -patru culori primare. Definirea variabilelor de culoare și utilizarea acestora prin intermediul site -ului dvs. web înseamnă că puteți ajusta întregul paletă de culori a site -ului dvs. în câteva secunde.
  • Fonturi : Era de a lucra cu fonturi statice s -a încheiat. În plus, nu mai sunteți limitat la setările de fonturi globale în personalizarea temelor. Puteți defini fonturile site -ului dvs. ca variabile și le puteți gestiona pe toate într -un singur loc.
  • Numere : Puteți utiliza variabile de număr pentru a proiecta sistemul de dimensionare al site -ului dvs. web. De exemplu, puteți utiliza o dimensiune standard de rază de frontieră pe toate elementele. Transformarea asta într -o variabilă vă va permite să reglați dimensiunea colțurilor rotunjite prin editarea unei singure variabile. Alte utilizări de zi cu zi includ definirea dimensiunilor textului site -ului dvs. web și a înălțimilor liniei, lățimilor containerelor și distanțării și a tot ceea ce este între ele.
  • Imagini : Folosiți aceeași imagine pe mai multe pagini? De exemplu, este posibil să aveți o imagine de fundal standard care servește ca un motiv de marcă familiar. Dacă transformați asta într -o variabilă, reîmprospătarea mărcii dvs. pe drum este ușoară.
  • Text : Variabilele nu se limitează la proiectare; Puteți defini, de asemenea, variabile de text. De exemplu, dacă transformați numărul de telefon al companiei și adresa în variabile de text, nu va trebui să mergeți la vânătoare pentru toate locurile în care ați folosit aceste variabile atunci când detaliile dvs. de afaceri se schimbă.
  • URL -uri : Am aruncat și variabile URL, pentru că de ce nu? Poate doriți să aveți link -ul dvs. principal de apel la acțiune pe diferite pagini în diferite perioade ale anului (schimbându -l în timpul unei vânzări, de exemplu). În loc să actualizați URL -ul de pretutindeni, actualizați variabila unică.

Utilizarea variabilelor în elemente și presetări

Faceți clic pe pictograma Variabile de mai sus pentru a alege dintr -o listă de variabile relevante și conținut dinamic de pe site -ul dvs. web.

Sistemul de conținut variabil și dinamic al Divi a fost extins la toate câmpurile, unde anterior a fost disponibil doar în câmpurile de conținut. Asta înseamnă că puteți atribui variabile și conținut dinamic câmpurilor numerice, câmpurilor de fonturi etc.

Proiectare exemple variabile

Variabilele de proiectare sunt instrumentale și vor deveni rapid o componentă de bază a fluxului de lucru Divi Design. Dar dacă conceptul nu a făcut clic, permiteți -mi să vă ofer câteva exemple.

Exemplul unu: Gestionați fonturile globale

Cum puteți utiliza variabile de proiectare pentru a vă îmbunătăți fluxul de lucru? În primul rând, să luăm în considerare variabilele de fonturi.

Majoritatea site -urilor web folosesc două -trei fonturi. Probabil că ați petrecut timp stabilind fonturile de text dorite de corp și titlu în diverse elemente și presetări.

Dar dacă vrei să schimbi lucrurile? Chiar dacă v-ați proiectat site-ul în mod optim cu presetări, poate fi nevoie de timp pentru a vă întoarce și a schimba fonturile. Este posibil să nu vă amintiți nici măcar toate locurile în care ați folosit un anumit font.

Acolo intră variabilele de fonturi.

Am construit site -ul web în videoclipul de mai sus folosind trei variabile de font: un font de titlu, un font pentru corp și un font evidențiat.

Adăugarea variabilei de font de titlu la elemente precum presetarea mea implicită Blurb este ușoară. Deoarece nu am folosit niciodată valori de fonturi statice, ci în schimb au conectat variabilele mele, fonturile de pe site -ul meu sunt complet dinamice.

Schimbarea fontului de titlu al site -ului meu este la fel de ușoară ca actualizarea variabilei de font de titlu.

Exemplul doi: Gestionați dimensiunile globale

Puteți face același lucru cu dimensiunile textului.

Pentru site -ul web din videoclipul de mai jos, am definit o serie de opt dimensiuni de text pentru diferite niveluri de rubrică și stiluri de text pentru corp. Când îmi actualizez presetarea implicită BLURB și atribuie variabila de dimensiune a textului cu titlu mediu, toate titlurile mele blurb moștenesc valoarea din acea variabilă.

Deoarece bazez dimensiunile de text ale întregului meu site pe variabile, pot gestiona dimensiunile de text ale site -ului meu web în întregime de la managerul variabil.

Exemplul trei: Globalizează -ți întregul site web

În videoclipul de mai sus, puteți vedea un site web care folosește întreaga putere a variabilelor. Toate culorile sunt variabile, la fel ca fonturile, dimensiunile textului, dimensiunile razei de frontieră și valorile de distanțare în elementele mele de container.

Nu numai asta, dar am transformat și conținut partajat în variabile. Numele companiei, numărul de telefon și adresa sunt variabile de conținut.

Chiar și imaginea de fundal, un motiv de marcă familiar pe site -ul web, este o variabilă de imagine pe care o pot schimba cu ușurință.

Încercați Divi 5 astăzi

Variabilele de proiectare pentru Divi 5 este disponibilă astăzi și este una dintre numeroasele caracteristici care vin la Divi în acest an.

Puteți urmări pe măsură ce progresăm prin versiunea finală a Divi 5 și nu numai, cu actualizări la fiecare două săptămâni. În funcție de prioritățile dvs., puteți utiliza acum Divi 5 pentru a construi noi site -uri web sau așteptați până când adăugăm mai multe funcții, orice funcționează cel mai bine pentru dvs.

Așa cum s-a subliniat în programul inițial de lansare a lui Divi 5, alfa Public Divi 5 este ca „Divi 5 Lite”. Lipsește câteva caracteristici și este posibil să nu fie potrivit pentru site -urile web existente, dar este gata să fie utilizat pe site -urile noi, dacă preferați experiența Divi 4.

Vrem să îl încercați și, dacă îl iubiți, folosiți -l; Când toată lumea o iubește, o vom face oficială.

Sneak Peek: rânduri cuibărite

Construim rapid caracteristici. De fiecare dată când terminăm o nouă caracteristică, începem una nouă. Ori de câte ori începem o nouă caracteristică, vă ofer o privire.

În cazul în care ați ratat -o, consultați funcția de săptămâna trecută Sneak Peek, unde am prezentat rânduri cuibărite. Rânduri în interiorul rândurilor! Este o idee simplă, dar un prim pas esențial în crearea unui sistem de aspect mai flexibil pentru Divi 5.

Urmăriți acest videoclip pentru toate detaliile.

Mai multe actualizări Divi 5 sunt pe drum

2025 este anul Divi 5 . Munca obositoare este în spatele nostru. Am construit fundația super-rapidă, iar acum este timpul ca Divi să-și facă revenirea.

Mulțumesc pentru vizionare și înainte de a pleca, am o favoare să întreb. Dacă sunteți aici pentru revenirea Divi, comentați acest videoclip; Voi citi fiecare comentariu. Mi -ar plăcea să văd că acest videoclip ating două sute de comentarii , așa că verificați numărul de comentarii și dați -ne o mână dacă puteți. Este o modalitate excelentă de a hrăni algoritmul și, mai important, ne place să discutăm cu tine.

Nu uitați să ne urmați pe YouTube și să vă abonați la Buletinul Buletinului Divi, astfel încât să nu pierdeți niciodată o actualizare. Ne vedem în curând pentru un alt anunț de caracteristici Divi 5, despre care promit că va fi chiar după colț.