Хотите узнать, как создавать собственные наложения изображений с помощью Divi ?
Наложения изображений уже давно используются в веб-дизайне. Они идеально подходят для вовлечения посетителей раскрывая содержание Дополнительные и элементы оформления при наведении на изображение.
В этом уроке мы покажем вам, как создавать собственные наложения изображений в Divi. Эти наложения будут меняться и отображать элементы при наведении курсора на изображение.
Плагины не нужны.
Давайте начнем!
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Создайте новую страницу с помощью Divi Builder
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Divi строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Создание пользовательских наложений изображений в Divi
Дизайн раздела, строки и столбцов
Для начала создайте строку из трех столбцов в разделе по умолчанию.
Откройте настройки раздела и добавьте следующий цвет фона:
- Фон: #3a0ca3
Затем откройте настройки столбца 1 и обновите следующее:
- Класс CSS: et-overlay-container
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: скрыто
Добавить изображение
Теперь, когда раздел, строка и столбец готовы, добавьте новый модуль изображения в столбец 1. Это будет основное изображение для нашего дизайна наложения.
Загрузите изображение, которое больше похоже на портрет, чем на пейзаж. Убедитесь, что он достаточно широк, чтобы охватить всю ширину столбца во всех размерах браузера.
ПРИМЕЧАНИЕ. Вы можете использовать альбомные изображения, но вам может потребоваться соответствующим образом отрегулировать положение элементов наложения, чтобы они не перекрывались.
Под вкладкой Проект, обновите следующее:
- Поле (снизу): 0px
Под вкладкой Фильтр, добавьте следующий класс CSS:
- Класс CSS: et-overlay-image
Добавление цвета наложения изображения с помощью модуля «Разделитель»
Чтобы создать цвет наложения изображения, мы будем использовать модуль Divider.
Сначала добавьте модуль Divider под изображением.
Затем расположите разделитель абсолютно так, чтобы он располагался над изображением:
- Позиция: Абсолют
Под вкладкой Содержание, обновите следующее:
- Показать разделитель: НЕТ
- Цвет фона: rgba (247,37,133,0.8)
Затем обновите высоту и ширину разделителя:
- Ширина: 100%
- Высота: 100%
Создав дизайн, добавьте в разделитель следующий класс CSS:
- и-оверлей-элемент
ПРИМЕЧАНИЕ. Этот класс следует добавить ко всем элементам дизайна наложения, которые вы хотите отображать только при наведении. Если вы не хотите, чтобы элемент был изначально скрыт, оставьте его.
Чтобы вам было легче отслеживать элементы/модули дизайна, откройте модальное окно слоев и назовите модуль Divider («Цвет наложения»).
Добавлен текст заголовка наложения
Под модулем Divider добавьте новый текстовый модуль. Это будет текст заголовка наложения, который будет отображаться поверх изображения при наведении.
Обновите содержание с названием H2:
<h2>Coaching</h2>Затем обновите метку текстового модуля для дальнейшего использования.
Под вкладкой Проект, обновите следующее:
- Выравнивание текста: по центру
- Цвет текста: светлый
- Шрифт: Cormorant Garamond
- Вес шрифта: полужирный
- Размер текста: 40 пикселей
- Ширина: 100%
- Максимальная ширина: 85%
Под вкладкой Фильтр, обновите позицию следующим образом:
- Позиция: Абсолют
- Расположение: вверху по центру
- Вертикальное смещение: 10%
ПРИМЕЧАНИЕ. Вертикальное смещение может потребоваться отрегулировать в зависимости от соотношения сторон изображения. Например, для изображения ландшафтного типа может потребоваться меньшее смещение.
Затем добавьте в текстовый модуль следующие классы CSS:
- Класс CSS: et-overlay-item move-down
В дополнение к классу «и элемент наложения», мы добавляем дополнительный класс «движение вниз» чтобы использовать пользовательский CSS для небольшого перемещения заголовка вниз при наведении.
Создание наложенного основного текста
Чтобы создать основную часть текста наложения, мы можем продублировать модуль Text, используемый для заголовка наложения. Перед обновлением повторяющихся параметров измените метку на «Тело наложения».
Откройте настройки текста нового модуля «Текст» и обновите содержание тела с несколькими предложениями абзаца текста.
Под вкладкой Фильтр, измените абсолютное расположение модуля на центр.
Поскольку мы не хотим, чтобы это перемещалось при наведении курсора (только появлялось), обновите класс CSS, чтобы включить только следующее:
- Класс CSS: et-overlay-item
Создание накладываемой кнопки
Последним наложением на это изображение будет кнопка. Чтобы создать кнопку, добавьте новый модуль Button под вторым модулем Text.
Перед изменением дизайна обновите положение кнопки следующим образом:
- Позиция: абсолютная
- Вертикальное смещение: 10%
Теперь кнопка должна располагаться по центру нижней части изображения.
Во вкладке Фильтр, обновите класс CSS и добавьте пользовательский фрагмент CSS к основному элементу следующим образом:
- Класс CSS: et-overlay-item move-up
- Основной элемент CSS:
min-width: 15em;Обратите внимание, что к кнопке был добавлен дополнительный класс, чтобы перемещать ее немного вверх при наведении. Это дополняет нисходящее движение текста заголовка при наведении.
Затем обновите следующие параметры дизайна:
- Выравнивание кнопок: по центру
- Использовать пользовательские стили для кнопки: ДА
- Размер текста кнопки: 14px
- Цвет фона: #4361ee
- Ширина границы кнопки: 0 пикселей
- Расстояние между буквами кнопки: 0,1 em
- Вес шрифта: полужирный
- Стиль шрифта кнопки: TT
- Отступы: 0,8em (сверху и снизу), 0px (слева и справа)
Добавление пользовательского CSS с помощью модуля «Код»
Добавьте модуль кода под кнопкой.
Затем вставьте следующий CSS в содержимое кода. Не забудьте заключить код в необходимые теги script.
<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
В следующем дизайне мы поместим кнопку в центр изображения (всегда видимую). Затем мы переместим заголовок и основной текст в поле зрения сверху и снизу изображения.
Отрегулируйте размещение основного текста и класс CSS
Откройте настройки модуля основного текста наложения в столбце 2 и обновите позицию:
- Расположение: нижний центр
- Вертикальное смещение: 5%
Затем обновите класс CSS следующим образом:
- Класс CSS: перемещение элемента et-overlay
Настройте расположение кнопки и класс CSS
Затем откройте настройки кнопки в столбце 2 и обновите следующее местоположение позиции:
- Расположение: Центр
Затем удалите класс CSS, так как мы хотим, чтобы кнопка всегда оставалась видимой.
Откройте настройки модуля Divider (overlay color) и измените фон следующим образом:
- Фон: rgba(67,97,238,0.8)
Затем откройте настройки кнопки и измените цвет фона:
- Цвет фона: #f72585
Настройте изображение и класс CSS
Затем откройте настройки изображения и загрузите новое изображение (при желании).
Затем добавьте к изображению следующий класс CSS:
- Класс CSS: et-overlay-image et-scale
Обратите внимание, что в дополнение к классу «et-overlay-image» есть дополнительный класс, называемый «et-scale», который увеличивает размер изображения, создавая эффект увеличения при наведении.
Создание дизайна наложения изображения #3
Теперь пришло время создать третий дизайн наложения изображения в столбце 3.
Отрегулируйте содержимое основного текста наложения и класс CSS
Начните с открытия настроек модуля основного текста наложения в столбце 3. Затем добавьте заголовок H2 над текстом абзаца. Теперь оба будут внутри модуля.
Затем удалите класс CSS, чтобы текст оставался видимым над изображением.
Отрегулируйте смещение кнопки и класс CSS
Откройте настройки модуля Button и обновите смещение положения по вертикали:
- Вертикальное смещение: 5%
Удалить заголовок наложения
Затем удалите модуль Overlay Header Text.
Настройка цвета наложения и класса CSS
Откройте настройки модуля Divider (overlay color) и обновите фон следующим образом:
- Цвет градиента левого фона: rgba(67,97,238,0.8)
- Цвет градиента правого фона: rgba (247,37,133,0.8)
- Исходное положение: 25%
- Итоговая позиция: 75%
А так как мы хотим, чтобы наложение градиента было всегда видимым, удалите класс CSS.
Настройте класс CSS изображения
Наконец, мы добавим к основному изображению дополнительный класс CSS («et-rotate»), который будет изменять размер и поворачивать изображение при наведении.
- Класс CSS: et-overlay-image et-rotate
Последние штрихи
Прежде чем проверять наши окончательные результаты, нам нужно внести некоторые коррективы.
Удалить нижнее поле по умолчанию для всех модулей
Поскольку мы уже обновили поле с нижним полем 0 пикселей, мы можем расширить это поле для всех модулей.
Щелкните правой кнопкой мыши параметр поля и выберите «Расширить поле».
Затем выберите расширение поля для всех модулей на странице.
Удалить повторяющиеся модули кода
Обязательно удалите лишние модули кода, которые были перенесены из первого дублирования столбца. У вас должен быть только один. Вы можете легко сделать это из модальных слоев.
Конечные результаты
Теперь, когда наши три дизайна завершены, давайте посмотрим на окончательные результаты наших дизайнов наложения изображений.
Скачайте DIVI прямо сейчас!!!
А вот и дизайн на мобильном. Эффекты наложения при наведении применяются только на рабочем столе. Поэтому оверлеи по-прежнему будут видны на мобильных устройствах.
Скачайте DIVI прямо сейчас!!!
Заключение
Создание пользовательских наложений изображений на самом деле очень весело. Существует бесчисленное множество проектов, которые вы можете визуально протестировать с помощью Divi Builder.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
