Cunoașterea interfeței Divi 5: 8 modificări și îmbunătățiri

Divi 5 introduce o serie de îmbunătățiri nu numai în culise, ci și în modul în care interacționați cu Visual Builder. În timp ce interfața generală poate fi familiară utilizatorilor de lungă durată, au fost aduse câteva îmbunătățiri pentru a îmbunătăți eficiența și a face construirea site-urilor web mai rapidă și mai intuitivă.

În această postare, vom explora principalele modificări și îmbunătățiri ale interfeței Divi 5, care sunt concepute pentru a vă simplifica fluxul de lucru și pentru a vă îmbunătăți experiența de proiectare.

Aflați mai multe despre Divi 5 Public Alpha și despre cum să îl descărcați.

Descărcați Divi 5 Public Alpha

Schimbări cheie în interfața Divi 5

Un singur clic pentru a edita

Divi 5 introduce o metodă de interacțiune simplificată: editarea cu un singur clic . În Divi 4, a trebuit să faceți clic cu atenție pe pictogramele mici din modul pentru a accesa setările acestuia. Uneori, acele pictograme erau suprapuse sau greu de găsit, ceea ce duce la frustrare și la pași inutile.

Cum funcționează:
În loc să faceți clic pe pictograme mici, specifice, acum puteți face clic oriunde pe un modul pentru a accesa setările acestuia. Odată ce faceți clic, se deschide imediat panoul de setări, eliminând nevoia de a găsi anumite pictograme sau meniuri.

Beneficii:
Acest lucru reduce numărul de clicuri necesare pentru a accesa setările, economisind timp și simplificând procesul de proiectare, mai ales atunci când lucrați cu mai multe module pe o pagină.

Exemplu real:
Imaginează-ți că lucrezi la o pagină de pornire complexă cu multe module de text și imagine. În Divi 4, va trebui să faceți clic pe o pictogramă roată mică de pe fiecare modul pentru a deschide panoul de setări. Cu Divi 5, pur și simplu faceți clic pe orice bloc de text sau imagine pentru a o edita direct, accelerând procesul și făcându-l să se simtă mai fluid și mai intuitiv.

Faceți clic dreapta pentru controale

În Divi 5, abilitatea de a face clic dreapta pe orice modul pentru a afișa un meniu contextual este un schimbător de joc pentru un design eficient. În loc să navigați prin mai multe meniuri sau straturi, acum puteți accesa o gamă largă de setări instantaneu.

Cum funcționează:
Faceți clic dreapta pe orice modul sau secțiune pentru a deschide un meniu contextual personalizat. Acest meniu oferă opțiuni pentru copierea stilurilor modulelor, ajustarea setărilor, salvarea modulului în bibliotecă și multe altele.

Beneficii:
Acest lucru accelerează semnificativ sarcini precum duplicarea stilurilor între module sau efectuarea de ajustări rapide fără a căuta setările corecte în bara laterală.

Exemplu real:
Să presupunem că construiți o pagină de portofoliu și doriți să aplicați același stil mai multor galerii de imagini. În Divi 4, ar trebui să ajustați manual setările pentru fiecare galerie. În Divi 5, puteți face clic dreapta pe un modul de galerie, puteți copia setările de design ale acestuia și apoi faceți clic dreapta pe o altă galerie pentru a lipi stilurile. Acest lucru economisește timp și asigură consecvența modelelor tale.

Andocare cu mai multe panouri și panouri cu file

Una dintre cele mai puternice caracteristici din Divi 5 este introducerea de andocare cu mai multe panouri și panouri cu file . În Divi 4, gestionarea proiectelor complexe poate fi copleșitoare. Configurarea cu un singur panou a însemnat comutarea constantă între diferite setări, aglomerarea spațiului de lucru și îngreunarea sarcinilor multiple.

Cum funcționează:
În Divi 5, acum puteți deschide mai multe panouri de setări simultan și le puteți andoca unul lângă altul. Acest lucru este util în special atunci când lucrați la diferite părți ale paginii și aveți nevoie de acces rapid la mai multe setări simultan. De asemenea, puteți organiza panourile în file, facilitând comutarea între ele fără a pierde evidența muncii dvs.

Beneficii:
Această caracteristică este perfectă pentru multitasking, deoarece vă permite să mențineți diferite panouri de setări deschise și pregătite pentru ajustări, fără a fi nevoie să închideți unul pentru a deschide altul.

Exemplu real:
Imaginează-ți un scenariu în care proiectezi o pagină de destinație cu setări complexe. Ajustezi designul zonei eroului și al CTA. Înainte de Divi 5, ar trebui să comutați în continuare între setările constructorului și panoul de straturi. Acum, le puteți face clic și trage unul lângă altul, oferind o modalitate rapidă de a vă proiecta pagina mai eficient.

Modul lumină și întuneric

Divi 5 include adăugarea mult așteptată a modurilor de lumină și întuneric , permițând utilizatorilor să comute între teme în funcție de mediul lor. Această caracteristică nu este doar despre estetică, ci este despre îmbunătățirea confortului și a utilizabilității în timpul sesiunilor lungi de proiectare.

Cum funcționează:
Puteți comuta între modul lumină și modul întunecat din setările constructorului. Acest lucru vă permite să lucrați în tema care se potrivește cel mai bine mediului dvs., reducând oboseala ochilor.

Beneficii:
Designerii care lucrează până târziu în noapte sau în medii cu lumină scăzută pot trece acum la modul întunecat, care reduce strălucirea și face experiența de editare mai confortabilă. În schimb, utilizatorii care preferă un spațiu de lucru mai luminos pot rămâne la modul de lumină.

Exemplu real:
Dacă ați lucrat vreodată la un proiect noaptea târziu, știți cât de dure pot fi interfețele luminoase. În Divi 5, puteți trece la modul întunecat pentru a vă concentra pe design fără a vă răni ochii. Este o schimbare simplă, dar face o diferență uriașă în confort și productivitate.

Îmbunătățiri de editare responsive, Hover și Sticky

În versiunile anterioare ale Divi, editarea receptivă , efectele de trecere cu mouse-ul sau poziționarea lipicioasă necesitau activarea acestor funcții la nivel de opțiune. Divi 5 simplifică acest proces făcând aceste setări mai accesibile și mai ușor de implementat.

Cum funcționează:
Aceste funcții sunt acum disponibile direct în panoul de setări, permițându-vă să faceți ajustări mai rapid, fără a fi nevoie să le activați mai întâi. Acum puteți aplica cu ușurință setări de design receptiv, efecte de hover sau poziționare lipicioasă fără pași suplimentari. Utilizatorii pot comuta între stările implicite, hover, sticky și responsive fără a fi nevoie să deschidă comenzi separate sau să activeze moduri individuale.

Beneficii:
Acest lucru economisește timp atunci când lucrați cu efecte de design avansate, facilitând aplicarea setărilor de răspuns, efectele de hover sau poziționarea lipicioasă din mers.

Exemplu real:
Să presupunem că creați un buton de îndemn cu efect de hover. În Divi 4, mai întâi ar trebui să activați setările de trecere cu mouse-ul înainte de a aplica efectul. În Divi 5, opțiunile de trecere cu mouse-ul sunt integrate chiar în panoul de setări, astfel încât să puteți adăuga efecte imediat, simplificând procesul de proiectare.

Panoul de setări Breadcrumbs

Navigarea prin setările imbricate ale unui modul din Divi 4 a lăsat adesea utilizatorii confuzi cu privire la locul în care se aflau. Fără o cale clară înapoi, era ușor să te pierzi în timp ce făceai ajustări, mai ales în modelele mai complexe. Divi 5 introduce o nouă caracteristică: breadcrumbs în panoul de setări. Această adăugare mică, dar utilă, face mult mai ușoară navigarea prin diferite straturi de setări, mai ales atunci când lucrați cu module complexe.

Cum funcționează:
Pesmeturile apar în partea de sus a panoului de setări, arătându-vă ierarhia setărilor pe care le vizualizați în prezent. Puteți sări rapid înapoi la nivelurile anterioare făcând clic pe link-urile de breadcrumb, permițând o navigare mai rapidă fără a vă pierde locul.

Beneficii:
Breadcrumb-urile fac navigarea prin setările complexe ale modulelor mai rapidă și mai intuitivă, reducând timpul petrecut înapoi sau căutând anumite opțiuni. Nu este nevoie să închideți sau să redeschideți diferite setări. Pur și simplu faceți clic pe zona pe care doriți să o editați, iar Divi va deschide rapid modulul pe care doriți să îl editați fără probleme.

Exemplu real:
Imaginați-vă că editați un modul de tabel de prețuri cu mai multe niveluri și setări pentru fiecare. În Divi 4, s-ar putea să vă treziți făcând clic pe mai multe panouri și pierdeți evidența unde vă aflați. Cu Divi 5, pesmeturile vă ghidează înapoi prin setări, făcând mai ușor să treceți între diferitele niveluri de preț și să faceți rapid ajustări.

Scalare canvas

Capacitatea de a scala pânza este una dintre cele mai utile completări ale Divi 5 pentru utilizatorii care lucrează la designuri receptive. În Divi 4, proiectarea pentru diferite dimensiuni de ecran ar putea fi greoaie. Utilizatorii trebuiau adesea să-și redimensioneze fereastra browserului sau să schimbe manual vizualizările pentru a vedea cum ar arăta designul lor pe dispozitivele mai mici, adăugând pași inutile procesului.

Cum funcționează:
Divi 5 vă permite să scalați pânza direct în builder. Puteți ajusta dimensiunea pânzei pentru a vedea cum arată designul dvs. la diferite puncte de întrerupere, fără a fi nevoie să redimensionați fereastra browserului.

Cu scalarea pânzei, puteți comuta rapid între vizualizările desktop, tabletă și mobil, ajustându-vă designul în timp real pentru a vă asigura că arată perfect pe fiecare ecran. Acest lucru vă economisește timp și elimină presupunerile, făcând designul receptiv mai rapid și mai intuitiv.

Beneficii:
Acest lucru este util în special pentru proiectarea machetelor receptive, deoarece vă permite să faceți ajustări în timp real fără a fi nevoie să comutați constant între dispozitive sau puncte de întrerupere. Cu capacitatea de a mări și micșora, utilizatorii au un control mai bun asupra elementelor de design sau au o privire de ansamblu asupra întregii pagini web instantaneu.

Exemplu real:
Dacă proiectați o pagină de pornire care trebuie să arate bine atât pe desktop, cât și pe mobil, puteți scala panza în Divi 5 pentru a previzualiza cum va arăta designul dvs. pe un dispozitiv mobil fără a fi nevoie să ajustați fereastra browserului sau să părăsiți generatorul. Acest lucru face ca designul receptiv să fie mai rapid și mai precis.

Panouri andocate mai mici și fără suprapunere

Una dintre cele mai notabile îmbunătățiri ale lui Divi 5 este introducerea unor panouri mai mici, andocate , concepute pentru a elimina întreruperea constantă cauzată de ferestrele modale. Anterior, utilizatorii trebuiau să se ocupe de modalii care se deschideau și se închideau frecvent, deseori stând în cale și necesitând ajustări pentru a vedea aspectul complet. Divi 5 rezolvă acest lucru cu o abordare mai curată, mai raționalizată.

Cum funcționează:

Noile panouri, mai mici, andocate din Divi 5 oferă o modalitate mai eficientă de a interacționa cu Visual Builder. În loc de modale mari, plutitoare, care vă împiedică vederea, Divi 5 introduce un sistem compact de panouri andocate. Panourile sunt ancorate de părțile laterale ale interfeței constructorului, asigurându-se că nu interferează cu spațiul dvs. de lucru.

Beneficii:

Prin utilizarea panourilor andocate, utilizatorii previn întreruperile constante ale fluxului lor de lucru. Setările sunt întotdeauna vizibile, permițându-vă să faceți rapid modificări fără clicuri sau navigare inutile. Nu numai că, panourile andocate oferă un spațiu de lucru mai curat și mai organizat. Puteți gestiona mai multe sarcini, puteți andoca mai multe panouri simultan și puteți comuta cu ușurință între diferite instrumente și setări pentru a vă face un designer mai eficient.

Exemplu real:

Imaginați-vă că lucrați la un aspect complex pentru un magazin alimentar. Sarcina dvs. implică schimbarea mai multor secțiuni, ajustarea culorilor, adăugarea de animații și asigurarea faptului că designul este receptiv. Prin nemulțumirea spațiului dvs. de lucru, vă puteți concentra mai mult pe sarcini, mai degrabă decât închiderea modalelor intruzive în timp ce lucrați.

Lean, Mean și Animație gratuită

Divi 5 este proiectat să fie slab, rău și fără animație, eliminând orice lucru care nu beneficiază direct utilizatorul. În loc să fie împovărat de caracteristici inutile sau de efecte spectaculoase, Divi 5 se concentrează exclusiv pe performanță și utilizare.

Cum funcționează:

Divi 5 a fost reconstruit de la zero, concentrându-se pe eliminarea codului umflat și învechit. Rezultatul este un generator mai rapid și mai eficient, care oferă performanțe mai fluide, reducând în același timp timpii de încărcare și resursele serverului. În loc să se bazeze pe animații care distrag atenția, se pune accent pe a permite conținutului să fie în centrul atenției. Datorită acestei abordări, Visual Builder se încarcă mai repede și oferă o experiență de utilizator curată și profesională.

Beneficii:

Interfața Divi 5 este intuitivă, receptivă și oferă doar instrumente necesare pentru construirea și personalizarea site-urilor web. Visual Builder este acolo pentru a ajuta designerii să creeze site-uri web uimitoare, nu pentru a concura cu conținutul pe care îl creează.

Exemplu real:

Imaginează-ți că ești însărcinat cu construirea unui site web pentru un restaurant local. Clientul nu are un buget mare, așa că trebuie să fii mai eficient pentru a obține un profit bun. Folosind Divi 5 pentru a vă construi site-ul, veți economisi timp folosind un constructor mai rapid și mai eficient, care vă permite să proiectați site-ul fără animații care distrag atenția sau o experiență de construcție lentă.

Viteză și performanță

Divi 5 a suferit o revizuire semnificativă a performanței, rezultând o experiență Visual Builder mult mai rapidă și mai fluidă decât Divi 4. Această experiență îmbunătățită aduce timpi de încărcare mai rapizi, viteze de redare îmbunătățite și elimină animațiile inutile din builder care o încetinesc.

Cum funcționează:

Arhitectura de bază a lui Divi 5 a fost complet reproiectată printr-o revizuire completă a cadrului pentru a optimiza performanța și capacitatea de răspuns. Realizează acest lucru prin reducerea încărcării JavaScript, ceea ce înseamnă că sunt încărcate numai scripturile necesare. Divi 5 nu se mai bazează pe shortcodes; mai degrabă, se bazează pe blocuri pentru a face lucrurile mai repede.

Beneficii:

Cu un nou cadru implementat, Visual Builder se încarcă aproape instantaneu, eliminând încărcarea dublă, îmbunătățind în același timp redarea. Modificările la module, rânduri sau secțiuni apar imediat. Visual Builder reacționează, de asemenea, mai rapid la comutarea între vizualizările receptive, gestionează mai bine aspectele complexe și permite utilizatorilor să vadă ajustările de design în timp real.

Exemplu real:

Imaginați-vă că editați o pagină de destinație lungă cu animații și cod complexe. În Divi 4, s-ar putea să întâmpinați întârziere atunci când faceți modificări de design, mai ales când comutați între modurile de vizualizare receptivă sau adăugați module noi. În Divi 5, procesul este mult mai fluid și mai receptiv, permițându-vă să vă concentrați asupra designului fără întreruperi.

Comparație cu Divi 4

În timp ce Divi 5 introduce diverse îmbunătățiri ale interfeței, este important să vedem cum se compară aceste modificări cu versiunea anterioară. Să ne uităm la câteva dintre îmbunătățirile cheie din Divi 5 față de Divi 4:

Editare cu un singur clic vs editare bazată pe pictograme:

În Divi 4, trebuia să dai clic pe pictograme mici pentru a accesa setările modulelor, care puteau fi greu de găsit sau suprapuse de alte elemente.

Divi 5 simplifică acest proces prin editarea cu un singur clic. Puteți face clic oriunde pe modul pentru a accesa setările acestuia.

Meniuri cu clic dreapta vs opțiuni stratificate:

Divi 4 le-a cerut utilizatorilor să navigheze prin mai multe straturi de setări pentru a găsi controalele de care aveau nevoie.

În Divi 5, meniul cu clic dreapta permite accesul instantaneu la setări, îmbunătățind eficiența și accelerând procesul de proiectare.

Panouri cu file și andocare cu mai multe panouri:

Divi 4 avea o configurație cu un singur panou, ceea ce ar putea face greoaie lucrul cu mai multe setări.

Divi 5 introduce andocare cu mai multe panouri și panouri cu file, permițând utilizatorilor să efectueze mai multe sarcini și să gestioneze mai ușor proiectele complexe.

Modul de lumină și modul de întuneric:

Divi 4 oferă doar modul de lumină, în timp ce Divi 5 introduce atât moduri de lumină, cât și de întuneric, oferind un mediu de editare mai confortabil, bazat pe preferințele utilizatorului și condițiile de iluminare.

Scalare canvas pentru design receptiv:

În Divi 4, redimensionarea browserului a fost necesară pentru a previzualiza design-urile responsive. Divi 5 face acest proces mai eficient, permițându-vă să scalați pânza direct în constructor, făcând ajustări ale designului receptiv mai rapide și mai precise.

Editare responsive, Hover și Sticky:

În Divi 4, aceste moduri trebuie să fie activate individual, necesitând mai mulți pași (și timp).

Divi 5 eficientizează aceste procese făcându-le disponibile fără a fi nevoie să le activeze la nivel de opțiune.

Panouri andocate mai mici și fără suprapunere

În Divi 4, modalele vor apărea oricând doriți să faceți ajustări la design, făcând interfața aglomerată, solicitând adesea utilizatorilor să le mute pentru a lucra la designul lor.

În Divi 5, panourile sunt andocate pe ambele părți ale paginii, ceea ce face mai ușor să vă concentrați asupra designului la care lucrați.

Interfață Lean, Mean și fără animație

În Divi 4, interfața este plină de animații ciudate care pot încetini Visual Builder. Acest lucru poate distrage atenția și poate elimina experiența de proiectare.

În Divi 5, acestea au fost toate îndepărtate pentru a dezvălui o interfață curată, rapidă, fără animații sau distrageri.

Performanță și viteză:

În Divi 4, Visual Builder este iconic, dar uneori se simte puțin lent, mai ales când comutați între modurile de vizualizare.

În Divi 5, viteza și receptivitatea Visual Builder-ului sunt mai rapide, redarea elementelor fiind o experiență mult mai rapidă și mai fluidă.

Cum influențează aceste schimbări fluxul de lucru

Modificările interfeței din Divi 5 sunt concepute pentru a vă simplifica fluxul de lucru și pentru a face procesul de proiectare mai eficient. Iată câteva exemple despre modul în care aceste îmbunătățiri se traduc în beneficii reale:

Editare mai rapidă cu comenzile cu un singur clic și clic dreapta:

Editarea cu un singur clic și meniul clic dreapta reduc drastic timpul petrecut navigând prin meniuri. De exemplu, dacă lucrați la o pagină cu mai multe module, acum puteți accesa rapid setările doar făcând clic dreapta sau făcând clic direct pe modul. Acest lucru înseamnă mai puțin timp petrecut căutând opțiuni și mai mult timp pentru proiectare.

Multitasking îmbunătățit cu panouri de andocare:

Andocarea cu mai multe panouri facilitează lucrul la mai multe setări simultan. De exemplu, puteți menține deschise setările de proiectare pentru un modul în timp ce ajustați altul, permițându-vă să gestionați eficient modelele complexe fără a comuta constant între panourile de setări.

Organizare mai bună cu panouri cu file:

Panourile cu file sunt deosebit de utile atunci când lucrați la proiecte mari cu mai multe elemente de design. Vă puteți organiza setările în file, ceea ce vă ajută să vă păstrați spațiul de lucru curat și minimizând nevoia de defilare sau comutare între opțiuni.

Editare confortabilă cu modul Light & Dark:

Comutarea între modul deschis și întunecat permite o experiență de editare mai confortabilă. Indiferent dacă lucrați într-un mediu luminos sau slab, Divi 5 se adaptează nevoilor dvs., reducând oboseala ochilor și îmbunătățind concentrarea în timpul sesiunilor lungi de design.

Design responsiv este mai ușor cu scalarea pânzei:

Scalarea pânzei este o economie de timp uriașă atunci când lucrați la machete receptive. În loc să redimensionați în mod constant fereastra browserului pentru a previzualiza design-urile în diferite puncte de întrerupere, puteți ajusta panza direct în constructor, facilitând crearea de site-uri web receptive care arată grozav pe orice dispozitiv.

Aceste schimbări, deși sunt subtile, fac o diferență semnificativă în modul în care interacționați cu Divi și, în cele din urmă, accelerează procesul general de proiectare.

Ce urmează…

Pe măsură ce încheiem această explorare a interfeței Divi 5, rămâneți la curent cu postarea de mâine, unde ne aprofundăm în îmbunătățirile performanței front-end ale Divi 5 . Vom explora modul în care cadrul Divi rescris reduce dramatic timpii de încărcare, îmbunătățește răspunsul serverului și optimizează experiența utilizatorului la nivel general.

Nu veți dori să ratați creșterea vitezei și a performanței care fac din Divi 5 un schimbător de jocuri pentru construirea de site-uri web extrem de rapide.

Pentru mulți utilizatori Divi 4, crearea de site-uri web frumoase implica uneori momente frustrante - clic pe pictograme minuscule, navigarea prin straturi de meniuri și jonglarea cu mai multe setări. Divi 5 schimbă toate astea. Cu accent pe viteză, simplitate și utilizare, introduce o serie de îmbunătățiri ale interfeței care vă vor face fluxul de lucru de proiectare mai fluid ca niciodată.

Explorează noua interfață Divi 5 și vezi cum transformă acele frustrări vechi într-o experiență mai rapidă și mai intuitivă!

Concluzie: Promisiunea unei experiențe de design mai bune

Schimbările interfeței lui Divi 5 sunt mai mult decât funcții noi. Sunt soluții pentru frustrările de zi cu zi cu care se confruntă mulți utilizatori în Divi 4. De exemplu, Divi 5 oferă o editare mai rapidă și mai intuitivă cu comenzi cu un singur clic și clic dreapta. În plus, spațiul de lucru este mai organizat și mai flexibil, cu panouri de andocare și pesmet. Drept urmare, Divi 5 este conceput pentru a vă face fluxul de lucru mai fluid și mai plăcut.

Cu adăugarea modului întunecat pentru o editare confortabilă în orice moment, Divi 5 vă asigură că puteți crea site-uri web uimitoare mai rapid și mai eficient decât oricând. În plus, scalarea pânzei pentru un design receptiv fără efort îmbunătățește și mai mult procesul de creare a site-ului web.

Descărcați Divi 5 Public Alpha

Ce urmează…

În următoarea noastră postare, ne vom uita îndeaproape la îmbunătățirile de performanță front-end ale lui Divi 5. Vom explora modul în care cadrul Divi rescris reduce dramatic timpul de încărcare și îmbunătățește răspunsul serverului. În plus, vom arăta cum Divi 5 optimizează experiența utilizatorului. Pregătește-te pentru o creștere a vitezei care va transforma modul în care construiești site-uri web cu Divi!