Jak zrobić galerie w DIVI i ją lepiej przystosować?

W tym wpisie pokażę ci jak lepiej dostosować galerię Divi. Dowiesz się jak zmienić ilość kolumn w galerii Divi, jak ustawić niestandardowe odstępy miedzy miniaturami, jak stworzyć efekt powiększenia po najechaniu kursorem myszy na zdjęcie w galerii. Pod filmem znajdziesz style CSS wykorzystane w instrukcji wideo.

Style do ustawień ilości kolumn galerii i odstępu między miniaturami:

Należy umieścić te style w ustawieniach modułu Galeria, zakładka „Zaawansowane” i opcja „Niestandardowy CSS”

Odstęp między miniaturami:

padding:5px;

Galeria na 2 kolumny:

width: 50%!important;

Galeria na 3 kolumny

width: 33.33%!important;

Galeria na 5 kolumn

width: 20%!important;

Galeria na 6 kolumn

width: 16.66%!important;

Dodanie efektu powiększenia po najechaniu myszą na miniaturę galerii

transform: scale(1.03);
transition: transform 0.5s, opacity 0.5s;

Usuwanie domyślnych animacji w galerii Divi

Kod CSS należy umieścić w polu Niestandardowe CSS ale tym razem w ustawieniach Divi. Poniżej zdjęcie miejsca, a pod obrazkiem kod do skopiowania.

.et_pb_gallery_item {
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}

Wtyczka Divi Plus z dodatkowymi modułami ułatwiającymi pracę w Divi

Link do strony z wtyczką – https://rafalstepien.pl/diviplus