Как создать наложение на изображения с помощью Divi Builder

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

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

ожидаемый результат

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

Необходимые компоненты перед началом работы

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

• Установите и активируйте Divi
• Создайте новую страницу в WordPress и используйте Divi Builder во внешнем интерфейсе.
• Выберите вариант «Строить с нуля».

Если после этого у вас будет пустая страница, то вы готовы к работе.

Создание пользовательских наложений изображений в Divi

Построение сечения, ряда и колонн

Начнем с выбора строки из трех столбцов внутри раздела по умолчанию.

Откройте настройки раздела и используйте следующий цвет фона:

• Цвет фона: # 3a0ca3

Затем перейдите к настройкам столбца 1 и измените следующие параметры:

• Класс CSS: et-overflow-container
• Горизонтальное переливание: скрыто
• Вертикальный перелив: скрытый

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

Добавление изображения

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

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

На вкладке дизайна измените следующее:

• Поля: низ 0 пикселей

На расширенной вкладке добавьте следующий класс CSS:

• Класс CSS: et-overlay-image

Выбор цвета наложения изображения с помощью модуля разделителя

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

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

Затем поместите разделитель как абсолютный, чтобы он отображался поверх изображения:

• Позиция: Абсолютная

На вкладке содержимого обновите следующее:

• Показать разделитель: НЕТ
• Цвет фона: rgba (247,37,133,0,8)

Затем измените высоту и ширину разделителя:

• Ширина: 100%
• Высота: 100%

После определения дизайна добавьте в разделитель следующий класс CSS:

• Et-overlay-item

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

При желании вы можете пометить разделитель как наложение с четко идентифицируемым именем. Это можно сделать из слоя, и вы можете использовать «Overlay».

Добавление текста заголовка

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

Измените содержимое заголовком H2:

<h2>Happiness</h2>

Вы также можете изменить метку текстового модуля для использования в дальнейшем.

В настройках дизайна текста измените это:

• Выравнивание текста: по центру
• Цвет текста: светлый

• Шрифт заголовка 2: Cormorant Garamond
• Толщина шрифта заголовка 2: полужирный
• Размер текста заголовка 2: 40 пикселей

• Ширина: 100%
• Макс.ширина: 85%

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

• Позиция: Абсолютная
• Расположение: центр вверху
• Вертикальное смещение: 10%

Предупреждение. Вертикальное смещение может потребоваться отрегулировать в соответствии с размером формата изображения.

Затем добавьте в текстовый модуль следующие классы CSS:

• Класс CSS: перемещение вниз et-overlay-item

В дополнение к классу «et-overlay-item» мы добавляем дополнительный класс «move-down», чтобы с помощью настраиваемого CSS перемещать заголовок немного вниз при наведении курсора.

Создание основного текста наложения

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

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

На вкладке «Дополнительно» измените абсолютное расположение модуля на центр.

Поскольку мы не хотим, чтобы этот объект перемещался при наведении (только отображался), обновите класс CSS, включив только следующее:

• Класс CSS: et-overlay-item

Создание кнопки наложения

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

Перед обновлением дизайна изменим положение кнопки следующим образом:

• Позиция: абсолютная
• Вертикальное смещение: 10%

Теперь кнопка должна быть по центру в нижней части изображения.

На вкладке «Дополнительно» обновите класс CSS и добавьте фрагмент настраиваемого CSS в основной элемент следующим образом:

• Класс CSS: перемещение вверх et-overlay-item
• Основной элемент CSS: min-width: 15em

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

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

• Расположение кнопок: по центру
• Размер текста кнопки: 14 пикселей
• Цвет фона кнопки: # 4361ee
• Кнопка Ширина границы: 0 пикселей
• Расстояние между буквами кнопок: 0,1 м
• Толщина шрифта кнопок: жирный
• Стиль шрифта кнопки: TT
• Отступ: 0.8em сверху, 0.8em снизу, 0 пикселей слева, 0 пикселей справа

Дополнение модулем пользовательского кода

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

Затем вставьте следующий CSS в содержимое кода. Не забудьте заключить код в необходимые теги скрипта.

<style>@media all and (min-width: 981px) { .et-fb-root-ancestor .et-overlay-item {opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/}.et-overlay-item {opacity: 0; /*hides overlay items by default*/margin-bottom: 0px;}.et-overlay-item, .et-overlay-image {transition: all 400ms !important; /*sets transition speed of all overlay items*/}.et-overlay-container:hover .et-overlay-item {opacity: 1; /*reveals hidden overlay items on hover*/}.et-overlay-container:hover .et-overlay-image {/*add new styles here to change image on hover*/}.et-overlay-container:hover .et-overlay-image.et-scale {transform: scale(1.2); /*adjust scale of image here*/}.et-overlay-container:hover .et-overlay-image.et-rotate {transform: scale(1.4)rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/}  .et-overlay-container:hover .et-overlay-item.move-up {margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/}.et-overlay-container:hover .et-overlay-item.move-down {margin-top: 10%; /*adjust how far you want the overlay item to move down*/} }</style>

В коде есть некоторые комментарии, чтобы вы могли понять, где можно настроить CSS по мере необходимости.

Дублирование столбца для других разделов

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

Я позволю вам решить, какой набор цветов вы примените к столбцам 2 и 3. Давайте не будем смотреть, каков будет окончательный результат.

Окончательные результаты

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

Резюме

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