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

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

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

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

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

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

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

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

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

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

Параметры содержимого

Изображения галереи: нажмите обновленную галерею и выберите изображения, которые хотите включить в галерею. Количество изображений: 12 Отображение заголовка и подписи: НЕТ Отображение страницы: НЕТ

Варианты дизайна

Макет: Сетка Ориентация миниатюр: Пейзаж Значок масштабирования Цвет: #ffffff Цвет при наведении курсора: rgba (0,0,0,0.48) Выбор значка при наведении: по умолчанию

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

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

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

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

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

Вот так!

Параметры содержимого модуля Gallery

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

Фотографии галереи

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

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

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

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

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

Просмотр разбивки на страницы

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

Ярлык администратора

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Варианты дизайна модуля галереи

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

Предоставление

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

Ориентация эскизов

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

Цветной значок увеличения

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

Цвет наложения при наведении

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

Значок выбора полета (при наведении курсора)

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

Цвет текста

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

Название шрифта

Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. 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-идентификатор

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

Класс CSS

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

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

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

видимость

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

[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin