DIVI 5 Caracteristici exclusive (până acum)
Publicat: 2025-06-09Ridicăm noi caracteristici DIVI 5 într -un ritm rapid și fiecare este conceput pentru a îmbunătăți performanța, pentru a -ți eficientiza fluxul de lucru și pentru a aduce capacități de proiectare puternice la vârful degetelor. Aveți nevoie de o imagine de ansamblu? Această postare va aborda caracteristicile exclusive DIVI 5 care merită verificate. Și acesta este doar începutul. Avem funcții noi interesante, cum ar fi FlexBox și The Loop Builder care vor ieși în curând. Actualizările noastre abordează punctele comune de durere pe care le -am auzit de la designeri și dezvoltatori care folosesc Divi zilnic.
Divi 5 este gata să fie utilizat pe site -uri web noi.
- 1 8 Caracteristici exclusiv la Divi 5 (și cum funcționează)
- 1.1 1.. Puncte de întrerupere personalizabile
- 1.2 2. Presetări de grupuri de opțiuni
- 1.3 3. Unități avansate
- 1.4 4. Variabile de proiectare
- 1.5 5. Rânduri cuibărite
- 1.6 6. Grupuri de module
- 1.7 7. Manager de atribute
- 1.8 8. Setări Căutare și filtrare
- 2 Cum Divi 5 se ridică împotriva opțiunilor populare
- 2.1 Ce înseamnă asta pentru proiectele dvs.
- 3 Ce urmează?
- 3.1 Aspecte FlexBox
- 3.2 Loop Builder și WooCommerce Actualizări
- 3.3 Culori avansate
- 3.4 Planificarea beta și migrația
- 4 Gata să încerci Divi 5? Iată cum să începi
8 caracteristici exclusiv la Divi 5 (și cum funcționează)
Divi 5 introduce upgrade -uri inovatoare la proiectarea site -ului web și folosește o serie de instrumente care reinventează și accelerează sarcinile de proiectare, ceea ce le face mai intuitive. Următoarele opt caracteristici demonstrează potențialul Divi-ului nostru recent revizuit:
1.. Puncte de întrerupere personalizabile
Funcția lansată pe 6 februarie 2025
Divi 5 introduce o flexibilitate îmbunătățită în proiectarea receptivă cu sistemul său de puncte de întrerupere personalizabile. Majoritatea constructorilor de pagini restricționează utilizatorii la doar trei vizualizări standard, dar Divi 5 permite până la șapte puncte de întrerupere unice, toate acestea fiind setate la valori personalizate ale pixelilor.
Acest lucru oferă utilizatorilor mai mult control decât alți constructori populari, care de obicei se lipesc de dimensiunile dispozitivului fix și oferă opțiuni de ajustare limitată. În timp ce multe platforme te obligă să proiectezi în limite rigide, Divi 5 vă permite să vizați lățimile exacte ale ecranului în care designul dvs. are nevoie de o atenție specială.
Dincolo de trio -ul standard
Majoritatea constructorilor de site -uri web se lipesc de desktop, tabletă și trio mobil, deoarece este simplu. Divi 5 a recunoscut că acest lucru nu se potrivește cu modul în care oamenii răsfoiesc de fapt web -ul astăzi, pe zeci de dimensiuni de ecran diferite.
Cu Divi 5, puteți seta puncte de întrerupere pentru:
- Telefon (<767px)
- Telefon larg (<860px) - Perfect pentru vizionarea mobilă peisagistică
- Tabletă (<980px)
- Tabletă largă (<1024px) - prinde tablete mai mari și dispozitive similare
- Desktop (> 981px)
- Ecran lat (> 1280px)
- Ultra lat (> 1440px)
Alți constructori de pagini WordPress oferă un control al punctului de întrerupere, dar niciunul nu se potrivește cu precizia și ușurința de utilizare a Divi 5. Sistemul rămâne intuitiv, cu aceleași controale divi familiare aplicate pe toate punctele de întrerupere.
Manipulare vizuală a punctului de întrerupere
Divi 5 introduce scalarea pânzei, o caracteristică care o diferențiază de majoritatea altor constructori. În loc să fiți limitat la comutarea între previzualizările dispozitivului fix, puteți trage marginea pânzei pentru a vedea aspectul dvs. la orice lățime dorită.
Această abordare vă oferă feedback imediat, realist, aproape ca lucrul direct într -un browser web. Când proiectați pentru puncte mai largi decât fereastra curentă, pânza se ajustează proporțional, astfel încât să obțineți în continuare o privire exactă asupra designului dvs., chiar și pe ecrane mai mici.
Experiența rămâne consecventă pe măsură ce vă deplasați între punctele de întrerupere. Controalele se comportă la fel, iar aspectul dvs. nu se schimbă pe neașteptate. Această fiabilitate reduce ghicitul și depanarea de la designul receptiv, care poate fi o durere de cap în alți constructori de pagini.
Află mai multe
2. Presetări de grupuri de opțiuni
Funcția lansată pe 11 martie 2025
Presetări de grupuri de opțiuni este una dintre cele mai interesante caracteristici noi din Divi 5, extinzându -vă capacitățile de a construi un sistem de proiectare care funcționează pentru dvs. Presetările de grupuri de opțiuni sunt blocurile de construcție ale proiectării dvs. În timp ce presetările de element vă blochează în stilul unui anumit element, presetările grupului de opțiuni Divi 5 funcționează pe orice tip de element.
Puteți crea stiluri reutilizabile pentru proprietăți de design specifice, cum ar fi tipografia, granițele, umbrele sau fundalurile și amestecați aceste stiluri pe diferite elemente. De exemplu, s -ar putea să creați o presetare pentru stilul dvs. de rubrică, un altul pentru stilul de butoane și un al treilea pentru umbrele de cutie.
Odată configurat, puteți aplica aceste stiluri la orice element compatibil cu un clic, indiferent dacă este vorba despre un modul de text, Blurb, apel la acțiune sau chiar containere precum secțiuni și rânduri.
De ce acest lucru contează pentru fluxul dvs. de lucru
Acesta este un economisitor de timp atunci când trebuie să vă actualizați designul. Spuneți că decideți să schimbați raza de frontieră pe elemente de pe întregul site. În loc să vânați fiecare buton, imagine și secțiune, editați pur și simplu presetarea de frontieră o singură dată și fiecare element folosind automat actualizările prestabilite.
Capacitatea de a lucra în diferite tipuri de elemente face ca presetările de grupuri ale Divi 5 să fie cu adevărat utile. Același stil de frontieră se poate aplica unui modul, coloană, rând sau secțiune. Această compatibilitate încrucișată economisește ore de lucru repetitive de stil.
Această flexibilitate merge cu un pas mai departe. Presetările de opțiuni ale Divi se extind dincolo de opțiunile de stil de bază. De asemenea, acoperă funcții bazate pe script, cum ar fi afișaje condiționale, videoclipuri de fundal HTML și efecte de defilare. Acest lucru vă oferă un control constant atât asupra stilului static, cât și a comportamentelor interactive pe site -ul dvs.
Află mai multe
3. Unități avansate
Funcția lansată pe 19 martie 2025
Divi 5 și -a îmbunătățit gestionarea unităților CSS, ceea ce face mai ușor designul receptiv.
Acum, puteți accesa întreaga gamă de unități CSS necesare pentru designul web de astăzi direct în cadrul constructorului. Asta înseamnă că puteți utiliza pixeli (PX), procente (%), EMS (EM), EMS root (REM), unități de vizualizare (VW, VH, VMIN, VMAX) și alegeri chiar mai avansate, cum ar fi lățimea personajului (CH) sau unități fracționale (FR) pentru rețele.
Acest lucru ar putea părea o actualizare minoră la început, dar de fapt vă oferă mult mai multă flexibilitate pentru construirea unor machete receptive.
De ce contează diferite unități
Când construiți site -uri, doriți să arătați bine pe telefoane, tablete și desktop, folosind doar pixeli poate crea dureri de cap. Un element lățime de 300px arată bine pe desktop, dar ar putea să vă spargă aspectul pe mobil.
Cu unități avansate, cum ar fi Viewport, puteți seta același element la 80VW (80% din lățimea Viewport) și se va extinde perfect pe toate dispozitivele. Sau utilizați unități REM pentru a menține textul proporțional cu dimensiunea fontului de bază, ceea ce face ajustările de accesibilitate mult mai ușoare.
Acum, combinați unitățile cu funcțiile CSS precum Calc (), Min (), Max () și Clamp () și vedeți adevărata magie se întâmplă. Divi 5 acceptă toate acestea, permițându -vă să creați machete cu adevărat fluide care să se adapteze la orice dimensiune a ecranului.
De exemplu, s -ar putea să setați o înălțime a secțiunii la Calc (80Vh - 60px) pentru a face cea mai mare parte a ecranului, lăsând loc pentru o lovitură de cap. Sau utilizați Clamp (16px, 4VW, 22px) pentru text care crește cu ecranul, dar rămâne în limite lizibile.
Flexibilitatea clemei ()
Funcția Clamp () merită o atenție specială, deoarece rezolvă multe probleme de proiectare responsive. Vă permite să setați dimensiuni minime, preferate și maxime într -o singură dată, făcând funcția de clemă () o caracteristică preferată a multor designeri web.
S -ar putea să doriți rubrici care să crească cu dimensiunea ecranului, dar rămâneți citiți. Într -un modul de rubrică, puteți seta dimensiunea textului la CLAMP (36px, 5VW, 72px). Titlul nu va fi mai mic de 36px sau mai mare de 72px, dar între aceste dimensiuni, se va extinde la 5% din lățimea vizualizării.
Acest lucru creează tranziții netede între dimensiunile ecranului, fără puncte de întrerupere. Textul care este prea mare pe tablete sau prea mic pe monitoarele mari nu va fi o problemă. Tipografia dvs. respiră cu aspectul.
De asemenea, înțelegem că diferite elemente de proiectare au nevoie de diferite unități, motiv pentru care unitățile avansate ale Divi 5 funcționează maleabil, nu doar cu tipografia, ci marjele, umplutura și alte valori de distanțare:
- Pentru text, unitățile REM păstrează totul proporțional. Dacă setați textul corpului la 1rem și rubrici la 2.5rem, schimbarea dimensiunii fontului de bază actualizează totul proporțional.
- Pentru machete, puteți încerca să amestecați unități fixe și fluide. O bară laterală ar putea funcționa cel mai bine la 300px, în timp ce conținutul principal ar putea folosi Calc (100% - 350px) pentru a umple spațiul rămas.
- Pentru distanțare, unitățile EM creează căptușeală care se scalează cu dimensiunea textului. Acest lucru menține proporțiile de proiectare în mod consecvent chiar și atunci când mărimile textului se schimbă.
De asemenea, joacă bine cu alte caracteristici discutate
Ceea ce este deosebit de drăguț este că nu trebuie să scrieți CSS personalizate pentru a utiliza aceste unități. Sunt construite chiar în interfața vizuală. Puteți experimenta cu valori diferite și puteți vedea rezultatele instantaneu, făcând curba de învățare mult mai blândă decât codificarea acestor soluții de mână.
Aceste unități sunt integrate cu alte caracteristici din Divi 5. Puteți stoca valoarea dvs., folosind orice unitate pe care o preferați, ca variabile de proiectare, apoi le puteți aplica la nivel de site prin presetări de grupuri de opțiuni. Acest lucru creează o reacție în lanț de un design bun care curge pe întregul dvs. site. De exemplu:
- Creați o variabilă de număr, cum ar fi dimensiunea titlului: clemă (26px, 5VW, 82px); Pentru rubricile dvs. H1. Aplicați această variabilă la presetarea textului de rubrică. Titlurile dvs. se vor extinde fără probleme între 26px pe mobil și 82px pe desktop, cu un calcul fluid 5VW între aceste dimensiuni.
- Setarea unei variabile de număr la Clamp (20px, 5VW, 80px) și apoi folosind -o ca marje, aveți o distanță strânsă pe o cameră de respirație mobilă și generoasă pe desktop, cu o tranziție lină între.
- Setați o distanță de bază folosind un număr de unitate spațială variabilă: 20px și utilizați-l cu Calc () în presetările de aspect. De exemplu, aplicați Calc (var (–Space-unit) * 2) pentru goluri mai mari și Calc (var (–Space-unitate) / 2) pentru spații mai strânse. Când actualizați valoarea de bază, toate distanțele derivate se ajustează proporțional.
Acest lucru doar zgârie suprafața. Amestecând aceste configurații, puteți \ crearea site -urilor care valorifică simplitatea și capacitățile noi ale Divi.
Află mai multe
4. Variabile de proiectare
Funcția lansată pe 3 aprilie 2025
Majoritatea constructorilor de site -uri web au modalități de a stabili culori și fonturi globale. Divi 5 ia această idee și rulează cu ea. Puteți crea variabile nu doar pentru culori și fonturi, ci și pentru numere, imagini, text simplu și chiar link -uri web.
Gândiți -vă la acest lucru: majoritatea constructorilor vă permit să setați o culoare primară care se actualizează peste tot. Dar dacă doriți să vă schimbați numărul de telefon pe mai multe pagini? Sau schimbați o imagine recurentă folosită pe întregul site? Divi 5 gestionează aceste situații cu ușurință.
Toate variabilele dvs. trăiesc într -un panou simplu în bara laterală a constructorului vizual. Este curat, ușor de găsit și pune totul într -un singur loc.
Un meci perfect cu presetările
Variabilele și presetările de proiectare (atât presetările de grupuri de opțiuni, cât și presetările de elemente) lucrează împreună pentru a face un design de întreținere și scalabil. Puteți construi presetări care se referă la variabilele dvs., creând un sistem de proiectare flexibil.
De exemplu, s -ar putea să creați o variabilă de design pentru fontul principal, apoi să utilizați acea variabilă în presetarea tipografiei de rubrică. Dacă decideți să vă schimbați fontul mai târziu, trebuie să actualizați variabila doar o singură dată, nu presetarea în sine. Acest lucru creează un alt strat de control pe care majoritatea constructorilor pur și simplu nu îl oferă.
Această abordare cu două straturi vă oferă mai mult control decât alți constructori. Separați cum arată ceva (variabile) de locul în care apare (presetări).
Puteți utiliza variabile de număr cu funcții CSS precum Calc () și Clamp () pentru a crea modele receptive care se adaptează perfect la diferite dimensiuni ale ecranului. Setați o variabilă pentru ritmul de distanțare al site -ului dvs. și aplicați -o pe tot parcursul aspectului dvs. pentru proporții consistente care se extind frumos.
Când schimbați o variabilă, totul folosind -o actualizări imediat. Acest lucru transformă ceea ce ar putea fi ore de muncă în câteva secunde de clic.
Cum ajută acest lucru la crearea unui design de întreținere
Să ne uităm la câteva exemple practice de variabile de proiectare în acțiune:
- Păstrați -vă brandul la fel peste tot: configurați variabile pentru culorile, fonturile și distanțarea dvs. Folosiți -le în presetări pe site -ul dvs. pentru un aspect constant.
- Rulați o vânzare de vacanță: creați variabile de imagine pentru graficele de campanie și variabile de text pentru o copie promoțională. Când se termină sezonul, actualizați -le o dată pentru a vă reîmprospăta întregul site.
- Stiluri de frontieră: creați o variabilă de număr pentru raza de frontieră, cum ar fi 10px, și aplicați -o pe toate presetările de butoane, modulele de imagine și cardurile. Dacă direcția dvs. de proiectare se schimbă, o actualizare afectează toate colțurile rotunjite pe întregul site.
- Faceți ușor actualizările clientului: atunci când construiți site -uri pentru clienți care vor trebui să facă actualizări, proiectarea variabilelor strălucesc. Configurați variabile pentru conținut pe care le vor schimba des, cum ar fi informațiile de contact sau programul de lucru. Acestea le pot actualiza fără a atinge setările de design.
Variabilele de proiectare funcționează, de asemenea, cu constructorul de teme Divi. Aceasta înseamnă că anteturile, subsolurile și șabloanele dvs. folosesc aceeași piscină variabilă ca paginile dvs. Spre deosebire de alte sisteme care te blochează în modele rigide, variabilele Divi 5 mențin lucrurile flexibile în timp ce te ajută să rămâi organizat.
Află mai multe
5. Rânduri cuibărite
Funcția lansată pe 17 aprilie 2025
Divi 5 introduce rânduri cuibărite, ceea ce vă oferă mai mult control asupra machetei. Această adăugare vă permite să plasați rânduri în coloane, creând machete complexe care nu au fost posibile în versiunile anterioare fără cod personalizat.
Cu rânduri cuibărite, puteți construi machete avansate de grilă, blocuri de conținut în stil reviste și modele bazate pe carduri, cu mult mai puțin efort. Aveți nevoie de o secțiune cu coloane care conțin propriile machete cu mai multe coloane? Acum o puteți face chiar în constructor.
Clădire cu adâncime
Adăugarea unui rând cuibărit funcționează la fel ca adăugarea oricărui modul. Selectați o secțiune, faceți clic pe butonul Plus și alegeți „Row” din opțiunile dvs. De acolo, puteți adăuga un rând pentru a crea un rând cuibărit și pentru a -l completa cu conținut.
Această schimbare aparent simplă deschide multe posibilități de proiectare. Puteți crea widget -uri cu bara laterală cu propriile structuri de coloane, puteți construi vitrine de produse cu galerii cuibărite sau tabele de comparație a caracteristicilor de design cu machete complexe.
Cea mai bună parte este cât de natural se încadrează în fluxul de lucru. Nu este nimic nou de învățat. Folosiți rânduri în mai multe locuri. Dacă știți cum să construiți cu Divi, știți deja cum să folosiți rânduri cuibărite.
Rândurile cuibărite rezolvă probleme reale pentru constructorii de site -uri. Doriți să creați o secțiune de servicii în care fiecare serviciu are propriul aspect cu două coloane? Anterior, ai avea nevoie de CSS personalizate sau de soluții complexe. Acum este construit chiar.
Pentru site-uri cu conținut greu, puteți crea machete în stil reviste cu lățimi mixte ale coloanei și zone de conținut cuibărite. Fiecare articol sau caracteristică poate avea propria structură de coloană, menținând în același timp aspectul paginii.
Doar primul pas
Rândurile cuibărite sunt doar începutul evoluției aspectului Divi 5. Echipa lucrează la un sistem complet de aspect bazat pe Flexbox pentru a face Divi și mai flexibil.
Actualizările viitoare vor introduce controale suplimentare de aspect, oferindu -vă și mai multe opțiuni pentru crearea de modele complexe fără cod personalizat. Această abordare metodică asigură că fiecare caracteristică nouă funcționează perfect înainte de a trece la următoarea.
În loc să se grăbească cu caracteristici pe jumătate coapte, echipa de dezvoltare Divi construiește o fundație solidă pentru viitorul designului aspectului. Fiecare pas se bazează pe ultimul, creând un sistem atât de rezistent la viitor, cât și ușor de utilizat.

Află mai multe
6. Grupuri de module
Funcția lansată la 1 mai 2025
Construirea site -urilor web înseamnă adesea crearea acelorași modele de conținut în mod repetat. Proiectați o carte perfectă a membrilor echipei, apoi petreceți douăzeci de minute recreându -l pentru următoarea persoană. Grupurile de module rezolvă acest lucru, permițându -vă să împachetați elemente legate de unități reutilizabile.
Iată ce schimbări: în loc să tratați fiecare piesă separat, lucrați cu blocuri complete. Un card de produs devine un lucru pe care îl deplasați, nu șase module diferite pe care trebuie să le selectați individual. Când trebuie să ajustați distanța pe cincizeci de carduri de produs, actualizați șablonul de grup o dată în loc să editați fiecare card manual.
Beneficiul real apare pe site -uri mai mari. Proiectele clienților cu zeci de membri ai echipei, cataloage de produse sau înregistrări de servicii devin gestionabile. Nu faceți lucrări repetitive de asamblare-vă concentrați pe conținut și reglare fină.
Crearea combinațiilor de module personalizate
Grupurile de module deschid posibilitățile pe care modulele unice nu le pot gestiona de obicei. Construiți o carte de serviciu în care aveți nevoie de o imagine de fundal, o pictogramă suprapusă, un titlu, o descriere și două butoane de acțiune: „Aflați mai multe” și „Obțineți cotație”.
Cu grupuri de module, stratați aceste elemente exact cum le doriți. Acest lucru devine util pentru conținutul care nu se potrivește șabloanelor standard.
Pentru tabelele de prețuri, puteți utiliza trei rânduri cuibărite într -un grup de module: o rubrică în primul rând, detalii despre preț în a doua și o listă de caracteristici în a treia. Acest lucru vă oferă un control individual asupra fonturilor, culorilor și distanțării pe care nu le oferă modulul de tabel de prețuri încorporat.
Aceeași abordare funcționează pentru mărturii folosind modulele de pictogramă, imagine, rubrică și text aranjate în structura grupului. Obțineți mai multă flexibilitate de aspect decât modulul mărturisit standard, păstrând totul gestionabil ca o singură unitate.
Avantajul esențial este combinarea controlului de aspect al clădirii de la zero cu comoditatea de a trata mai multe elemente ca o singură bucată.
Construirea bibliotecilor componente reutilizabile
După ce creați grupuri de module eficiente, salvați -le ca elemente globale. Aceasta creează o bibliotecă de componente care crește cu fiecare proiect. Când rafinați stilul, aspectul dvs. de mărturie se actualizează pe douăzeci de pagini, iar vitrina produsului dvs. rămâne consecventă în timp ce iterați pe design.
În loc să porniți de la zero de fiecare dată când construiți o pagină, începeți cu machete consistente și le adaptați la noi pagini și cerințe de aspect.
Îmbrățișați ușurința integrării Divi Cloud. Cu acest instrument, componentele se pot trece fără efort de la proiect la proiect. Să presupunem că dezvoltați un set robust de grupuri de module pentru un anumit site client; Acum le puteți folosi ca bază pentru misiunile viitoare. În acest fel, fiecare proiect obține avantajul soluțiilor anterioare, dar își păstrează estetica distinctă.
Funcționează perfect cu sistemul de proiectare Divi 5
Grupurile de module devin cu adevărat interesante atunci când le utilizați cu variabile de proiectare și presetări de grupuri de opțiuni. Spuneți că construiți un grup de mărturie: citat, nume de autor, companie și fotografie.
În loc să setați culori fixe, vă referiți la variabilele de culoare ale mărcii. Pentru stilul de ofertă, creați o presetare a grupului de opțiuni pentru tipografie care include fontul, dimensiunea și înălțimea liniei dvs. personalizate. Pentru numele autorului, aplicați o presetare a grupului de opțiuni de titlu diferit.
Acum salvați acel grup de module ca element global. Aceste presetări de grupuri de opțiuni conectează fiecare mărturie de pe site -ul dvs. la sistemul dvs. de proiectare. Dacă clientul dorește un gri mai închis, schimbați variabila o dată și toate modulele de grupuri mărturisite se vor actualiza. Dacă trebuie să ajustați stilul de ofertă, editați o opțiune de tipografie presetată o dată; Fiecare citat de mărturie se va schimba instantaneu.
Acest lucru bate gestionarea modulelor individuale împrăștiate peste tot. Grupurile dvs. de module utilizează presetări de grupuri de opțiuni pentru granițe, fundaluri și stil de text, astfel încât actualizarea fluxurilor presetate prin toate elementele grupate automat.
Află mai multe
7. Manager de atribute
Funcția lansată pe 16 mai 2025
Ați conceput un buton într -un modul de apel la acțiune. Culorile funcționează, iar efectele hover arată bine. Acum doriți aceleași stiluri de buton pe un formular de contact, dar nu doriți titlul sau fundalul CTA.
Copiere obișnuită nu va funcționa aici: ai primi totul sau nimic. Divi 5 vă permite să copiați doar părțile butonului datorită funcției sale de gestionare a atributelor. Faceți clic dreapta pe CTA, alegeți ce să copiați,
Apoi lipiți doar acele stiluri de butoane pe formularul de contact.
Alegeți și alegeți ce călătorește
Divi 5 împarte fiecare element în diferite tipuri de atribute. Alegeți care să le copiați:
- Toate atributele - totul este copiat
- Atribute de proiectare - culori, distanțare, presetări, dar fără text sau imagini
- Atribute de stil - doar schimbările dvs. personalizate
- Atribute de conținut - numai text și imagini
- Presetări - numai misiuni prestabilite
Spuneți că doriți stilul unui buton, dar nu textul său. Copiați atributele de design. Doriți presetarea de fundal a unei secțiuni, dar nu și căptușeala? Copiați doar presetările.
Funcționează între diferite module
Puteți copia atribute dintr -un tip de modul și le puteți lipi pe un alt tip. De exemplu, puteți copia dintr -un modul de apel la acțiune și lipiți -l pe un formular de contact. Divi 5 își dă seama ce setări funcționează pe ambele module și ignoră restul.
Acest lucru ajută la construirea de site -uri care au nevoie de același stil în diferite tipuri de module. Nu trebuie să recreezi culorile butonului pentru fiecare formular, mărturie sau alt modul care folosește butoane.
Comenzi rapide la nivel de grup
Sistemul de atribute este mai profund odată cu gestionarea selectivă a grupului. Săriți în întregime panourile de setări. Faceți clic dreapta pe și aplicați grupuri de atribute specifice direct din meniul contextual.
Ați copiat un modul cu presetarea butonului perfect? Puteți lipi doar butonul presetat la alte elemente prin meniul selectiv. Nu există vânătoare de file și nici o scufundare.
Aceeași precizie funcționează pentru resetare. Ștergeți toate atributele de design, păstrând conținutul intact. Sau resetați doar presetări în timp ce păstrați înlocuirile de stil personalizate.
Viteză prin comenzi rapide
Fiecare acțiune primește comenzi rapide de la tastatură care apar chiar în meniurile de context. Aflați câteva combinații cheie și accelerare de stil. Comenzile rapide rămân consecvente pe toate tipurile de atribute, astfel încât degetele să învețe rapid modelele.
Acest lucru depășește salvarea clicurilor. Când construiți șantiere cu sute de elemente, aceste micro-eficiențe se compun în ore de timp economisite. Munca manuală repetitivă devine acțiuni rapide, vizate.
Se joacă frumos cu sistemul dvs. de proiectare
Managerul de atribute se conectează direct la ecosistemul presetat al Divi 5. Conexiunile de sistem se deplasează de -a lungul când copiați un modul folosind presetări de grupuri de opțiuni și variabile de proiectare.
Lipiți atributele care includ presetări, iar aceste elemente noi se conectează imediat la sistemul dvs. de stil global. Actualizați o presetare mai târziu și fiecare element copiat reflectă automat schimbarea. Sistemul dvs. de proiectare rămâne conectat pe măsură ce construiți rapid și duplicați elemente.
Află mai multe
8. Setări Căutare și filtrare
Funcția lansată pe 29 mai 2025
Construirea site -urilor web înseamnă reglarea setărilor. Modulele Divi împachetează zeci de opțiuni în panourile lor, iar vânarea prin file pentru acel câmp de culoare vă poate mânca ziua. Divi 5 readuce funcția de căutare din Divi 4, dar o face să funcționeze mai bine.
Obțineți o bară de căutare chiar în partea de sus a fiecărui panou de setări. Tastați ceea ce aveți nevoie, iar Divi arată doar opțiuni de potrivire. Căutați „graniță”? Fiecare setare legată de frontieră apare în timp ce toate celelalte se estompează. Trebuie să reglați „căptușeala”? Toate distanțele controlează instantaneu.
Acest lucru elimină clicurile și derularea care îți încetinește munca. În loc să deschideți file și să vânăți prin grupuri, puteți găsi ceea ce aveți nevoie în câteva secunde.
Filtrați după ce ați schimbat
Economisirea în timp real este filtrul „modificat”. Faceți clic pe el și vedeți doar setările pe care le -ați ajustat deja. Acest lucru vă ajută atunci când apucați un pachet de aspect sau un site de pornire și doriți să vedeți ce a fost personalizat.
Spuneți că importați un aspect de afaceri, dar doriți să schimbați culorile. Apăsați filtrul modificat și observați fiecare alegere personalizată a culorii fără a săpa prin fiecare modul. Puteți vedea ce fonturi au fost schimbate, care distanțarea a fost modificată și ce efecte au fost adăugate.
Acest lucru funcționează excelent și pentru proiectele clienților. Când cineva vă întreabă ce ați personalizat pe site -ul său, filtrul modificat vă arată clar munca.
Opțiuni de filtrare inteligentă
Dincolo de filtrul modificat, obțineți sortare prin setarea tipurilor de setare. Când vă actualizați paleta, filtrul „Culori” arată fiecare câmp de culoare simultan. Când sunt necesare modificări ale tipografiei, filtrele „familii de fonturi” și „greutăți de fonturi” dezvăluie setări de text pe toate modulele dvs.
Sistemul știe ce setări contează cel mai mult. Culorile și fonturile își obțin filtrele pentru că sunt cele mai frecvente schimbări pe care oamenii le fac. Dimensiunile sunt grupate, deoarece ajustările de distanțare se întâmplă frecvent.
Aceste filtre salvează clicuri atunci când efectuați modificări la nivel de site. În loc să deschideți fiecare modul individual, lucrați prin liste filtrate ale setărilor pe care trebuie să le modificați.
Află mai multe
Cum Divi 5 se ridică împotriva opțiunilor populare
Piața constructorului de site -uri este aglomerată de opțiuni, dar Divi 5 iese în evidență datorită unor funcții cu adevărat noi. Iată o privire la ceea ce face Divi 5 diferit:
Divi 5 | Divi 4 | Element | Gutenberg | BAIR BILDURI | |
---|---|---|---|---|---|
Puncte de întrerupere responsive | 7 puncte de întrerupere personalizabile cu scalare a pânzei | 3 puncte de întrerupere fixe (desktop, tabletă, mobil) | 6 Puncte de întrerupere cu valori personalizabile. Fără scalare de pânză. | Fără controale vizuale de întrerupere - necesită CSS personalizate | 4 Puncte de întrerupere personalizate implicite + nelimitate. Fără scalare de pânză. |
Variabile de proiectare | Culori, fonturi, numere, imagini, text și adrese URL | Doar culori globale | Doar culori globale | Opțiuni limitate de culori globale | Suport pentru variabile CSS (poate necesita o configurație extinsă sau un cadru CSS) |
Sistem presetat | Presetări de elemente + Presetări de grupuri de opțiuni (compatibilitate încrucișată) | Presetări de elemente numai | Stiluri globale pentru unele elemente (clase globale în prezent în alfa limitată) | Modele de blocare și blocuri reutilizabile | Sistemul de clase globale (poate necesita o configurație extinsă sau un cadru CSS) |
Unități CSS avansate | Suport complet al unității CSS: Clamp (), Calc (), Min (), Max () prin interfață vizuală | Unități de bază: PX, %, Em. Opțiunea de a utiliza unități personalizate precum VH și VW | Unități de bază în interfața nativă | Suport limitat de unitate | Suport CSS complet |
Sistem de aspect | Rânduri cuibărite cu cuibărit infinit | Structura fixă de secțiune-linie-coloană | Elemente cuibărite susțin | Bazat pe blocuri cu blocuri de grup | FlexBox și CSS Grid |
Managementul atributelor | Copiere/lipire selectivă - Alegeți atribute specifice de transferat | Copiere/lipire de bază pentru modulele complete | Transfer de stil între aceleași tipuri de elemente | Blocați doar copiați/lipiți | Clase globale pentru partajarea stilului |
Grupuri de module | Grupuri de module native pentru gruparea mai multor module în unități reutilizabile | Fără capacitate de grupare a modulului | Containere cuibabile | Blocuri de grup pentru combinarea mai multor blocuri ca unități unice. Foarte de bază și adesea neplăcut | Secțiune, container, bloc, elemente div + componente (în prezent elemente reutilizabile experimentale) |
Interfață constructor | Panouri conectate, spațiu de lucru cu mai multe panouri, modul ușor/întuneric | Modaluri plutitoare | Interfață laterală a panoului | Editor de blocuri în zona de conținut | Panouri laterale cu vedere la structură |
Ce înseamnă asta pentru proiectele dvs.
Combinația de caracteristici a Divi 5 creează un sistem de proiectare pe care alți constructori nu îl pot potrivi. Presetările de grupuri de opțiuni și grupurile de module singure au pus Divi 5 înaintea concurenților.
Când variabilele de proiectare funcționează cu presetări și grupuri de module, veți primi ceva versatil. Variabile de referință în presetări, aplicați -le pe elemente grupate și schimbarea valorilor actualizează automat fiecare element pe site -ul dvs. Adăugați funcțiile viitoare FlexBox și Loop Builder la mix și vă veți găsi creând orice site web fără a fi nevoie de codificare personalizată.
Ce urmează?
Foaia de parcurs Divi 5 arată actualizări continue care vor ateriza în curând. Dezvoltatorii noștri, împărțiți în șapte echipe, lucrează cu normă întreagă la diferite funcții, la actualizări de transport cel puțin la fiecare două săptămâni. Iată o privire de ceea ce vă puteți aștepta în săptămânile următoare:
Aspecte flexbox
Cea mai mare schimbare este sistemul complet de aspect Flexbox, care se află la câteva săptămâni distanță de finalizare. Acest lucru va înlocui complet modul în care construiți machete. Veți obține șabloane de rând noi, centrare automată verticală, ambalare a conținutului și distribuție de distanțare prin controale vizuale în loc de CSS personalizate.
Grupurile de module au fost expediate doar ca containere care împachetează module legate de împreună. Combinat cu FlexBox, puteți crea machete de reviste, vitrine de produse cu înălțimi potrivite și alinieri complexe care au necesitat anterior soluții de rezolvare. Secțiunile de specialitate dispar odată ce FlexBox ajunge.
Buclă Builder și WooCommerce Actualizări
Bazându -se pe sistemul de aspect FlexBox și grupurile de module, constructorul de bucle vă va permite să repetați orice: module unice, grupuri sau secțiuni întregi. Spre deosebire de alți constructori care vă vor bloca în șabloane, veți defini ceea ce repetă și îl veți conecta la conținut dinamic. Buclele cuibărite vor funcționa și ele. De exemplu, categoriile de bloguri care se vor bucura prin postări, fiecare postare afișând recenzii bucle.
Modulele WooCommerce vor fi reconstruite de la zero folosind arhitectura Divi 5. Modulele actuale vor funcționa prin compatibilitate înapoi, dar nu vor interacționa cu presetări sau variabile. Noile module de produse vor fi finalizate în câteva săptămâni, punând suportul WooCommerce pe pista pentru beta.
Culori avansate
Culorile relative cu suport de nuanță, saturație și ușurință (HSL) vă permite să construiți relații matematice de culoare. Setați -vă culoarea primară o dată, apoi generați variații automat: „albastru primar, dar 20% mai ușor” sau nuanțe complementare care se actualizează atunci când schimbați baza.
Planificarea beta și a migrației
Beta începe când cele trei obiective sunt complete: o compatibilitate îmbunătățită înapoi pentru site -urile existente, suportul complet al modulului WooCommerce și remedierea continuă a erorilor pe baza feedback -ului alfa.
Dacă mergem cu progresele actuale, sugerează o versiune beta în câteva luni. Echipa lucrează, de asemenea, la backend, astfel încât site -urile Divi 4 să poată migra fără a necesita modificări. Modulele terțe de pe piața divi au nevoie de o compatibilitate deplină.
Pentru proiecte noi, Divi 5 Alpha oferă o capacitate suficientă pentru majoritatea construcțiilor. Îmbunătățirile performanței justifică comutatorul. Site -urile existente beneficiază de așteptarea beta -ului, cu excepția cazului în care sunt necesare noi caracteristici specifice.
Când sosirea Beta, veți obține setul de caracteristici complet, plus încrederea din testarea minuțioasă. Lansarea oficială urmează la scurt timp după aceea, oferindu -vă o bază solidă pentru proiectele viitoare.
Sunteți gata să încercați Divi 5? Iată cum să începi
Aceste caracteristici exclusive Divi 5 funcționează împreună pentru a crea ceva diferit. În loc să vă luptați cu constructorul dvs. pentru proiecte consistente, configurați sisteme care se mențin. În loc să reconstruiți aceleași stiluri în mod repetat, creați o dată și reutilizați peste tot - și acesta este doar începutul!
Așadar, mergeți înaintea curbei astăzi, construind un nou site web folosind Divi 5. Este disponibil pentru toți membrii Divi gratuit. Doar îndreptați -vă spre zona contului dvs. și apucați o copie.
Odată ce WordPress este instalat, încărcați DIVI 5, deoarece ați încărca o temă normală: aspect> Teme> Adăugare nouă> Temă de încărcare. Activați tema, conectați -vă cu acreditările dvs. și construiți -vă! Prima ta construcție vă va arăta de ce reconstruim totul de la zero.
Nu uitați: utilizați DIVI 5 numai pentru site -urile noi chiar acum. Nu recomandăm migrarea site -urilor existente în faza alfa.