6 galerii de imagini noi construite cu rânduri cuibărite Divi 5 (descărcare gratuită)

Dacă ați încercat vreodată să construiți o galerie de imagini manual, știți cât de repede lucrurile devin dezordonate. Imaginile inegale, rândurile nealiniate și design -urile fără răspuns transformă o galerie simplă într -un coșmar de aspect.

Chiar și în Divi 4, structurile complexe de imagine au însemnat adesea stivuirea mai multor rânduri și secțiuni de specialitate, modificarea distanțării și ore de personalizare manuală. Dar cu Divi 5, puteți sări peste toate acestea.

Datorită noilor sale caracteristici cuibărită, puteți construi mai multe structuri avansate de galerii de imagini. În această postare, vă vom arăta cum și vă vom oferi 6 modele de dispunere a galeriei pentru a vă oferi un început de cap.

Divi 5 este gata să fie utilizat pe site -uri web noi, dar așteptați puțin înainte de a migra cele existente.

Folosind rânduri cuibărite pentru a construi machete complexe

Divi 4 avea deja tot ce ai nevoie pentru a construi galerii de imagini, dar crearea unor machete complexe se simțea adesea neplăcut. Divi 5 introduce rânduri cuibărite care vă oferă o modalitate mai rapidă și mai curată de a construi vizual machete avansate de galerie, fără a fi necesare hacks.

Abonați -vă la canalul nostru YouTube

Ce sunt rândurile cuibărite?

Rândurile cuibărite sunt o nouă caracteristică puternică de aspect în Divi 5, care vă permite să plasați un rând în altul, oferindu -vă mai mult control asupra modului în care vă structurați pagina. Acest lucru face posibilă proiectarea secțiunilor complexe direct în interiorul constructorului vizual, fără a fi nevoie să scrieți cod sau să vă bazați pe soluții de soluționare.

Cuibarea unui rând este ca și cum ai adăuga un alt modul. Trebuie doar să treceți peste elementul în care doriți să vă așezați rândul și să faceți clic pe butonul Plus pentru a alege noul rând. Apoi puteți alege dintre toate aceste machete de rânduri, care sunt perfecte pentru diverse structuri de galerie.

Acest rând cuibărit se comportă exact ca un rând obișnuit. Puteți alege o structură de coloană, adăugați module și cuibăriți un alt rând, dacă este necesar - datorită cuibului său infinit. De asemenea, puteți redimensiona coloanele prin glisare, astfel încât reglarea lățimilor se simte intuitivă și nu implică matematică sau distanțare.

Rândurile cuibărite sunt, de asemenea, pe deplin receptive în mod implicit. Chiar de la constructor, vă puteți regla aspectul pe diverse ecrane. Deoarece face parte din cadrul DIVI 5, funcționează perfect cu alte caracteristici, cum ar fi presetările de grupuri de opțiuni și variabilele de proiectare. De asemenea, vom împărtăși sfaturi pentru combinarea rândurilor cuibărite cu funcțiile avansate ale Divi 5 pentru a optimiza fluxul de lucru al designului galeriei.

Aflați totul despre rândurile cuibărite ale Divi 5

Ce face rândurile cuibărite diferite?

În Divi 4, construirea unor machete de galerii de imagini personalizate implicate creativ folosind rânduri, secțiuni de specialitate și machete pentru a obține modele mai avansate. Aceasta a însemnat că ar fi o provocare dacă nu ai avea cunoștințe de proiectare. Și chiar dacă ai avut experiența, ai fost limitat la câteva structuri de aspect.

Rândurile cuibărite oferă o abordare mai intuitivă. Nu mai trebuie să vă bazați pe rânduri separate sau pe secțiuni de specialitate. Puteți cuibări cu ușurință rânduri și amestecați și potriviți -le cu module pentru a crea modele de design nelimitate. Doriți să creați o vitrină de produse? Creați un rând cu două coloane, adăugați imaginea dvs. prezentată în stânga și descrierea din dreapta, cuibărit un rând cu trei coloane sub imaginea din stânga și adăugați imagini de susținere. Imaginația ta este limita!

6 machete de galerii de imagini pe care le puteți construi cu rânduri cuibărite

Pentru a vă oferi o privire asupra a ceea ce este posibil, am creat șase modele de amenajare a galeriei de imagini cu instrucțiuni despre modul în care au fost folosite rândurile cuibărite pentru a le proiecta. Să trecem peste ele.

Aspect 1: Galeria CTA inline

Dispunerea grilei stratificate folosește o grilă modernă, în stil reviste, care evidențiază un proiect cu o combinație de imagini mari, fotografii de susținere și text plasat cu atenție. Prima secțiune este un rând cuibărit cu 2 coloane (cuibărit într-un alt rând cu 2 coloane), cu două imagini, iar următorul este o altă imagine mare. Un banner de text orizontal rupe grila, adăugând context și un apel la acțiune. Secțiunea de jos aduce un alt aspect cu trei coloane pentru a continua povestea, dar cu spațiu pentru o descriere mai lungă a textului.

Acest design este perfect pentru portofolii, vitrine imobiliare sau machete editoriale care necesită ritm vizual și ierarhie de conținut clar. Funcționează frumos pe dimensiunile ecranului, în timp ce încă se simte structurat și intenționat.

Cum să -l construiești

Începeți cu un rând cu două coloane. Adăugați o imagine în dreapta și cuziți un alt rând în coloana din stânga. Adăugați imagini tuturor. Apoi, un alt rând cuibărit este plasat sub un banner pentru a ține un paragraf de text alături de un alt set de imagini. Repetați întreaga structură sau faceți câteva modificări, cum ar fi să puneți rândul de text despre imagini cuibărite.

Acest aspect este unic în modul în care sunt utilizate rândurile cuibărite în fiecare secțiune vizuală. Rândurile cuibărit ale Divi 5 permit flexibilitatea structurală, amestecând formate de rând în interiorul unei singure coloane și stratând -le sub elemente contextuale.

Aspect 2: Galeria de focalizare Split

Un aspect cu două coloane în care coloana din stânga stivuiește o imagine verticală deasupra unui bloc de text scurt, iar coloana din dreapta are o imagine mare urmată de un rând de trei imagini de susținere mai mici. Acest aranjament evidențiază un moment vizual principal, permițând spațiului atât pentru contextul scris, cât și pentru o bandă de imagini secundare în același aspect.

Dispunerea galeriei de focalizare divizată este perfectă pentru galerii de nuntă, eveniment sau floral, unde fiecare bloc vizual surprinde un singur moment sau emoție. De asemenea, funcționează bine atunci când doriți să combinați o imagine focală îndrăzneață cu miniaturi de susținere și un mic citat, mărturie sau mesaj de introducere alături.

Cum să -l construiești

Creați un rând de 2 coloane. În coloana din stânga, stivați o imagine verticală deasupra și un modul de text sub ea folosind două rânduri separate. În coloana din dreapta, introduceți un singur modul de imagine în partea de sus pentru fotografia prezentată, apoi adăugați un rând cuibărit cu trei coloane direct sub el pentru a ține imagini de susținere mai mici.

Cheia este reglarea căptușelii și setarea lățimii jgheabului la 1 în rândul cuibărit pentru a menține totul strâns și curat. Mai târziu, când ați adăugat imaginile, creați o presetare de frontieră (setați lățimea de frontieră la 2 și alb -color de frontieră ) și aplicați -o la toate elementele.

Aspect 3: Galeria Spotlight Project

Acest aspect transformă galeria de imagini într -o vitrină de proiecte sau oferte individuale. În loc să afișăm doar imagini, fiecare articol primește propria etichetă și apel la acțiune, ceea ce îl face ideal pentru portofolii, rețete, evidențieri de produse sau studii de caz.

Un rând scurt cu două coloane urmează fiecare imagine. Partea din stânga conține o descriere rapidă sau un nume de proiect, iar partea dreaptă dispune de un buton care invită utilizatorul să ia măsuri, cum ar fi comanda acum . Dispunerea Galeriei Spotlight Project aduce mai mult scop și interacțiune galeriei tale.

Cum să -l construiești

Sub fiecare imagine, am adăugat un rând cuibărit în două coloane. Am folosit coloana din stânga pentru o scurtă descriere și coloana din dreapta pentru un buton de apel la acțiune. Apoi am conceput butonul folosind stiluri globale și am repetat această structură pentru fiecare element de galerie pentru a menține consecvența. Pentru a face ca rândul să se suprapună imaginea, am setat poziția pe absolută cu o compensare verticală 40px și z INDEX 1000.

De asemenea, am adăugat o presetare de umbre la toate imaginile, care nu numai că au oferit galeriei un aspect lustruit, dar mi -a salvat timp, permițându -mă să aplic brandul consistent pe mai multe module în doar câteva clicuri.

Aspect 4: Galeria de dezvăluire de defilare

Dispunerea galeriei de defilare este proiectată pentru povestirea vizuală care se desfășoară pe măsură ce utilizatorii derulează. Fiecare secțiune prezintă o imagine mare împerecheată cu imagini de susținere mai mici (create prin cuibarea mai multor rânduri împreună).

Este perfect pentru galerii editoriale, vitrinele rețetelor (evidențierea pașilor sau a ingredientelor) sau a paginilor echipei de companie care doresc să capteze momente de grup în mod interactiv. În loc de spectatori copleșitori, îi ghidează în fiecare poveste vizual, un bloc la un moment dat.

Cum să -l construiești

Structura este simplă: creați un rând cu două coloane. Adăugați un modul de imagine, titlu, text și un buton din stânga. În dreapta, cuibărit un nou rând cu două coloane și introduceți module de imagine în fiecare pentru a susține imagini. Apoi, puteți stiva alternativ rânduri singure și cu două coloane pentru a crea o grilă asemănătoare cu zidărie.

Jucătorul cheie al acestui aspect este secțiunea din stânga, care se lipește. Pentru a face secțiunea dvs. prezentată, trebuie să creați un grup de module și să activați setările de efecte de defilare . Faceți clic pe grupul de module și accesați Setări> Advanced> Efecte de defilare.

Faceți grupul dvs. de modul să se lipească deasupra și setați limita de jos lipicioasă pe zona corpului. Pe măsură ce utilizatorii derulează în jos, imaginea prezentată se va lipi, în timp ce celelalte imagini continuă să se miște.

Aspect 5: Galerie de produse eșalonate

Nu orice galerie are nevoie de o imagine focală sau o structură complexă. Uneori, tot ce ai nevoie este un set de imagini aranjate într -o structură eșalonată și de aici strălucesc liniile.

Acest aspect este ideal pentru comerțul electronic sau site-urile orientate către produse, unde doriți să evidențiați o colecție fără a o face să se simtă ca o grilă tipică. Folosește o mulțime de spațiu alb și rânduri cuibărite pentru a rupe monotonia vizuală amestecând rânduri de imagini unul, două și cu trei coloane în interiorul unei singure secțiuni. Rezultatul este un aspect bine echilibrat, care se simte realizat manual și editorial, perfect pentru prezentarea detaliilor produsului, a primilor materiale sau a articolelor complementare.

Funcționează deosebit de bine pentru mărci cu produse tactile sau de lux, cum ar fi articole din piele, ceramică sau articole realizate manual, unde contează povestirea vizuală.

Cum să -l construiești

Creați un rând cu două coloane. Adăugați un aspect stivuit de imagini folosind rânduri cuibărite în coloana din stânga. Un rând are două fotografii mici cot la cot, iar cealaltă are o imagine verticală. În coloana din dreapta, cuibărește un rând nou cu trei coloane și introduceți imagini de produs. Mai jos, așezați textul și butonul.

Pentru a crea efectul de genți suprapus (ca în secțiunea realizată manual) , adăugați un modul de imagine în rândul său și utilizați poziționare absolută (avansat> poziție> absolut ). Apoi folosiți glisoarele de compensare și indexul Z pentru a-l stratifica între cele două secțiuni. Acest lucru vă permite să creați machete în stilul revistei în care imaginile rup grila pentru un plus de interes vizual.

Aspect 6: grilă de portofoliu asimetrică

Dispunerea grilei de portofoliu asimetric combină povestiri și imagini într-un format curat în două coloane. Utilizați coloana din stânga pentru a introduce un proiect cu o rubrică, o descriere scurtă și CTA. În coloana din dreapta, un rând cuibărit cu trei coloane vine deasupra unei imagini prezentate mari, oferind o oportunitate perfectă de a arăta imagini cheie cu fotografii de susținere.

Acest design este ideal pentru designeri, fotografi sau agenții care prezintă studii de caz curate sau portofolii. Menține atenția axată în același timp, oferind un ritm natural de defilare și un flux prietenos cu mobil.

Cum să -l construiești

Începeți cu un rând cu două coloane. În coloana din stânga, adăugați un modul de text pentru titlul și descrierea dvs., urmată de un modul de buton (dacă doriți).

Adăugați un rând cuibărit în coloana din dreapta. Alegeți aspectul cu trei coloane și stivați un alt modul de imagine. Introduceți trei imagini de susținere în rândul cuibărit și o imagine mare în modulul de imagine stivuit. Utilizați alte structuri de rând pentru a crea mai multe modele.

Pentru a menține totul aliniat, setați lățimea jgheabului la 1 și recoltați -vă imaginile la înălțimi consistente înainte de încărcare. Folosiți o presetare globală de imagine (cum ar fi o bordură moale sau o umbră de cădere) și efecte de trecere pentru a menține lucrurile interactive, dar rafinate.

Ați observa, de asemenea, un alt rând cuibărit care se suprapune imaginii. Am setat poziția la absolut pentru a crea efectul de suprapunere .

Sfaturi de top pentru a construi galerii de imagini interactive

Odată ce aspectul dvs. este pe loc, presărați câteva detalii suplimentare pentru a face galeriile mai lustruite. Iată cum:

1. Creați efecte de hover

Adăugarea efectelor hover este una dintre cele mai ușoare metode de a face galeriile de imagini să se simtă mai dinamice. Adăugă interactivitate fără a distrage conținutul și ajută imaginile să se simtă în viață atunci când utilizatorii se angajează cu ele.

În Divi 5, adăugarea de efecte de hover la imaginile dvs. este ușoară. În timp ce editați, puteți trece cu ușurință la trecerea (și modurile receptive) și puteți personaliza setările.

Nu trebuie să treceți la o opțiune de imagine sau setare diferită; Comutați doar o dată, faceți modificări la toate elementele pe care doriți să le personalizați și să le salvați. Am schimbat culoarea de frontieră, dar puteți încerca, de asemenea, filtre, transformați, adăugați umbră și mai ușor.

Puteți aplica acest lucru pe imagini individuale sau îl puteți salva ca presetare dacă doriți ca toate imaginile dvs. să se comporte la fel. Este un detaliu mic, dar face ca galeria ta să se simtă atentă și interactivă, iar Divi o face fără efort.

2. Folosiți atribute de copiere/lipire pentru a aplica stiluri rapid la imagini

Personalizarea manuală a fiecărei imagini dintr-o galerie poate consuma mult timp, mai ales atunci când se aplică stiluri consistente precum margini, umbre sau efecte de hover. În timp ce presetările sunt excelente pentru stilurile globale, este posibil să nu doriți să creați o nouă presetare pentru fiecare ajustare minoră.

Sistemul de gestionare a atributelor Divi 5 oferă o soluție simplificată. Cu doar câteva clicuri, puteți copia stiluri dintr -o imagine și le puteți aplica altora. Nu trebuie să repetați manual același proces de personalizare pentru fiecare imagine. Puteți copia și lipi și menține consistența.

De exemplu, personalizați un element și copiați și lipiți atributele sale către celelalte elemente pentru a reproduce stilul.

Divi 5 permite, de asemenea, un control mai granular. De exemplu, puteți copia și insera grupuri de atribute specifice, cum ar fi doar setările de proiectare sau numai efectele hover. Acest lucru face ca fluxul de lucru să fie eficient și coeziv.

3. Folosiți clemă pentru a crea imagini fluide și receptive

Într -un aspect modern al galeriei, imaginile dvs. nu ar trebui să se extindă doar, ci să răspundă inteligent la diferite dimensiuni ale ecranului. Exact asta vă ajută funcția Clamp ().

Divi 5 acceptă Clamp () și multe alte unități avansate care vă permit să introduceți manual valori de mărime oriunde, inclusiv lățimea imaginii, căptușeala și câmpurile de marjă. Clamp () este ideal pentru receptivitate. Vă permite să setați o valoare minimă, ideală și maximă, toate într -o singură linie.

De exemplu, o clemă (1200px, 30VW, 1400px) spune că Divi nu va trece niciodată sub 1200px, la scară până la 30% din lățimea vizualizării, dar o placă la 1400px.

Acest lucru este util mai ales pentru benzi de imagine sau machete eșalonate, unde doriți o grilă mai fluidă fără puncte de întrerupere. Când este combinat cu rânduri cuibărite, Clamp () ajută fiecare bloc să se adapteze în mod natural, fără a avea nevoie de ajustări mobile separate.

4. Previzualizare și modificare pentru diferite dispozitive

Odată ce aspectul dvs. arată bine pe desktop, este ușor să-l reglați pentru tablete și mobil folosind instrumente de editare responsive încorporate ale Divi. Comutați între vizualizările dispozitivului și reglați setările precum dimensiunea imaginii, distanțarea și alinierea textului pentru fiecare ecran.

De exemplu, poate doriți să reduceți căptușeala între rânduri pe coloanele mobile sau de stivă diferit pentru o experiență de defilare mai bună. A lua câteva minute pentru a regla aceste setări poate face galeria dvs. să se simtă curată și profesională pe fiecare ecran.

Descărcați gratuit aspectele galeriei

Doriți să începeți să folosiți machete de galerie din 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!

Construiți galerii de imagini cuibărite (și multe altele) cu Divi 5

Rândurile cuibărite Divi 5 simplifică machete complexe, permițându -vă să plasați rânduri în rânduri. De asemenea, oferă o cuiburi infinite și un control precis asupra proiectelor tale.

Rândurile cuibărite este doar una dintre caracteristicile exclusive ale Divi 5. Fiți în căutarea noului sistem de layout bazat pe FlexBox de la Divi, care introduce, de asemenea, o gamă largă de șabloane de rând noi și controale FlexBox pentru a vă oferi toate instrumentele și simplitatea pentru a crea orice aspect pe care îl puteți imagina.

Pe măsură ce continuăm să îmbunătățim Divi 5, vă puteți aștepta și mai multe caracteristici care vă îmbunătățesc capacitățile de proiectare și vă simplifică fluxul de lucru.

Dacă ați construit galerii pe calea grea, acum este momentul perfect pentru a încerca Divi 5 și a experimenta modul în care rândurile cuibărite și instrumentele de aspect vizual pot simplifica totul.

Divi 5 este gata să fie utilizat pe site -uri web noi, dar așteptați puțin înainte de a migra cele existente.