Galeria divi zmiana ilosci kolumn

Galeria Divi – jak zmienić liczbę kolumn w starszej wersji Divi

Jak zmienić liczbę kolumn w galerii Divi?

Starsze wersje Divi pozwalają na tworzenie galerii zdjęć, jednak domyślne ustawienia modułu Gallery nie zawsze umożliwiają wygodne dopasowanie liczby kolumn do wyglądu strony.

Jeżeli galeria wyświetla zdjęcia w zbyt dużych lub zbyt małych kafelkach, można zmienić jej układ za pomocą CSS. Jest to szczególnie przydatne w starszych wersjach Divi, w których opcje konfiguracji galerii były bardziej ograniczone.

Ile kolumn może mieć galeria Divi?

W zależności od szerokości strony można ustawić na przykład:

• 2 kolumny,

• 3 kolumny,

• 4 kolumny,

• 5 kolumn,

• 6 kolumn.

Najczęściej dobrze sprawdzają się 3 lub 4 kolumny na komputerach, natomiast na telefonach warto pozostawić 1 lub 2 kolumny.

Galeria Divi – 4 kolumny

Jeżeli chcesz, aby klasyczna galeria Divi wyświetlała zdjęcia w czterech kolumnach, możesz dodać własny kod CSS.

Przejdź w WordPressie do:

Divi → Theme Options → Custom CSS

i dodaj:

.et_pb_gallery_grid .et_pb_gallery_item {
    width: 25% !important;
    clear: none !important;
}

.et_pb_gallery_grid .et_pb_gallery_item:nth-child(4n+1) {
    clear: both !important;
}

Każde zdjęcie zajmie wtedy około 25% szerokości galerii, dzięki czemu otrzymasz cztery elementy w jednym wierszu.

Galeria Divi – 3 kolumny

Dla trzech kolumn zastosuj:

.et_pb_gallery_grid .et_pb_gallery_item {
    width: 33.333% !important;
    clear: none !important;
}

.et_pb_gallery_grid .et_pb_gallery_item:nth-child(3n+1) {
    clear: both !important;
}

Zdjęcia zostaną podzielone na trzy równe kolumny.

Galeria Divi – 5 kolumn

Jeżeli potrzebujesz większej liczby mniejszych zdjęć:

.et_pb_gallery_grid .et_pb_gallery_item {
    width: 20% !important;
    clear: none !important;
}

.et_pb_gallery_grid .et_pb_gallery_item:nth-child(5n+1) {
    clear: both !important;
}

Pięć zdjęć będzie wyświetlanych w jednym wierszu.

Galeria Divi – 6 kolumn

Dla sześciu kolumn:

.et_pb_gallery_grid .et_pb_gallery_item {
    width: 16.666% !important;
    clear: none !important;
}

.et_pb_gallery_grid .et_pb_gallery_item:nth-child(6n+1) {
    clear: both !important;
}

To rozwiązanie sprawdzi się przede wszystkim w galeriach prezentujących niewielkie zdjęcia lub miniatury.

Responsywna galeria Divi

Przy zmianie liczby kolumn warto pamiętać o urządzeniach mobilnych. Sześć zdjęć obok siebie może wyglądać dobrze na dużym monitorze, ale na telefonie miniatury będą zbyt małe.

Dlatego można zastosować osobne ustawienia dla różnych rozdzielczości.

Przykładowo:

/* Komputer – 4 kolumny */
.et_pb_gallery_grid .et_pb_gallery_item {
    width: 25% !important;
    clear: none !important;
}

.et_pb_gallery_grid .et_pb_gallery_item:nth-child(4n+1) {
    clear: both !important;
}

/* Tablet – 2 kolumny */
@media (max-width: 980px) {
    .et_pb_gallery_grid .et_pb_gallery_item {
        width: 50% !important;
    }

    .et_pb_gallery_grid .et_pb_gallery_item:nth-child(2n+1) {
        clear: both !important;
    }
}

/* Telefon – 1 kolumna */
@media (max-width: 767px) {
    .et_pb_gallery_grid .et_pb_gallery_item {
        width: 100% !important;
    }

    .et_pb_gallery_grid .et_pb_gallery_item:nth-child(n) {
        clear: both !important;
    }
}

Dzięki temu galeria będzie miała 4 kolumny na komputerze, 2 na tablecie i 1 na telefonie.

Dlaczego CSS jest potrzebny w starszym Divi?

W starszych wersjach Divi możliwości konfiguracji modułu Gallery były bardziej ograniczone niż w nowszych wydaniach. Własny CSS pozwala zmienić wygląd galerii bez konieczności przebudowywania całej strony.

Jest to również dobre rozwiązanie w przypadku starszych stron, których nie chcemy obecnie przebudowywać w całości.

Na co zwrócić uwagę?

Przed wprowadzeniem zmian warto wykonać kopię zapasową strony. Po dodaniu CSS należy sprawdzić galerię:

• na komputerze,

• na tablecie,

• na telefonie,

• przy różnej liczbie zdjęć,

• przy zdjęciach o różnych proporcjach.

Jeżeli miniatury mają różne proporcje, warto również zadbać o ich jednolite kadrowanie, aby galeria wyglądała estetycznie.

Podsumowanie

W starszym Divi liczbę kolumn galerii można zmienić za pomocą kilku reguł CSS. Najczęściej najlepszym rozwiązaniem jest zastosowanie 4 kolumn na komputerze, 2 na tablecie i 1 na telefonie.

Jeżeli galeria znajduje się na starszej stronie Divi i nie chcesz jej przebudowywać, własny CSS może być szybkim sposobem na poprawienie jej wyglądu bez zmiany całego motywu.