Поскольку новые варианты размеров Divi были выпущены, есть несколько руководств, которые покажут вам, как создавать всплывающие окна при наведении. В этих уроках содержание маска была размещена вертикально. Однако в некоторых случаях вам может потребоваться создать горизонтальный вырез. В этом уроке мы покажем вам, как отображать изображения с помощью сеток при наведении и параметров переполнения. Divi. Выполнение этой работы требует немного другого подхода. Мы собираемся использовать ряд из одного столбца и расположить все модули один под другим. При наведении мы превратим столбец в горизонтальную сетку. Вы также можете скачать файл JSON бесплатно!
Пойдем.
обследование
Прежде чем мы углубимся в руководство, давайте быстро посмотрим, как он выглядит на экранах разных размеров.
Приступим к воссозданию!
Добавить новый раздел
Начните с добавления нового обычного раздела на страницу, над которой вы работаете.
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку, используя следующую структуру столбцов:
Фон градиента по умолчанию
Еще не добавляя никаких модулей, откройте настройки строки и добавьте следующий градиентный фон:
- Цвет 1: #b1ffc4
- 2 цвет: #ffffff
- Тип градиента: Радиальный
- Радиальное Направление: Центр
- Начальная позиция: 28%
- Конечная позиция: 28%
Пролетая над градиентным фоном
Измените градиентный фон при наведении.
- Цвет 1: #b1ffc4
- 2 цвет: #ffffff
- Тип градиента: Радиальный
- Радиальное направление: слева
- Начальная позиция: 5%
- Конечная позиция: 5%
расстояние
Перейдите к настройкам интервала, а затем измените значения отступов и полей.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
- Верхнее поле: 50px
- Нижнее поле: 50px
Граница по умолчанию
Добавьте границу с радиусом 50 пикселей в правом верхнем и правом нижнем углах.
Граница при наведении
Верните углы к «0px» при наведении курсора.
Тень по умолчанию
Затем добавьте тонкую тень блока, используя следующие настройки:
- Box Shadow Blur Force: 50px
- Цвет тени: rgba (0,0,0,0.09)
Hover Box Shadow
Удалите тень от поля при наведении курсора, изменив цвет тени на полностью прозрачный.
- Цвет тени: rgba (0,0,0,0)
Добавить текстовый модуль в столбец
Добавить контент H2
Пришло время начать добавлять модули, начиная с текстового модуля. Введите содержание H2 на ваш выбор.
Настройки текста H2
Перейдите на вкладку Дизайн и измените настройки текста H2 соответственно:
- Название 2 Police: Acme
- Заголовок 2 Стиль шрифта: подчеркнутый
- Заголовок 2 Цвет подчеркивания: # 00ff3f
- Заголовок 2 Цвет текста: # 000000
- Размер текста заголовка 2: 3vw
расстояние
Затем добавьте пользовательские значения заполнения.
- Лучший отступ: 6vw
- Нижняя обивка: 7vw
- Левая обивка: 2vw
Добавьте модуль изображения в столбец
Загрузить изображение
Второй модуль, который нам нужен в этом столбце, - это модуль изображения. Загрузите изображение с альбомной ориентацией по вашему выбору.
Светлая коробка
Затем активируйте опцию лайтбокса в настройках ссылки.
- Открыть в программе просмотра: да
калибровка
И установите полную ширину изображения в настройках размера. Это гарантирует, что изображение останется чувствительным при всех размерах экрана.
- Принудительная полная ширина: да
Клонировать модуль изображения дважды
После того, как вы завершили первый модуль изображения, вы можете скопировать его дважды.
Изменить изображения
Измените изображения в двух дубликатах. Убедитесь, что загружаемые изображения такого же размера, как и первое изображение.
Добавьте к строке эффект опрокидывания
калибровка
Теперь, когда мы завершили основные настройки строк и модулей, пришло время создать эффект наведения! Мы начнем с изменения высоты и ширины строки и скроем переливы. Откройте настройки размера строки и внесите следующие изменения:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Ширина: 20%
- Максимальная ширина: 100%
- Высота: 15.9vw
парящий
Уменьшите ширину до «100%» при наведении курсора. Это позволит отображать изображения после наведения курсора на строку.
- Ширина: 100%
видимость
Переключитесь на следующую расширенную вкладку и скройте переполнения. Это гарантирует, что изображения будут замаскированы перед посетителей наведите (на рабочем столе) или щелкните (на планшете/мобильном устройстве) текстовый модуль.
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Переходы
Также мы меняем продолжительность перехода в параметрах перехода.
- Продолжительность перехода: 0ms
Элемент опрокидывания основного столбца
Чтобы создать сетку при наведении курсора, мы откроем настройки столбца, перейдем на вкладку Дополнительные параметры и разместим следующие строки кода CSS в основном элементе при наведении курсора:
дисплей: сетка; grid-template-columns: 20% 25% 25% 25%; разрыв сетки: 10px;
Клонируйте линию дважды
Завершив первую строку, вы можете клонировать ее столько раз, сколько захотите. Для этого конкретного примера дизайна мы дважды клонируем строку.
Изменить градиентный фон линии 1
Измените цвет первого градиента на фоне градиента второй линии.
- Цвет 1: # ffdc96
Изменить градиентный фон линии 2
Сделайте то же самое для третьего ряда.
- Цвет 1: # b7c7ff
Изменить копию текстового модуля и цвет подчеркивания двух дубликатов
Продолжите, изменив цвет подчеркивания дубликатов текстового модуля с копией, и все готово!
- Подчеркнутый цвет # 1: # ffaa00
- Подчеркнутый цвет # 2: # 0037ff
Заключительные мысли
В этом уроке мы показали вам, как отображать изображения в горизонтальных сетках при наведении, используя параметры переполнения. Divi. Изображения открывались при наведении курсора на рабочий стол и нажатии на планшете/телефоне. Хотя мы показали изображения, вы можете раскрыть содержание по вашему выбору, изменив параметры генератора. Мы надеемся, что этот урок вдохновит вас на создание собственных альтернативных дизайнов сетки при наведении! Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!
