Tot ce trebuie să știți despre punctele de întrerupere personalizabile ale Divi 5

Pregătiți -vă pentru a îmbunătăți drastic modul în care construiți site -uri web. Divi 5 are o nouă caracteristică interesantă, puncte de întrerupere personalizabile, ceea ce vă oferă un control incredibil asupra receptivității site -ului dvs. Cu noile puncte de întrerupere personalizabile ale Divi 5, puteți crea o experiență perfectă pe toate dispozitivele. Indiferent dacă proiectați pentru un afișaj desktop masiv sau cel mai mic ecran mobil, Divi 5 vă ajută să vă asigurați că site-ul dvs. web arată perfect pixel de fiecare dată.

În această postare, vom acoperi tot ce trebuie să știți despre această nouă caracteristică și vă vom arăta cum să o utilizați!

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

Descărcați Divi 5 cu puncte de întrerupere personalizabile

Cu puncte de întrerupere personalizabile, acum puteți regla receptivitatea site-ului dvs. pentru a se potrivi mai bine cu diferite dimensiuni ale ecranului. Indiferent dacă proiectați pentru desktop-uri ultra-lățime sau ecrane mobile largi, Divi 5 îți pune controlul în mâinile tale.

Pot folosi deja Divi 5 pe site -ul meu?

Puteți utiliza Divi 5 pe site -ul dvs. web, dar disponibilitatea sa depinde de cazul dvs. de utilizare specific. Divi 5 se află în prezent în faza publică alfa, ceea ce înseamnă că este încă dezvoltat și rafinat activ. Deși nu este încă recomandat pentru toate mediile de producție, există scenarii specifice în care puteți începe să îl utilizați fără probleme.

Folosiți DIVI 5 pe site -urile locale și de stadializare

Divi 5 este disponibil în prezent pentru mediile locale și de stadializare, permițând utilizatorilor să -și testeze în siguranță noile caracteristici fără a afecta site -urile lor live. Întrucât Divi 5 este încă în faza Alfa publică, această abordare asigură că utilizatorii pot experimenta cu îmbunătățiri ale Divi 5, să raporteze erori și să ofere feedback, menținând în același timp stabilitatea site -urilor lor de producție.

Puteți utiliza în siguranță Divi 5 pe site -urile noi de producție

Divi 5 este stabil și gata să lanseze site-uri web noi. Dacă începeți de la zero, puteți profita pe deplin de performanțele rapide, cadrul modular și tehnologia de rezistență la viitor, fără a vă face griji cu privire la problemele de compatibilitate înapoi. Cu toate acestea, o fază de testare minuțioasă este esențială pentru site-urile existente care se bazează pe integrări extinse ale terților înainte de migrare. În acest moment, încă nu recomandăm convertirea site -urilor web existente în DIVI 5.

Înțelegerea punctelor de întrerupere personalizabile ale Divi

Punctele de întrerupere sunt un aspect fundamental al designului receptiv. Acestea acționează ca praguri în care conținutul site -ului dvs. se reorganizează pentru a asigura o experiență optimă a utilizatorului, indiferent dacă cineva navighează pe un smartphone, tabletă sau desktop.

Punctele de întrerupere ale Divi 5 au fost îmbunătățite semnificativ, oferind mai multă flexibilitate și control decât versiunile anterioare ale Divi. Personalizarea a până la șapte puncte de întrerupere vă permite să reglați receptivitatea site-ului dvs. pentru a găzdui o gamă mai largă de dispozitive și dimensiuni de ecran.

Ce este un punct de întrerupere?

Un punct de întrerupere este o lățime specifică a ecranului la care designul site -ului dvs. web se adaptează pentru a oferi o experiență optimă de vizualizare pe diferite dispozitive. Punctele de întrerupere vă ajută să vă asigurați că conținutul dvs. rămâne lizibil, atrăgător vizual și ușor de navigat, indiferent de dimensiunea ecranului.

Site -urile responsive sunt proiectate folosind interogări media CSS, care permit aplicarea diferitelor stiluri atunci când un ecran ajunge la o anumită lățime. Când dimensiunea ecranului unui vizitator traversează un punct de întrerupere definit, site -ul web își ajustează automat aspectul, fonturile, distanțarea sau alte elemente de proiectare pentru a menține capacitatea de utilizare.

Odată cu introducerea mai multor puncte de întrerupere în Divi 5, puteți limita nevoia de interogări media CSS pentru a defini punctele de întrerupere pentru alte dispozitive.

Câte puncte de întrerupere ar trebui să folosesc?

Numărul de puncte de întrerupere depinde de utilizarea dispozitivului publicului. Utilizatorii accesează site-urile web pe diverse dimensiuni de ecran, de la smartphone-uri mici la ecrane desktop ultra-larg. În mod tradițional, designerii web au folosit trei puncte de întrerupere standard - desktop, tabletă și mobil - dar Divi 5 extinde această capacitate, permițând până la 7 puncte de întrerupere personalizabile pentru o mai mare flexibilitate.

Activarea mai multor puncte de întrerupere va încetini site -ul meu?

Nu, activarea mai multor puncte de întrerupere din Divi 5 nu vă va încetini site -urile. Spre deosebire de metodele mai vechi de gestionare a designului receptiv, noul cadru al Divi 5 este optimizat pentru performanță, asigurându -se că punctele de întrerupere suplimentare nu adaugă încărcare inutilă pe site -ul dvs.

Sunt activate punctele de întrerupere pe un site sau la nivel de pagină?

Punctele de întrerupere din Divi 5 sunt activate și aplicate la nivel de site, nu pe bază de pagină. După ce activați și personalizați punctele de întrerupere, acestea vor afecta întregul site web, asigurând un design consistent și receptiv pe toate paginile. Orice modificare pe care o faceți la punctele de întrerupere va ajusta în mod universal modul în care site -ul dvs. răspunde la diferite dimensiuni ale ecranului, mai degrabă decât să fie limitată la paginile individuale.

Cum funcționează punctele de întrerupere personalizabile în divi

Sistemul extrem de flexibil și intuitiv al Divi 5 este perfect pentru gestionarea punctelor de întrerupere, oferindu -vă un control mai mare asupra designului receptiv al site -ului dvs. web. Spre deosebire de versiunile anterioare, Divi 5 vă permite să personalizați până la 7 puncte de întrerupere, asigurându -vă că site -ul dvs. arată perfect pe fiecare dispozitiv. Acest sistem este conceput pentru a fi ușor de utilizat, oferind opțiuni avansate pentru cei care au nevoie de ele.

Unde să găsiți puncte de întrerupere

În Divi 5, punctele de întrerupere sunt integrate în setările paginii dvs., ceea ce le face ușor de localizat și personalizat. Le puteți accesa direct în cadrul constructorului vizual, asigurând un flux de lucru simplificat.

Cum se activează punctele de întrerupere

Deschideți pagina pe care doriți să o editați și activați constructorul vizual făcând clic pe Editare cu Divi .

Faceți clic pe meniul Elipsis (trei puncte) situat în bara principală de activități a constructorului Visual.

În cadrul setărilor, veți găsi o serie de comutatoare de comutare care vă permit să activați sau să dezactivați punctele de întrerupere, după cum este necesar.

Odată activat, fiecare punct de întrerupere va fi vizibil în bara de activități, permițându -vă să faceți modificări pe tot parcursul proiectării dvs. fără a face clic pe controale receptive în rânduri sau module individuale pentru a ajusta setările.

Ar trebui să utilizați puncte de întrerupere standard sau ale dvs.?

Punctele de întrerupere standard ale Divi 5 sunt concepute pentru a acoperi cele mai comune dimensiuni de ecran, inclusiv telefoane, tablete și desktop. Aceste puncte de întrerupere predefinite sunt mai mult decât suficiente pentru mulți designeri, deoarece se ocupă de majoritatea utilizatorilor și dispozitivelor.

Cu toate acestea, există scenarii în care crearea de puncte de întrerupere personalizate poate fi benefică. De exemplu, dacă doriți să găzduiți monitoare ultra-larg, smartphone-uri pliabile sau tablete mai mici, punctele de întrerupere personalizate vă pot ajuta să vă modificați designul pentru aceste cazuri de utilizare.

Utilizarea punctelor de întrerupere personalizate în Divi 5

Personalizarea punctelor de întrerupere responsive este utilă pentru abordarea problemelor de proiectare sau a problemelor de afișare a conținutului pe dispozitive mai puțin comune sau rezoluții de ecran. De asemenea, pot ajuta la îmbunătățirea performanței site -ului, încărcând doar stilurile necesare pentru o anumită dimensiune a ecranului, reducând timpul de încărcare a paginii.

Din fericire, Divi 5 face incredibil de ușor să personalizați aceste puncte de întrerupere receptive cu câteva clicuri.

Cu setările dispozitivului receptiv deschis, setați punctul de întrerupere a telefonului pe lățimea dorită, apoi repetați pașii pentru alte dispozitive. Deoarece dorim să facem site -ul accesibil pentru dispozitive mai mici, vom seta numărul la 360px pentru telefoane. După ce ați adăugat pixelii doriți, faceți clic pe butonul de salvare pentru a continua.

Divi 5 vă va anunța că sunteți pe cale să ajustați punctele de întrerupere ale site -ului dvs. web. Faceți clic pe butonul Actualizare pentru a confirma modificarea.

Vom adăuga următoarele puncte de întrerupere pentru dimensiunile rămase ale ecranului:

Aceste puncte de întrerupere acoperă o serie de dispozitive pentru a vă asigura că site -ul dvs. web acoperă cele mai multe dimensiuni ale ecranului și cazuri de utilizare:

• Telefon: 767px acoperă majoritatea dimensiunilor ecranului smartphone -ului, inclusiv modele mai vechi precum iPhone 8 sau Samsung G7.
• Telefon larg: 860px acoperă majoritatea ecranelor telefonului în modul peisaj, inclusiv iPhone 14 Pro (și mai sus) și dispozitive Android moderne.
• Tabletă: 980px este bun pentru majoritatea ecranelor tablete în modul portret, inclusiv pentru toate iPad -urile.
• Tabletă largă: 1024px este standard pentru vizualizarea peisajului în majoritatea iPad -urilor și tabletelor Samsung.
• Widescreen: 1280px este o lățime bună pentru majoritatea laptopurilor mai mici (Windows sau MacOS), inclusiv MacBook Air, MacBook Pro 13 ″ și dispozitive Windows comparabile.
• Ultrawide: 2560px acoperă ecrane desktop mai mari, cum ar fi MacBook Pro 15 ″ și 16 ″ laptopuri, iMacs și monitoare standard de înaltă definiție.

Personalizarea designului dvs. receptiv în presetări

Unul dintre cele mai puternice aspecte ale Divi 5 este modul în care punctele sale de întrerupere personalizabile se integrează perfect cu presetările. Acest lucru vă permite să creați un design cu adevărat receptiv pe întregul site web cu un efort minim. Un exemplu perfect este modificarea presetării H1 a unui site de pornire pentru a se asigura că toate H1 -urile arată perfect la fiecare dimensiune a ecranului.

Începeți făcând clic pe oriunde în secțiunea H1 în secțiunea Hero pentru a -și aduce setările.

În continuare, faceți clic pe câmpul presetări cu titlu din antetul modulului.

Va apărea o listă prestabilită. Localizați presetarea care are un semn de control albastru lângă ea.

Treceți peste presetarea activă pentru a -și dezvălui setările. Faceți clic pe pictograma Setări pentru a o edita.

Faceți clic pe fila Design și apoi reglați dimensiunea textului la dimensiunea dorită.

Păstrați setările presetate deschise și faceți clic pe următoarea dimensiune a ecranului din bara de activități Divi 5 pentru a regla dimensiunea titlului.

Repetați pașii de mai sus pentru a regla presetările pentru titlu pentru dimensiunile rămase ale ecranului. După ce ați finalizat acest lucru, faceți clic pe butonul Salvare Presetare .

Când schimbați punctele de întrerupere, modificările de mărime vor fi reflectate în presetarea de rubrică.

Editare receptivă în Divi 4 vs Divi 5

Divi a fost întotdeauna un lider în proiectarea receptivă, dar Divi 5 îl duce la un nivel cu totul nou. În timp ce Divi 4 a oferit o bază solidă pentru crearea de site -uri web responsive, Divi 5 aduce caracteristici care fac editarea receptivă mai intuitivă, flexibilă și puternică ca niciodată. Iată o privire mai atentă asupra modului în care Divi 5 se îmbunătățește cu privire la capacitățile Divi 4.

Tranziția fără efort între punctele de întrerupere

În Divi 4, comutarea dintre punctele de întrerupere este destul de simplă, dar implică mai mult timp și nu este la fel de lină ca tranziția pe care o puteți găsi în Divi 5.

Divi 5 îmbunătățește acest flux de lucru cu o interfață mai ușoară, mai intuitivă. Acum, puteți tranziția instantaneu între punctele de întrerupere, previzualizând designul dvs. pe măsură ce vă ajustați, fără întârziere. Această nouă versiune a DIVI vă permite să faceți modificări de design pe zbor în funcție de punctul de întrerupere pe care îl vizionați. Nu mai există comutarea între moduri sau comutarea constantă. Această experiență perfectă economisește timp și asigură un design mai coerent și mai lustruit în fiecare punct de întrerupere.

De la 3 la 7 puncte de întrerupere

Divi 4 acceptă 3 puncte de întrerupere diferite; Acestea pot fi găsite și în Divi 5.

• Desktop: 981px și mai sus
• Tabletă: <980px
• Mobile: <767px

În timp ce aceste puncte de întrerupere acoperă elementele de bază, uneori nu se potrivesc atunci când se adaptează varietatea de dispozitive și dimensiuni de ecran utilizate de publicul modern. Proiectanții pot avea nevoie uneori de interogări media CSS pentru a viza diferite dimensiuni ale ecranului, în special pentru monitoare ultra-la nivel larg sau dispozitive mobile mai mici.

Divi 5 a abordat această limitare prin extinderea numărului de puncte de întrerupere la 7 opțiuni personalizabile, ceea ce face mai ușor să vizăm un număr mai mare de dispozitive.

• Telefon: <767px
• Telefon larg: < 860px
• Tabletă: <980px
• Tabletă largă: < 1024px
• Desktop: > 981px
• WIDECREEN: > 1280px
• Ultra lat: > 1440px

Această flexibilitate sporită vă permite să vă reglați designul pentru o gamă mai largă de dispozitive, asigurându-vă că site-ul dvs. arată perfect pe toate, de la smartphone-uri compacte până la monitoare mari, de înaltă rezoluție. De exemplu, puteți acum să creați un punct de întrerupere dedicat în modul peisaj sau să vă optimizați site-ul pentru ecrane ultra-larg utilizate în setări profesionale.

Scalarea pânzei pentru un control complet

Una dintre cele mai interesante caracteristici ale Divi 5 este scalarea Canvas, care oferă proiectanților un control fără precedent asupra modului în care site -ul lor web apare la diferite rezoluții.

Acesta este cum arată scalarea pânzei în Divi 4:

Funcția de redimensionare a pânzei Divi 5 face ca întreaga experiență să fie și mai intuitivă. Cu doar câteva clicuri, puteți scala pânza de design pentru a se potrivi cu rezoluții specifice de ecran, arătând exact modul în care site -ul dvs. va apărea pe diferite dispozitive. Această caracteristică este utilă pentru testarea ecranelor mobile mai mici sau a monitoarelor desktop ultra-larg, asigurându-vă că designul dvs. este fără cusur-în afară de placa.

Divi 5 este inclus pentru totdeauna în calitatea de membru Divi Lifetime

Punctele de întrerupere personalizabile ale Divi 5 Împuternicizează proiectanții să creeze site -uri web responsive cu o precizie mai mare. Indiferent dacă rafinați un aspect existent sau construiți un site de la zero, aceste instrumente noi vă oferă flexibilitatea pentru a crea experiențe perfecte pentru pixeli pentru fiecare dimensiune a ecranului.

Una dintre cele mai bune părți din Divi 5 este că va fi inclusă pentru totdeauna în calitatea de membru Divi (fără costuri suplimentare). Dacă faceți upgrade la un membru Divi Lifetime astăzi, veți obține acces (și actualizări) la DIVI 5 pentru o taxă unică și beneficiați de acest produs în evoluție pentru anii următori.