Zmiana liczby kolumn w module Divi Gallery w różnych punktach przerwania

Moduł Divi Gallery umożliwia tworzenie pięknej galerii obrazów w responsywnym układzie siatki. Galeria jest uważana za responsywną, ponieważ skaluje rozmiar obrazów i dostosowuje liczbę kolumn w siatce do różnych szerokości przeglądarki.

Domyślnie moduł galerii ma trzy punkty przerwania (punkty, w których styl zmienia się przy określonych szerokościach przeglądarki), które dostosowują liczbę kolumn w siatce. Wyświetli galerię obrazów w czterech kolumnach na komputerze, a następnie podzieli się na trzy kolumny na tablecie, dwie kolumny na małych tabletach (i dużych telefonach) i jedną kolumnę na telefonach.

Ta domyślna konfiguracja zwykle działa w większości przypadków, ale czasami możesz potrzebować większej kontroli nad liczbą kolumn wyświetlanych w określonych szerokościach przeglądarki. Dlatego w tym samouczku pokażę, jak uzupełnić liczbę kolumn wyświetlanych w module Divi Gallery nie tylko dla pulpitu, ale także dla trzech dodatkowych punktów przerwania przeglądarki.

zapowiedź

Oto zapowiedź tego, co zbudujemy w tym samouczku. Zwróć uwagę na różną liczbę kolumn w galerii obrazów w różnych szerokościach przeglądarki.

Przygotowanie elementów projektu

Subskrybuj nasz kanał YouTube

W tym samouczku będziesz potrzebować zainstalowanego i aktywnego motywu Divi. Będziesz także potrzebować 12 obrazów dodanych do biblioteki multimediów, które zostaną użyte do zbudowania galerii obrazów. W przypadku modułu galerii Divi korzystającego z układu siatki rozmiar obrazów powinien wynosić około 1500 na 800 pikseli, jeśli planujesz otwierać obrazy w widoku lightbox, aby ładnie wypełniały ekran na większości komputerów stacjonarnych.

Implementacja niestandardowych odstępów dla modułu Divi Gallery

Konfigurowanie nowej strony

Na początek utwórz nową stronę, nadaj jej tytuł i wdróż Divi Builder. Wybierz opcję „Buduj od podstaw”, a następnie opublikuj swoją stronę. Następnie kliknij, aby zbudować z przodu.

Tworzenie galerii obrazów

Po wdrożeniu Divi Builder stwórz nową zwykłą sekcję z wierszem z jedną kolumną i dodaj moduł Galerii Divi do wiersza.

Divi zapełni moduł galerii kilkoma obrazami z galerii multimediów w formie siatki, jak poniżej:

W ustawieniach modułu galerii kliknij szarą ikonę plusa, aby dodać 12 zdjęć do galerii.

Następnie zaktualizuj ustawienia modułu Divi Gallery w następujący sposób:

Liczba obrazów: 12
Pokaż tytuł i podpis: NIE
Pokaż paginację: NIE

Dostosuj ustawienia wierszy, aby utworzyć galerię o pełnej szerokości bez szerokości rynny

Aby nasza nowa struktura kolumn działała, najważniejsze, co musimy zrobić, to pozbyć się domyślnego odstępu/marginesu, który istnieje między naszymi obrazami w galerii. Aby to zrobić, wszystko, co musimy zrobić, to ustawić szerokość rynny na 1. Ponadto, opcjonalnie, możesz ustawić pełną szerokość wiersza, aby galeria obrazów obejmowała pełną szerokość przeglądarki. Aby to zrobić, otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Ustaw pełną szerokość tego wiersza: TAK
Szerokość rynny: 1

Jeśli chcesz dodać odstępy między obrazami w galerii, sugeruję użycie tej metody, ponieważ musimy ustawić szerokość rynny na 1.

W jaki sposób galeria domyślnie reaguje na różne szerokości przeglądarki

Jak wspomniano wcześniej, domyślnie moduł galerii Divi wyświetli galerię obrazów w czterech kolumnach na komputerze, a następnie podzieli się na trzy kolumny na tablecie, dwie kolumny na małych tabletach (i dużych telefonach) oraz jedną kolumnę na telefonach.

Jednak zamierzamy to zmienić, aby uwzględnić niestandardową liczbę kolumn w niektórych punktach przerwania za pomocą kilku fragmentów niestandardowego CSS.

Ustawienie określonej liczby kolumn dla wszystkich rozmiarów przeglądarki

Jeśli chcesz zmienić liczbę kolumn wyświetlanych w galerii tak, aby liczba kolumn pozostała taka sama we wszystkich rozmiarach przeglądarki, możesz to zrobić w prosty sposób. Może to być przydatne, jeśli chcesz wyświetlać galerię tylko w jednej, dwóch lub trzech kolumnach. W ten sposób możesz mieć naprawdę duże obrazy na komputerze i mniejsze obrazy na telefonie komórkowym, zachowując ten sam numer kolumny. Posiadanie czterech lub więcej kolumn prawdopodobnie nie zadziała, ponieważ obrazy będą zbyt małe dla wyświetlaczy telefonów.

Załóżmy, że chcesz wyświetlić trzy kolumny we wszystkich rozmiarach przeglądarki. Aby to zrobić, otwórz ustawienia modułu galerii Divi i dodaj następujący niestandardowy kod CSS do elementu galerii:

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

Teraz Twoja galeria zachowa trzykolumnową strukturę we wszystkich rozmiarach przeglądarki.

Jeśli chcesz mieć układ dwukolumnowy dla wszystkich rozmiarów przeglądarki, wystarczy zmienić wartość właściwości width na 50%.

Jeśli chcesz mieć układ 1-kolumnowy, po prostu zaktualizuj szerokość do 100%.

Otóż ​​to.

Jeśli jednak chcesz uzyskać większą kontrolę nad liczbą kolumn w określonych punktach przerwania, czytaj dalej.

Zmiana liczby kolumn dla określonych punktów przerwania

Jeśli chcesz uzyskać pełną kontrolę nad liczbą kolumn wyświetlanych, gdy przeglądarka osiągnie określone punkty przerwania, możemy użyć kilku fragmentów kodu CSS z zapytaniami o media, które są kierowane na określone szerokości przeglądarki.

Dodaj klasę CSS do modułu Divi Gallery

Zanim dodamy niestandardowy CSS, najpierw musimy nadać naszemu modułowi galerii niestandardową klasę CSS, abyśmy mogli odwoływać się do tej konkretnej klasy w naszym CSS. Dzięki temu nasz CSS zostanie zastosowany tylko do tego konkretnego modułu galerii. Aby to zrobić, otwórz ustawienia modułu galerii i dodaj następującą klasę CSS w zakładce Zaawansowane:

Klasa CSS: szerokość kol.

Nie zapomnij usunąć niestandardowego css dodanego do elementu galerii w poprzedniej sekcji tego artykułu, jeśli go dodałeś.

Następnie zapisz swoje ustawienia.

Dodaj niestandardowy CSS do ustawień strony

Gdy masz już klasę CSS, możesz dodać niestandardowy CSS. Otwórz ustawienia strony, klikając ikonę koła zębatego na pasku ustawień strony u dołu strony (lub możesz użyć skrótu klawiaturowego „o”).

Następnie dodaj następujący niestandardowy CSS w zakładce Zaawansowane.

/** 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;
}
}

Ten CSS doda niestandardową liczbę kolumn do niektórych punktów przerwania w następujący sposób:

Pulpit: 6 kolumn
Tablet: 4 kolumny
Mały tablet i duży telefon: 3 kolumny
Telefon: 2 kolumny

Zrozumienie i dostosowanie CSS

Patrząc na CSS, zauważysz, że jest on podzielony na cztery oddzielne zapytania o media. Górne zapytanie o media dodaje stylizację do przeglądarek na komputerze (przeglądarki o minimalnej szerokości 981 pikseli). Drugie zapytanie o media dodaje styl do przeglądarek o rozmiarze zbliżonym do tabletu i tak dalej.

W każdym zapytaniu o media najważniejszym kodem CSS, którego nie należy brać, jest właściwość width. To określa rozmiar każdego elementu galerii, a także określa szerokość kolumny galerii.

Na przykład górne zapytanie o media dla komputerów ustawia szerokość elementu galerii na 16,66%.

Odpowiada to jednej szóstej całkowitej szerokości kontenera (lub wiersza). W związku z tym galeria wyświetli na pulpicie układ sześciokolumnowy.

Aby dostosować liczbę kolumn dla pulpitu, wystarczy zmienić właściwość width na inną wartość. Oto lista wartości procentowych szerokości, które możesz wypróbować.

12 kolumn: 8,33%
10 kolumn: 10%
8 kolumn: 12,5%
6 kolumn: 16,66%
5 kolumn: 20%
4 kolumny: 25%
3 kolumny: 33,33%
2 kolumny: 50%
1 kolumna: 100%

Ostateczny wynik

Oto ostateczny wynik na różnych szerokościach przeglądarki.

Pulpit (6 kolumn)

Tablet (4 kolumny)

Mały tablet i duży telefon (3 kolumny)

Telefon (2 kolumny)

Końcowe przemyślenia

Mam nadzieję, że ten samouczek był pomocny dla tych, którzy chcą uzyskać większą kontrolę nad liczbą kolumn wyświetlanych w galerii na niektórych urządzeniach lub punktach przerwania. Dzięki tej konfiguracji możesz dodać dowolną liczbę kolumn dla dowolnej szerokości przeglądarki, aby tworzyć galerie z myślą o użytkowniku.

Punkty przerwania, których użyłem w niestandardowym CSS, to te punkty przerwania, których Divi już używa. Zachęcamy do zapoznania się z naszym postem, w którym dowiesz się, jak dopracować swoje projekty za pomocą zapytań o media, aby uzyskać więcej informacji na temat tej koncepcji.

Do następnego razu czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!