Divi позволяет легко добавлять изображения в любом месте. ваш блог. Все изображения поддерживают прогрессивную загрузку и имеют 4 различных стиля анимации, которые делают навигацию по вашему сайту увлекательной и увлекательной. Модули изображений можно разместить в любом созданном вами столбце, и их размер будет подогнан по размеру.
Как добавить модуль изображения из Divi
Прежде чем вы сможете добавить модуль изображения на свою страницу, вы должны сначала перейти в Divi Builder. Однажды Диви тема установлен на вашем сайте, вы увидите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой веб-сайт на переднем плане, если вы подключены к своей панели управления WordPress.
После активации Visual Builder вы можете нажать серую кнопку (+), чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу.
Найдите модуль изображения в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модов доступен для поиска, что означает, что вы также можете ввести слово «изображение» и затем нажать Enter, чтобы автоматически найти и добавить мод для изображения! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .
Пример использования: добавление перекрывающихся изображений для иллюстрации услуг на странице услуг
Есть бесчисленное множество способов использовать модуль изображений. В этом примере я покажу вам, как добавлять изображения на страницу услуг для веб-сайта малого бизнеса. Вот куда я добавлю изображения. Каждый красный кружок представляет собой изображение.
Поскольку добавление изображения на страницу — довольно простой и понятный процесс, я собираюсь добавить некоторые пользовательские стили, чтобы расположить мои изображения таким образом, чтобы они перекрывались, создавая эффект стека.
Давайте начнем.
Используйте визуальный конструктор, чтобы добавить стандартный раздел с макетом 1/4 1/4 1/2. Затем добавьте текстовый модуль в правый столбец 1/2 вашей строки. Введите заголовок и описание услуги.
Затем добавьте модуль изображения в крайний левый столбец 1/4.
Обновите настройки модуля Image следующим образом:
Параметры содержимого
URL изображения: [введите URL или загрузите изображение размером 500 × 625]
Варианты дизайна
Пользовательская маржа: слева -60px
Опции avancées
Мультработа: слева направо
Сохранить настройки
Добавьте еще один модуль изображения во второй столбец 1/4 (или средний столбец) и обновите настройки изображения следующим образом:
Параметры содержимого
URL изображения: [введите URL или загрузите изображение размером 500 × 625]
Варианты дизайна
Пользовательское поле: сверху 100px, -60px слева
Опции avancées
Мультработа: справа налево
Сохранить настройки
Это касается первого раздела. Теперь для следующего служебного раздела мы можем продублировать только что созданный раздел для первого служебного раздела. Как только раздел будет продублирован, измените структуру столбцов на макет 1/2 1/4 1/4 столбца (противоположный предыдущему).
Затем перетащите текстовый модуль с заголовком и описанием услуги в крайний левый столбец 1/2. Не забудьте сдвинуть два модуля изображения, чтобы заполнить каждую четверть столбца (теперь справа).
Поскольку модули изображений дублируются, нам необходимо загрузить новые изображения для этого конкретного раздела службы. Кроме того, у модулей всегда есть настраиваемые параметры полей, как у первых двух созданных модулей изображений. Давай изменим это.
Начиная с модуля Image в правом столбце 1 / 4, обновите следующие параметры изображения:
Параметры содержимого
URL изображения: [введите URL или загрузите изображение размером 500 × 625]
Варианты дизайна
Пользовательское поле: -60px слева (только)
Вкладка "Дополнительно"
Мультработа: справа налево
Наконец, обновите настройки изображения для модуля изображения 1/4 центрального столбца следующим образом:
Параметры содержимого
URL изображения: [введите URL или загрузите изображение размером 500 × 625]
Варианты дизайна
Пользовательское поле: 100px Up, -60px Right
Вкладка "Дополнительно"
Мультработа: слева направо
Сохранить настройки
Теперь просмотрите страницу!
Параметры содержимого модуля изображения
На вкладке «Содержимое» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролирует какие появляется в вашем модуле, всегда будет найден в этой вкладке.
URL изображения
Разместите здесь действительный URL-адрес изображения или выберите / загрузите изображение через медиа-библиотеку WordPress. Изображения всегда будут выровнены по левому краю в своих столбцах и будут занимать всю ширину столбца. Однако ваше изображение никогда не будет больше исходного размера. Высота изображения определяется соотношением сторон исходного изображения.
Открыть в окне просмотра
Здесь вы можете выбрать, будет ли ваше изображение открываться в средстве просмотра при нажатии на него. Если этот параметр включен, ваше изображение будет "увеличиваться" до максимального размера, когда вы щелкаете мышью в модальном окне. Это отличная функция для кошельков.
URL ссылки
Поместите действующий URL-адрес в это поле, чтобы превратить ваше изображение в ссылку. Если оставить это поле пустым, ваше изображение останется статическим элементом.
Открытие URL
Здесь вы можете выбрать, будет ли ваша ссылка открываться в новом окне.
Ярлык администратора
Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.
Параметры дизайна модуля изображения
На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список настроек дизайна, которые вы можете использовать, чтобы изменить что угодно.
Наложение изображения
Если этот параметр включен, при наведении курсора на изображение отображаются цвет и значок наложения.
Наложение цветного значка
Здесь вы можете установить собственный цвет для значка наложения
Цвет обложки покрытия
Здесь вы можете определить собственный цвет для наложения.
Значок полета
Здесь вы можете определить пользовательский значок для наложения.
Удалить пространство под изображением
Этот параметр влияет только на изображения, когда они являются последним модулем в столбце. Когда этот параметр включен, расстояние между нижней частью изображения и следующим разделом удаляется, что позволяет изображению помещаться в верхнюю часть следующего раздела страницы.
Выравнивание изображения
Здесь вы выбираете направление, в котором ваше изображение плавает в столбце. Вы можете перемещать изображение влево, вправо или удерживать его по центру.
Всегда центрируйте изображение на мобильном телефоне
Часто небольшие изображения более приятны для глаз на мобильных устройствах, когда они расположены по центру. Когда столбцы выходят из строя, изображения, выровненные по левому или правому краю в меньших столбцах, становятся потерянными, когда столбцы выходят из строя и достигают 100% ширины. Включение этого столбца с принудительным выравниванием изображений по центру столбца на мобильном устройстве без влияния на выравнивание изображений на настольных компьютерах.
Использовать границу
Включение этой опции поместит рамку вокруг вашего модуля. Эту границу можно настроить с помощью следующих условных параметров.
Цвет границы
Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в палитре цветов, чтобы применить его к границе.
Ширина границы
По умолчанию ширина границ составляет 1 пиксель. Вы можете увеличить это значение, перетащив ползунок диапазона или введя произвольное значение в поле ввода справа от ползунка. Поддерживаются пользовательские единицы измерения, что означает, что вы можете изменить единицу измерения по умолчанию с «px» на что-то другое, например em, vh, vw и т. Д.
Стиль границ
Границы поддерживают восемь различных стилей: сплошной, точечный, точечный, двойной, бороздка, гребень, наложение и начало. Выберите желаемый стиль из раскрывающегося меню, чтобы применить его к границе.
Максимальная ширина изображения
По умолчанию максимальная ширина изображения установлена на 100%. Это означает, что изображение будет отображаться с естественной шириной, если только ширина изображения не превышает ширину родительского столбца, и в этом случае изображение будет ограничено 100% ширины столбца. Если вы хотите дополнительно ограничить максимальную ширину изображения, вы можете сделать это, введя здесь желаемое значение максимальной ширины. Например, значение 50% ограничит ширину изображения 50% ширины родительского столбца.
Сила полной ширины
По умолчанию изображения отображаются с исходной шириной. Однако вы можете заставить изображение занимать всю ширину родительского столбца, включив этот параметр.
Пользовательская маржа
Поле - это пространство, добавленное за пределами вашего модуля, между модулем и следующим элементом выше, ниже или слева и справа от него. Вы можете добавить собственные значения полей к любой из четырех сторон модуля. Чтобы удалить настраиваемое поле, удалите добавленное значение из поля ввода. По умолчанию эти значения измеряются в пикселях, но вы можете ввести собственные единицы измерения в поля ввода.
Расширенные возможности модуля изображения
На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты 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
