Модуль Изображение Divi

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

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

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

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

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

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

Пример использования: добавление перекрывающихся изображений для иллюстрации служб на странице служб

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

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

Давайте начнем.

Используйте визуальный конструктор, чтобы добавить стандартный раздел с макетом 1/4 1/4 1/2. Затем добавьте текстовый модуль в правую 1/2 столбца вашей строки. Введите заголовок и описание услуги.

Затем добавьте модуль изображения в крайний левый столбец 1/4.

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

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

URL ссылки на изображение: [введите URL или загрузите изображение 500х625]

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

Внутренний отступ: 100px верх, -60px лево

Вкладка Расширенный

Анимация: справа налево

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

Это касается первого раздела. Теперь для следующего служебного раздела мы можем продублировать только что созданный раздел для первого служебного раздела. После того, как раздел будет продублирован, измените структуру столбцов строки на макет 1/2 1/4 1/4 столбца (противоположный предыдущему).

Затем перетащите текстовый модуль с заголовком службы и описанием в крайний левый столбец 1/2. Обязательно перетащите два модуля изображений, чтобы заполнить каждую четверть столбца (теперь справа).

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

Начиная с модуля изображения в крайнем правом столбце 1/4, обновите следующие настройки изображения:

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

URL ссылки на изображение: [введите URL или загрузите изображение 500х625]

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

Внутренний отступ: -60px лево

Вкладка Расширенный

Анимация: справа налево

Наконец, обновите настройки изображения для модуля изображения средней четверти столбца следующим образом:

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

URL ссылки на изображение: [введите URL или загрузите изображение 500х625]

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

Внутренний отступ: 100px верх, -60px право

Вкладка Расширенный

Анимация: слева направо

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

А теперь взгляните на страницу!

Вкладка Контент модуля Изображение

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

URL ссылки на изображение

Разместите здесь действительный URL-адрес изображения или выберите / загрузите изображение через медиа-библиотеку WordPress. Изображения всегда будут выровнены по левому краю в пределах своих столбцов и будут занимать всю ширину столбца. Однако ваше изображение никогда не будет масштабироваться больше, чем исходный размер загрузки. Высота изображения определяется соотношением сторон исходного изображения.

Открыть в Lightbox

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

Целевая ссылка на изображение

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

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

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

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

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

Выравнивание изображения

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

Рамка

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

Цвет рамки

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

Ширина рамки

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

Стиль рамки

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

Максимальная ширина

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

Расстояние

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

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

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты 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, разделенные точкой с запятой.

Автоматическая анимация

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

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

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