Пропустить

Учебник по Divi: Как использовать модуль Галерея изображений

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

галерея пример divi.png

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

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

divi builder

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

фотогалерея divi.png

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

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

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

создание галереи изображений divi.jpg

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

Добро пожаловать, Гость.

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

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

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

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

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

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

divi wordpress tutorial content section.png

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

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

конфигурация зазора goutière.png

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

Вот так!

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

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

divi module gallery.png

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

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

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

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

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

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

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

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

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

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

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

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

галерея модуль zone.png

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

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

Цвет текста

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

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

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

Размер шрифта заголовка

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

Цвет текста заголовка

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

Интервал заглавных букв

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

Высота строки заголовка

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

Легендарный шрифт

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

Размер шрифта легенды

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

Цвет текста легенды

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

интервал букв легенды divi.png

Интервал букв легенды

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

Высота линии легенды

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

Использовать границу

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

Цвет границы

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

Ширина границы

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

Стиль обрамления

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Расширенные параметры модуля галереи

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

опционный модуль divi.png

CSS-идентификатор

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

Класс CSS

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

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

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

видимость

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

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

Эта статья содержит комментарии 4

    1. Привет,

      Вы должны использовать плагин, такой как Visual Composer или Elementor. Они предлагают больше возможностей.

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

    1. Добрый вечер Бернард,

      Чтобы заблокировать правый клик, вам необходимо установить плагин. Я приглашаю вас сделать поиск по каталогу WordPress.

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
6 акции
доля2
чирикать
Регистрация4