Изменение количества столбцов в модуле Divi Gallery в разных точках останова

Модуль Divi Gallery позволяет создавать красивые галереи изображений в гибкой сетке. Галерея считается адаптивной, потому что она масштабирует размер ваших изображений и регулирует количество столбцов в сетке в соответствии с разной шириной браузера.

По умолчанию модуль галереи имеет три точки останова (точки, где стиль изменяется при определенной ширине браузера), которые регулируют количество столбцов в сетке. Он отобразит вашу галерею изображений в четырех столбцах на рабочем столе, а затем разделится на три столбца на планшете, два столбца на маленьких планшетах (и больших телефонах) и один столбец на телефонах.

Эта настройка по умолчанию обычно работает в большинстве случаев, но иногда вам может потребоваться больший контроль над количеством столбцов, отображаемых при определенной ширине браузера. Вот почему в этом руководстве я покажу вам, как заполнить количество столбцов, отображаемых в модуле галереи Divi, не только для рабочего стола, но и для трех дополнительных точек останова браузера.

Sneak Peek

Вот краткий обзор того, что мы построим в этом уроке. Обратите внимание на разное количество столбцов для галереи изображений при разной ширине браузера.

Подготовка элементов дизайна

Подпишитесь на наш канал Youtube

Для этого урока вам понадобится установленная и активная тема Divi. Вам также понадобится 12 изображений, добавленных в вашу медиатеку, которые будут использоваться для создания галереи изображений. Для модуля галереи Divi, использующего макет сетки, размер ваших изображений должен составлять около 1500 пикселей на 800 пикселей, если вы планируете открывать изображения в лайтбоксе, чтобы они хорошо заполняли экран на большинстве рабочих столов.

Реализация настраиваемого интервала для модуля Divi Gallery

Создание новой страницы

Для начала создайте новую страницу, дайте ей название и разверните Divi Builder. Выберите вариант «Создать с нуля», а затем опубликуйте свою страницу. Затем нажмите, чтобы построить переднюю часть.

Создание галереи изображений

Развернув Divi Builder, создайте новый обычный раздел со строкой из одного столбца и добавьте в строку модуль галереи Divi.

Divi заполнит модуль галереи некоторыми изображениями из вашей медиа-галереи в виде сетки, как показано ниже:

В настройках модуля галереи щелкните серый значок плюса, чтобы добавить 12 изображений в галерею.

Затем обновите настройки модуля Divi Gallery следующим образом:

Количество изображений: 12
Показать заголовок и подпись: НЕТ
Показать разбиение на страницы: НЕТ

Отрегулируйте настройки строки, чтобы сделать галерею полной ширины без ширины желоба

Чтобы наша новая структура столбцов работала, главное, что нам нужно сделать, это избавиться от интервала / поля по умолчанию, которые существуют между нашими изображениями в галерее. Для этого все, что нам нужно сделать, это установить ширину желоба на 1. Кроме того, как вариант, вы можете сделать строку полной шириной, чтобы галерея изображений занимала всю ширину браузера. Для этого откройте настройки строки и обновите следующее:

Сделать эту строку полной шириной: ДА
Ширина желоба: 1

Если вы хотите добавить интервал между изображениями в галерее, я предлагаю использовать этот метод, поскольку нам нужно установить ширину желоба равной 1.

Как галерея реагирует на разную ширину браузера по умолчанию

Как упоминалось ранее, по умолчанию модуль галереи Divi отображает вашу галерею изображений в четырех столбцах на рабочем столе, а затем разбивается на три столбца на планшете, два столбца на маленьких планшетах (и больших телефонах) и один столбец на телефонах.

Однако мы собираемся изменить это, чтобы включить настраиваемое количество столбцов в определенные точки останова, используя несколько фрагментов настраиваемого CSS.

Установка определенного количества столбцов для всех размеров браузера

Если вы хотите изменить количество столбцов, отображаемых в галерее, чтобы количество столбцов оставалось одинаковым для всех размеров браузера, есть простой способ сделать это. Это может быть полезно, если вы хотите отображать свою галерею только в одном столбце, двух столбцах или трех столбцах. Таким образом, вы можете иметь действительно большие изображения на рабочем столе и изображения меньшего размера на мобильных устройствах, сохраняя при этом номер столбца одинаковым. Наличие четырех или более столбцов, вероятно, не будет работать, поскольку изображения будут слишком маленькими для дисплеев телефона.

Допустим, вы хотите отображать три столбца во всех размерах браузера. Для этого откройте настройки модуля галереи Divi и добавьте следующий настраиваемый CSS в элемент галереи:

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

Теперь ваша галерея сохранит трехколоночную структуру для всех размеров браузера.

Если вам нужен макет из 2 столбцов для всех размеров браузера, все, что вам нужно сделать, это изменить значение свойства width на 50%.

Если вам нужен макет в 1 столбец, просто обновите ширину до 100%.

Вот и все.

Но если вы хотите получить больший контроль над количеством столбцов в определенных точках останова, читайте дальше.

Изменение количества столбцов для определенных точек останова

Если вы хотите получить полный контроль над количеством столбцов, отображаемых при достижении браузером определенных точек останова, мы можем использовать несколько фрагментов CSS с медиа-запросами, ориентированными на определенную ширину браузера.

Добавьте класс CSS в модуль галереи Divi

Прежде чем мы добавим настраиваемый CSS, сначала нам нужно предоставить нашему модулю галереи настраиваемый класс CSS, чтобы мы могли ссылаться на этот конкретный класс в нашем CSS. Это гарантирует, что наш CSS применяется только к этому конкретному модулю галереи. Для этого откройте настройки модуля галереи и добавьте следующий класс CSS на вкладку «Дополнительно»:

Класс CSS: ширина столбца

Не забудьте удалить пользовательский CSS, добавленный в элемент галереи в предыдущем разделе этой статьи, если вы его добавили.

После этого сохраните свои настройки.

Добавить собственный CSS в настройки страницы

Имея класс CSS на месте, вы готовы добавить пользовательский CSS. Откройте настройки страницы, щелкнув значок шестеренки на панели настроек внизу страницы (или вы можете использовать сочетание клавиш «o»).

Затем добавьте следующий настраиваемый CSS на вкладке «Дополнительно».

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

Этот CSS добавит настраиваемое количество столбцов к определенным точкам останова следующим образом:

Рабочий стол: 6 колонок
Таблетка: 4 колонки
Маленький планшет и большой телефон: 3 колонки
Телефон: 2 колонки

Понимание и настройка CSS

Взглянув на CSS, вы заметите, что он разбит на четыре отдельных медиа-запроса. Верхний медиазапрос добавляет стиль настольным браузерам (браузеры с минимальной шириной 981 пикселей). Второй медиа-запрос добавляет стиль браузерам размером с планшет и так далее.

В каждом медиа-запросе самый важный CSS, который не следует использовать, - это свойство width. Это определяет размер каждого элемента галереи, а также устанавливает ширину столбца для галереи.

Например, верхний медиа-запрос для настольных компьютеров устанавливает ширину элемента галереи равной 16,66%.

Это эквивалентно одной шестой общей ширины контейнера (или строки). Таким образом, на рабочем столе в галерее будет отображаться шесть столбцов.

Чтобы настроить количество столбцов на рабочем столе, все, что вам нужно сделать, это изменить свойство ширины на другое значение. Вот список процентов ширины, которые вы можете попробовать.

12 столбцов: 8,33%
10 столбцов: 10%
8 столбцов: 12,5%
6 столбцов: 16,66%
5 столбцов: 20%
4 столбца: 25%
3 столбца: 33,33%
2 столбца: 50%
1 столбец: 100%

Конечный результат

Вот окончательный результат для браузеров разной ширины.

Рабочий стол (6 столбцов)

Таблетка (4 колонки)

Маленький планшет и большой телефон (3 колонки)

Телефон (2 колонки)

Последние мысли

Я надеюсь, что это руководство было полезно для тех из вас, кто хочет получить больший контроль над количеством столбцов, отображаемых в вашей галерее на определенных устройствах или точках останова. С помощью этой настройки вы можете добавить любое количество столбцов по вашему желанию для любой ширины браузера, чтобы создать отображение галереи с учетом потребностей пользователя.

Точки останова, которые я использовал в настраиваемом CSS, - это те точки останова, которые уже использует Divi. Не стесняйтесь проверить нашу публикацию о том, как настроить ваш дизайн с помощью медиа-запросов, чтобы получить дополнительную информацию об этой концепции.

До следующего раза, я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!