Модуль Галерея Divi

Как добавить, настроить и адаптировать под свои требования модуль Divi — Галерея.

Отображение коллекции изображений — всегда отличный способ визуально заинтересовать пользователей вашим контентом. Модуль «Галерея» позволяет создавать и организовывать галереи в любом месте вашего веб-сайта. Модуль галереи Divi Builder поставляется в формате сетки и слайдера и поддерживает большие галереи с разбивкой на страницы.

Как добавить модуль Галерея на свою страницу

Прежде чем вы сможете добавить модуль таблицы цен на свою страницу, вам сначала нужно перейти в Divi Builder. После установки темы Divi на ваш веб-сайт вы увидите кнопку «Использовать Divi Builder» над текстовым редактором страницы каждый раз, когда создаете новую страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder. Затем выберите один из трёх вариантов, чтобы запустить редактор страницы в визуальном режиме. Вы также можете нажать кнопку «Включить Visual Builder» при просмотре веб-сайта в интерфейсе пользователя, если вы вошли в свою панель управления WordPress.

После того, как вы вошли в Visual Builder, вы можете нажать серую кнопку с плюсом, чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы создаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть несколько уроков о том, как использовать строки и разделы Divi .

Найдите модуль галерея в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «галерея», а затем нажать клавишу ВВОД, чтобы автоматически найти и добавить модуль отзывов! После добавления модуля вы увидите список его параметров. Эти параметры разделены на три основные группы: Контент, Дизайн и Расширенный.

Пример использования: добавление полноразмерной галереи изображений в для отображения фотографий.

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

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

Используя Visual Builder, добавьте новый раздел под разделом заголовка с строкой в полную ширину (1 столбец). Затем добавьте модуль галереи в строку.

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

Вкладка Контент

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

Вкладка Дизайн

Макет: Сетка
Ориентация миниатюры: Альбомная
Overlay цвет иконки: #ffffff
Цвет фона наложения: rgba(0,0,0,0.48)
Наложение значка: default

Сохраните настройки

Теперь все, что осталось сделать, это избавиться от всего пространства вокруг изображений. Вернитесь и выберите настройки строки. На вкладке «Дизайн» обновите следующее:

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

Важно помнить, что числовое значение «1» для ширины желоба на самом деле равно нулю (никакой ширины).

Сохраните настройки

Готово!

Вкладка Контент модуля Галерея

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

Изображения

Нажмите кнопку «Обновить галерею», чтобы запустить медиа-библиотеку WordPress, где вы можете выбрать, какие изображения вы хотите отображать в своей галерее.

Количество изображений

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

Показать заголовок и подпись

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

Показать номера страниц

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

Метка администратора

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля в интерфейсе Divi Builder.

Вкладка Дизайн модуля Галерея

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

Макет

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

Ориентация миниатюры

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

Overlay цвет иконки

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

Цвет фона наложения

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

Наложение значка

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

Цвет текста

Здесь вы можете выбрать, должен ли ваш текст быть светлым или темным. Если вы работаете с темным фоном, ваш текст должен быть светлым. Если ваш фон светлый, тогда ваш текст должен быть темным.

Заголовок шрифт

Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и подчеркивание.

Заголовок размер текста

Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок цвет текста

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

Заголовок расстояние между букв

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить интервал между каждой буквой в тексте заголовка, используйте ползунок диапазона, чтобы отрегулировать интервал, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок высота строки

Высота строки влияет на расстояние между каждой строкой текста заголовка. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок шрифт

Вы можете изменить шрифт текста подписи, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и подчеркивание.

Заголовок размер текста

Здесь вы можете настроить размер текста подписи. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок цвет текста

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

Заголовок расстояние между букв

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в тексте заголовка, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок высота строки

Высота строки влияет на расстояние между каждой строкой текста подписи. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Рамка

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

Цвет рамки

Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в палитре цветов, чтобы применить его к границе.

Ширина рамки

По умолчанию границы имеют ширину 1 пиксель. Вы можете увеличить это значение, перетащив ползунок диапазона или введя настраиваемое значение в поле ввода справа от ползунка. Пользовательские единицы измерения поддерживаются, что означает, что вы можете изменить единицу измерения по умолчанию с «px» на что-то другое, например em, vh, vw и т. Д.

Стиль рамки

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

Вкладка Расширенный модуля Галерея

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю собственные классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS ID

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

Класс CSS

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

Пользовательский CSS

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

Отключить на:

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