10 machete de grilă realizate cu rânduri cuibărite Divi 5 (descărcare gratuită)

Aspectele de grilă oferă un mod structurat, dar flexibil, de a organiza conținut, de a îmbunătăți experiența utilizatorului și de a asigura o reacție perfectă pe dispozitive. Odată cu lansarea Divi 5 Public Alpha, designerii web au un nou set de instrumente pentru a crea machete frumoase de grilă care împing granițele creative. Cu un constructor vizual complet reproiectat și noi caracteristici puternice, cum ar fi rânduri cuibărite, unități avansate și grupuri de module, puteți construi cu ușurință machete complexe stratificate și complexe.

În această postare, vom prezenta machete de grilă pe care le puteți construi cu ușurință cu Divi 5, de la grile de caracteristici simetrice la bloguri dinamice de zidărie și vitrine interactive de portofoliu. Indiferent dacă proiectați un portofoliu, un magazin de comerț electronic sau un site web corporativ, aceste machete vă vor inspira să vă ridicați desenele și să vă captivați publicul.

Să explorăm modul în care caracteristicile avansate ale Divi 5 fac posibile aceste machete creative în stil grile.

Divi 5 este gata să fie utilizat pe site -uri noi, dar nu recomandăm să convertiți site -urile existente în Divi 5 încă.

Caracteristici cheie Divi 5 pentru machete de grilă

Fundația reconstruită Divi 5 introduce caracteristici care fac ca crearea machetei de grilă să fie mai ușoară ca niciodată. Aceste instrumente permit proiectanților să creeze grile complexe, atrăgătoare vizual, cu precizie și eficiență, menținând totodată flexibilitate pe dispozitive. Mai jos, explorăm caracteristicile cheie Divi 5 care fac posibile machete frumoase de grilă.

Abonați -vă la canalul nostru YouTube

Rânduri cuibărite

Caracteristica cuipătoare a lui Divi 5 vă permite să plasați rânduri în rânduri, oferind o cuibilitate infinită pentru a crea structuri complexe de grilă cu o interfață intuitivă de drag-and-drop. Această funcționalitate simplifică proiectarea grilelor cu mai multe straturi, oferindu-vă un control precis asupra plasării modulului.

Indiferent dacă construiți o vitrină complexă de produse sau o grilă de portofoliu stratificată, Nexted Rows vă permite să organizați conținut mai inteligent, făcând machetele dvs. dinamice și implicate vizual.

Puncte de întrerupere personalizabile

Designul receptiv este esențial pentru site -urile moderne, iar punctele de întrerupere personalizabile ale Divi 5 facilitează asigurarea rețelelor dvs. să pară impecabile pe orice dispozitiv. Puteți utiliza șapte desktop, tablete și puncte de întrerupere mobile, permițând grilelor să se adapteze perfect la diverse dimensiuni ale ecranului.

Împerecheat cu scalarea pânzei, care oferă previzualizări în timp real ale machetei dvs. la diferite puncte de întrerupere din cadrul constructorului Visual, această caracteristică asigură că rețelele dvs. sunt optimizate pentru reacție, oferind o experiență consistentă a utilizatorului pe toate dispozitivele.

Grupuri de module

Grupurile de module simplifică procesul de proiectare și menținere a esteticii consistente ale rețelei. Grupând modulele împreună, puteți aplica stilul colectiv și reutilizarea acestor grupuri pe mai multe pagini, economisind timp și asigurați consistența proiectării.

Acest lucru este util în special pentru machete de grilă, cum ar fi postări de blog sau cărți de produse, unde elementele de design consistente - cum ar fi fonturile, culorile sau efectele hover - sunt esențiale pentru un aspect coerent pe întregul site.

Variabile de proiectare

Cu variabile de design, DIVI 5 oferă gestionarea centralizată a elementelor cheie de design, cum ar fi culori, fonturi, legături, tipografie și multe altele. Această caracteristică asigură uniformitatea pe aspectele grilei - și întregul site web - facilitând menținerea unei identități vizuale consistente. Stilurile sunt setate în managerul variabil și pot fi aplicate oriunde doriți

Trebuie să actualizați un stil de culoare sau font? Variabilele de proiectare vă permit să faceți modificări într -un singur loc, aplicându -le instantaneu pe toate secțiunile și paginile, eficientizarea fluxului de lucru și menținerea design -urilor lustruite.

Unități avansate

Unitățile avansate ale Divi 5 vă oferă un control granular asupra distanțării și dimensiunii cu opțiuni precum VW, VH, REM și EM. Aceste unități permit machete dinamice și sensibile ale rețelei care se extind perfect pe dispozitive. Puteți ajusta căptușeala, marjele sau dimensiunile elementelor cu managerul variabil. Unitățile avansate oferă flexibilitatea alinierii și a componentelor de rețea la scară precisă, asigurându -se că aspectele dvs. sunt funcționale și armonioase vizual.

Managementul atributelor

Gestionarea atributelor accelerează procesul de proiectare, permițându -vă să copiați, să lipiți și să resetați atributele pe elemente de proiectare. Această caracteristică este esențială pentru aplicarea stilurilor consistente, cum ar fi efectul de hover sau distanțarea, la mai multe module. Prin reducerea sarcinilor repetitive, gestionarea atributelor vă permite să vă concentrați pe creativitate, în timp ce accelerați dezvoltarea unor machete complexe de grilă.

Aceste caracteristici DIVI 5 funcționează împreună pentru a oferi o flexibilitate și eficiență inegalabile, ceea ce face mai ușor crearea unor machete de grilă uimitoare, receptive, care îmbunătățesc experiența utilizatorului și îți ridică design -urile web.

10 Exemple de aspect de rețea creativă în Divi 5

Aspectele de grilă sunt o piatră de temelie a designului web modern, iar cu Divi 5, construirea lor nu a fost niciodată mai ușoară. Indiferent dacă prezentați produse, portofolii, membri ai echipei sau întrebări frecvente, Divi 5 este capabil să construiască machete care sunt funcționale și uimitoare vizual. Să ne uităm la 10 exemple de machete de grilă pe care le puteți crea cu Divi 5.

1.. Grila cu caracteristică simetrică

Grilele de caracteristici simetrice oferă o modalitate excelentă de a prezenta produse, servicii sau articole de portofoliu curat și organizat. Acest stil de grilă este perfect pentru evidențierea conținutului structurat și este versatil în aplicarea sa. Acestea pot fi utilizate pentru site -uri de afaceri, portofolii și pagini de destinație, oferind un aspect lustruit care îi ghidează pe utilizatori prin informații fără efort.

În exemplul de mai jos, am construit o grilă cu patru coloane pentru a prezenta o afacere de apotecar. Putem obține un aspect profesionist, lustruit în câteva minute, folosind rânduri cuibărite, grupuri de module și gestionarea atributelor.

2. Grila de zidărie

O grilă de zidărie este un aspect dinamic, în stil Pinterest, care aranjează postări pe blog, articole de portofoliu sau chiar rețete de înălțimi variate într-o grilă vizuală, bine ambalată. Spre deosebire de grilele tradiționale cu înălțimi de rând fix, grilele de zidărie permit conținutul să curgă în mod natural, umplând lacune verticale pentru a crea un aspect organic fără probleme. Acest stil de grilă este perfect pentru site -urile web care prioritizează povestirea vizuală, cum ar fi blogurile, revistele sau portofoliile creative. Cu caracteristicile native ale Divi 5, crearea unei grile de zidărie elegante și receptive este intuitivă și eficientă.

În exemplul de mai jos, am combinat rândurile și grupurile de module cuibărite pentru a crea o grilă de zidărie pentru rețete, folosind comenzile rapide ale Divi pentru a duplica grupurile mai repede.

3. Grila de portofoliu interactivă

Un aspect interactiv al portofoliului oferă o modalitate captivantă de a vă prezenta munca. Puteți încorpora pop -up -uri Lightbox, efecte, butoane și multe altele pentru a permite utilizatorilor să vă exploreze conținutul. Acest stil de grilă este excelent pentru site -urile web care își propun să -și captiveze publicul cu munca vizuală, cum ar fi fotografia, designul sau ambele, oferind în același timp navigație și interactivitate fără probleme.

Cu caracteristicile avansate ale Divi 5, designerii pot crea rețele de portofoliu responsive, ușor de utilizat, care evidențiază eficient munca creativă.

4. Grila vitrinei produsului

O grilă de vitrină a produsului oferă o modalitate unică de a prezenta cei mai buni vânzători, produse prezentate sau produse noi pe care le introduceți în lume. Puteți crea un aspect structurat, atrăgător vizual, cu imagini, titluri, prețuri și butoane optimizate pentru magazinele de comerț electronic. Folosind un aspect al grilei, puteți crea un aspect curat, organizat, pentru a ușura utilizatorii să navigheze și să ia decizii de cumpărare.

Cu Divi 5, puteți utiliza funcții puternice pentru a crea machete sensibile, consistente de marcă, care determină implicarea și conversii.

5. Grila membrilor echipei

Grilele membre ale echipei vă permit să prezentați profilurile echipei cu imagini, nume, roluri și legături sociale. Acest stil de grilă creează o prezentare profesională și abordabilă, ceea ce o face ideală pentru site -urile web care evidențiază expertiza și personalitatea echipei lor. Grilele de echipă sunt perfecte pentru site-uri corporative, agenții sau non-profit, dar pot fi aplicate pe orice site în care trebuie să prezinte oamenii.

În exemplul de mai jos, folosim o grilă cu trei coloane cu rânduri cuibărite și aplicăm variabile de proiectare pentru a controla responsabilitatea dimensiunii fontului.

6. Grila de servicii

Un aspect al grilei este o modalitate excelentă de a prezenta serviciile unei companii. El evidențiază serviciile într -un format organizat, scanabil, ceea ce îl face ideal pentru site -urile web care trebuie să -și comunice propunerile de valoare. Perfect pentru agenții, freelanceri sau întreprinderi bazate pe servicii, rețeaua folosește caracteristicile avansate ale Divi 5 pentru a crea machete receptive și antrenante care determină anchete și conversii ale clienților.

În exemplul de mai jos, am folosit un rând cu patru coloane, am atribuit o formulă Calc () pentru distanțarea rândurilor și grupuri de module încorporate și rânduri cuibărite pentru a accelera procesul de proiectare.

7. Grila de programare a evenimentelor

Stilul de grilă a programului de evenimente este perfect pentru organizarea și prezentarea informațiilor sensibile la timp profesional și neclintit, ceea ce o face ideală pentru site-urile care găzduiesc evenimente precum conferințe, ateliere sau adunări comunitare. Caracteristicile Divi 5 vă permit să adăugați date, titluri și descrieri într -un format de grilă, ceea ce face ușor pentru vizitatori să găsească ceea ce își doresc.

Exemplul de mai jos prezintă un aspect cu trei coloane cu rânduri cuibărite pentru a afișa evenimente funcțional și estetic.

8. Grila de masă pentru prețuri

Divi 4 (și Divi 5) vin cu un modul de prețuri, dar este limitat la prețuri, un buton și puncte de glonț. Pentru cei care doresc să se extindă pe funcționalitatea autohtonă a Divi și să construiască o grilă de prețuri pentru nevoile lor, Divi 5 oferă o modalitate de a o face. Puteți crea o grilă de preț care să vă afișează uimitor conținutul dvs. folosind rânduri cuibărite, grupuri de module și gestionarea atributelor.

De exemplu, puteți crea un aspect în trei coloane care oferă prețuri, caracteristici și mai multe butoane, fără a fi nevoie să se conformeze limitărilor modulului de prețuri încorporat. Puteți regla setările receptive pentru ecrane mai mici și apoi puteți crea o presetare a grupului de opțiuni pentru coloane de 50% lățime, asigurându -vă că coloanele dvs. se aliniază perfect pe tabletă și pe mobil.

9. Întrebări frecvente Grila acordeon

Dacă aveți o secțiune de întrebări frecvente pe site -ul dvs. web poate ajuta utilizatorii să acceseze o listă de întrebări frecvente, oferindu -le o idee mai bună despre ceea ce oferiți. Acest stil de grilă combină claritatea unei grile cu interactivitatea modulelor de acordeon, ceea ce o face ideală pentru site -urile care trebuie să ofere informații concise și accesibile. Perfect pentru pagini de asistență, centre de ajutor sau site -uri informaționale, grila de întrebări frecvente folosește caracteristicile robuste ale Divi 5 pentru a crea machete receptive și antrenante care îmbunătățesc experiența utilizatorului.

În acest exemplu, am folosit rânduri cuibărite pentru a crea o secțiune de întrebări frecvente antrenante cu videoclipuri informaționale și Q&A pentru a oferi utilizatorilor informațiile relevante de care au nevoie pentru a lua o decizie în cunoștință de cauză.

10. Galerie de imagini Galerie

O grilă de galerie cu un pop -up Lightbox este o modalitate izbitoare vizual de a prezenta fotografii, exemple de portofoliu sau alte imagini. Acest stil de grilă este perfect pentru prezentarea povestirii vizuale, ceea ce îl face ideal pentru site -urile web care prioritizează imagini uimitoare, cum ar fi galeriile de artă, blogurile de călătorie sau fotografia. Cu DIVI 5, designerii pot crea galerii receptive, antrenante, care captivează.

În exemplul de mai jos, folosim un aspect simplu cu patru coloane pentru a prezenta imagini. Pentru o atingere suplimentară, am activat Lightbox pe imagini și am adăugat un modul de partajare socială în colțul din dreapta jos al fiecărei fotografii.

Sfaturi pentru crearea unor machete eficiente de grilă în Divi 5

Datorită caracteristicilor puternice și flexibile ale Divi 5, construirea unor machete eficiente de grilă este mai ușoară ca niciodată. Indiferent dacă construiți o grilă de caracteristici sau o galerie de imagini dinamice cu elemente de suprapunere, aceste sfaturi vă vor ajuta să maximizați capacitățile Divi 5 pentru a crea modele receptive, coezive și eficiente care stimulează experiența utilizatorului site -ului dvs.

1.. Rânduri cuibărite de pârghie

Caracteristica cuipătoare a Divi 5 creează structuri complexe, cu mai multe straturi. Puteți organiza conținut prin cuibarea rândurilor în rânduri, cum ar fi plasarea de imagini și text într -o singură celulă de grilă pentru aliniere precisă. Rândurile cuibărite sunt perfecte pentru a clădiri, cum ar fi grilele de portofoliu sau programele de evenimente, oferindu -vă flexibilitatea pentru a proiecta grile creative, structurate.

2. Optimizați -vă pentru reacție

Folosind scalarea pânzei și punctele de întrerupere personalizabile, vă puteți asigura că rețelele dvs. arată fără cusur pe fiecare dispozitiv. Testează machetele din cadrul constructorului vizual în timp real pentru a previzualiza modul în care se adaptează pe desktop, tabletă și dispozitive mobile. Puteți ajusta lățimile coloanei, distanțarea sau dimensiunile fontului la puncte de întrerupere specifice pentru a menține capacitatea de utilizare și apelul vizual. Cu punctele de întrerupere personalizabile ale Divi 5, puteți asigura o experiență perfectă pentru toți utilizatorii, de la ecrane mari la smartphone -uri.

3. Utilizați grupuri de module pentru eficiență

Grupurile de module din Divi 5 vă pot eficientiza fluxul de lucru prin gruparea elementelor de grilă similare, cum ar fi cardurile de produs sau profilurile membrilor echipei. Puteți aplica simultan stilul consistent - fonturi, culori, efecte de hover etc. - pe mai multe module și reutilizați -le pe pagini. Acesta este un economisitor de timp pentru menținerea uniformității în grile precum mese de prețuri sau întrebări frecvente, reducerea modificărilor repetitive și asigurând un aspect lustruit.

4. Mențineți consecvența cu variabilele de proiectare

Utilizați variabile de design pentru a centraliza controlul asupra culorilor, fonturilor, distanțarea, legăturilor și multe altele. Prin definirea acestor elemente într -un singur loc, puteți actualiza stilurile la nivel global, perfecte pentru păstrarea rețelelor de servicii sau a machetei de galerie armonioase.

5. Experimentați cu unități avansate

Îmbunătățiți -vă flexibilitatea rețelelor folosind unități avansate precum VH, VW, REM, Calc () sau Clamp () pentru distanțare dinamică și dimensionare. Aceste unități permit elementelor dvs. de grilă să se extindă fluid pe baza dimensiunilor de vizionare sau a setărilor de fonturi, asigurând reacția și echilibrul vizual.

Descărcați GRATUIT Aspectele Secțiunii Grila

Doriți să începeți să folosiți machetele de grilă în Divi 5? Abonați -vă mai jos pentru a avea acces la fișierele JSON. Puteți încărca acestea în biblioteca Divi și le puteți importa în paginile dvs. după aceea.

Descărcați fișierele

Descărcați gratuit

Alăturați -vă buletinului informativ Divi și vă vom trimite prin e -mail o copie a pachetului de aspect final al paginii Divi Divi, plus tone de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmați -vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți pur și simplu adresa de e -mail de mai jos și faceți clic pe Descărcare pentru a accesa pachetul de aspect.

Descărcare

V -ați abonat cu succes. Vă rugăm să verificați adresa de e -mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de aspect Divi gratuit săptămânal!

Dezlănțuie creativitatea cu Divi 5

Suita de caracteristici Divi 5, de la rânduri cuibărite până la gestionarea atributelor, permite proiectanților să construiască cu ușurință machete versatile, receptive și vizual uimitoare. DIVI 5 oferă o flexibilitate, precizie și eficiență inegalabile pentru a crea orice aspect grilă, de la grile de caracteristici la portofolii interactive. Indiferent dacă construiți un site web de comerț electronic, o pagină despre aproximativ sau o secțiune de întrebări frecvente, interfața modernă a Divi 5 și capacitățile îmbunătățite fac ca să vă aducem simplă viziunea creativă la viață.

Sunteți gata să explorați posibilitățile? Scufundați -vă în alfa publică Divi 5 pentru a experimenta cu crearea machetei dvs. de grilă. Așa cum am menționat anterior, Divi 5 este potrivit pentru site -urile noi, dar nu recomandăm să -l utilizați pe site -urile existente, cel puțin nu încă.

Ne -ar plăcea să vă vedem creațiile. Împărtășește -ți aspectele unice de grilă pe rețelele noastre de socializare sau comentariile de mai jos.