Modificarea numărului de coloane din modulul Divi Gallery la diferite puncte de întrerupere

Modulul Divi Gallery vă permite să creați galerii de imagini frumoase într-un aspect de grilă receptiv. Galeria este considerată receptivă, deoarece va scala dimensiunea imaginilor dvs. și va ajusta numărul de coloane din grilă în funcție de lățimile diferite ale browserului.

În mod implicit, modulul galerie are trei puncte de întrerupere (puncte în care stilul se modifică la anumite lățimi ale browserului) care ajustează numărul de coloane din grilă. Va afișa galeria de imagini în patru coloane pe desktop și apoi se va împărți în trei coloane pe tabletă, două coloane pe tablete mici (și telefoane mari) și o coloană pe telefoane.

Această configurare implicită va funcționa de obicei în majoritatea cazurilor, dar uneori este posibil să aveți nevoie de un control mai mare asupra numărului de coloane afișate pe anumite lățimi ale browserului. De aceea, în acest tutorial, vă voi arăta cum să completați numărul de coloane afișate în modulul Galerie Divi nu numai pentru desktop, ci și pentru trei puncte de întrerupere suplimentare ale browserului.

Trage cu ochiul

Iată o scurtă privire asupra a ceea ce vom construi în acest tutorial. Observați numărul diferit de coloane pentru galeria de imagini pe diferite lățimi ale browserului.

Pregătirea elementelor de design

Abonați-vă la canalul nostru Youtube

Pentru acest tutorial, veți avea nevoie de tema Divi instalată și activă. De asemenea, veți avea nevoie de 12 imagini adăugate în biblioteca dvs. media pentru a fi utilizate pentru construirea galeriei de imagini. Pentru un modul de galerie Divi care utilizează un aspect de grilă, dimensiunea imaginilor dvs. ar trebui să fie de aproximativ 1500 px cu 800 px dacă intenționați ca imaginile dvs. să se deschidă în afișajul lightbox, astfel încât să umple ecranul frumos pe majoritatea desktopurilor.

Implementarea spațiului personalizat pentru modulul Divi Gallery

Configurarea unei pagini noi

Pentru început, creați o pagină nouă, dați-i paginii un titlu și implementați Divi Builder. Selectați opțiunea „Construiți de la zero” și apoi publicați pagina. Apoi faceți clic pentru a construi pe partea frontală.

Crearea Galeriei de imagini

Cu Divi Builder implementat, continuați și creați o nouă secțiune obișnuită cu un rând cu o coloană și adăugați un modul Divi Gallery la rând.

Divi va completa modulul galeriei cu câteva imagini din galeria dvs. media într-un afișaj de grilă, cum ar fi următorul:

În setările modulului galeriei, faceți clic pe pictograma gri plus pentru a adăuga 12 imagini în galerie.

Apoi actualizați setările modulului Divi Gallery după cum urmează:

Număr imagini: 12
Afișați titlul și legenda: NU
Arată paginare: NU

Reglați setările rândului pentru a crea o galerie de lățime completă fără lățimea jgheabului

Pentru ca noua noastră structură de coloane să funcționeze, principalul lucru pe care trebuie să-l facem este să scăpăm de spațiul / marja implicită care există între imaginile noastre din galerie. Pentru a face acest lucru, tot ce trebuie să facem este să setăm lățimea jgheabului la 1. De asemenea, ca opțiune, puteți face rândul lățime completă pentru a face ca galeria de imagini să se extindă pe întreaga lățime a browserului. Pentru aceasta, deschideți setările rândului și actualizați următoarele:

Faceți acest rând lățime completă: DA
Lățimea jgheabului: 1

Dacă doriți să adăugați spațiu între imaginile din galerie, vă sugerez să utilizați această metodă, deoarece trebuie să menținem lățimea jgheabului setată la 1.

Cum răspunde galeria la diferite lățimi ale browserului în mod implicit

După cum sa menționat mai devreme, în mod implicit, modulul galerie Divi va afișa galeria de imagini în patru coloane pe desktop și apoi se va împărți în trei coloane pe tabletă, două coloane pe tablete mici (și telefoane mari) și o coloană pe telefoane.

Cu toate acestea, vom modifica acest lucru pentru a include un număr personalizat de coloane la anumite puncte de întrerupere folosind câteva fragmente de CSS personalizate.

Setarea unui număr specific de coloane pentru toate dimensiunile browserului

Dacă doriți să modificați numărul de coloane afișate în galerie, astfel încât numărul de coloane să rămână același pe toate dimensiunile browserului, există o modalitate simplă de a face acest lucru. Acest lucru ar putea fi util dacă doriți să afișați galeria dvs. într-o singură coloană, două coloane sau trei coloane. În acest fel, puteți avea imagini foarte mari pe desktop și imagini mai mici pe mobil, păstrând în același timp numărul coloanei. Dacă aveți patru sau mai multe coloane, probabil că nu va funcționa, deoarece imaginile vor fi prea mici pentru afișajele telefonului.

Să presupunem că doriți să afișați trei coloane pe toate dimensiunile browserului. Pentru a face acest lucru, deschideți setările modulului galerie Divi și adăugați următorul CSS personalizat la articolul din galerie:

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

Acum galeria dvs. va păstra structura celor trei coloane pe toate dimensiunile browserului.

Dacă doriți un aspect cu 2 coloane pentru toate dimensiunile browserului, tot ce trebuie să faceți este să modificați valoarea proprietății de lățime la 50%.

Dacă doriți un aspect cu 1 coloană, pur și simplu actualizați lățimea la 100%.

Asta e.

Dar, dacă doriți să câștigați mai mult control asupra numărului de coloane la anumite puncte de întrerupere, citiți mai departe.

Modificarea numărului de coloane pentru puncte de întrerupere specifice

Dacă doriți să obțineți un control complet asupra numărului de coloane afișate atunci când browserul atinge anumite puncte de întrerupere, putem folosi câteva fragmente de CSS cu interogări media care vizează anumite lățimi ale browserului.

Adăugați Clasa CSS la modulul Divi Gallery

Înainte de a adăuga CSS personalizat, mai întâi trebuie să oferim modulului nostru de galerie o clasă CSS personalizată, astfel încât să putem face referire la acea clasă specifică în CSS. Acest lucru se va asigura că CSS-ul nostru se aplică numai acestui modul de galerie specific. Pentru aceasta, deschideți setările modulului galerie și adăugați următoarea clasă CSS în fila avansată:

Clasa CSS: col-width

Nu uitați să scoateți css-urile personalizate adăugate la articolul din galerie din secțiunea anterioară a acestui articol dacă l-ați adăugat.

După aceea, salvați setările.

Adăugați CSS personalizat la Setările paginii

Cu clasa dvs. CSS la locul dvs., sunteți gata să adăugați CSS personalizat. Deschideți setările paginii făcând clic pe pictograma roată din bara de setări a paginii din partea de jos a paginii (sau puteți utiliza comanda rapidă de la tastatură „o”).

Apoi adăugați următorul CSS personalizat în fila avansată.

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}

Acest CSS va adăuga un număr personalizat de coloane la anumite puncte de întrerupere, după cum urmează:

Desktop: 6 coloane
Tabletă: 4 coloane
Tabletă mică și telefon mare: 3 coloane
Telefon: 2 coloane

Înțelegerea și ajustarea CSS

Privind la CSS, veți observa că este împărțit în patru interogări media separate. Interogarea media de top adaugă stilul browserelor desktop (browsere cu o lățime minimă de 981px). A doua interogare media adaugă stil la browserele de dimensiunea tabletei și așa mai departe.

În cadrul fiecărei interogări media, cel mai important CSS pe care nu îl luați este proprietatea de lățime. Aceasta desemnează dimensiunea fiecărui element de galerie și care setează, de asemenea, lățimea coloanei pentru galerie.

De exemplu, interogarea media de top pentru desktop setează lățimea elementului galeriei la 16,66%.

Aceasta este echivalentă cu o șesime din lățimea totală a containerului (sau rândului) acestuia. Prin urmare, galeria va afișa un aspect cu șase coloane pe desktop.

Pentru a regla numărul de coloane pentru desktop, tot ce trebuie să faceți este să modificați proprietatea de lățime la o valoare diferită. Iată o listă cu procentele de lățime pe care le puteți încerca.

12 coloane: 8,33%
10 coloane: 10%
8 coloane: 12,5%
6 coloane: 16,66%
5 coloane: 20%
4 coloane: 25%
3 coloane: 33,33%
2 coloane: 50%
1 coloană: 100%

Rezultat final

Iată rezultatul final pe diferite lățimi ale browserului.

Desktop (6 coloane)

Tabletă (4 coloane)

Tabletă mică și telefon mare (3 coloane)

Telefon (2 coloane)

Gânduri finale

Sper că acest tutorial a fost util pentru cei dintre voi care doresc să câștige mai mult control asupra numărului de coloane pe care galeria dvs. le afișează pe anumite dispozitive sau puncte de întrerupere. Cu această configurare, puteți adăuga orice număr de coloane doriți pentru orice lățime a browserului pentru a crea afișaje de galerie, având în vedere utilizatorul.

Punctele de întrerupere pe care le-am folosit în CSS personalizat sunt acele puncte de întrerupere pe care Divi le folosește deja. Simțiți-vă liber să consultați postarea noastră despre cum să vă ajustați proiectele cu interogări media pentru mai multe informații despre acest concept.

Până data viitoare, aștept cu nerăbdare să vă aud de la comentarii.

Noroc!