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

С тех пор, как появились новые параметры размера Divi, мы создали несколько руководств, которые покажут вам, как создавать всплывающие окна. В этих уроках скрытый контент размещался вертикально. Однако в некоторых случаях вы можете вместо этого создать горизонтальный откос. В этом посте мы покажем вам, как открывать изображения с помощью сетки наведения и параметров переполнения Divi. Чтобы сделать эту работу, требуется немного другой подход. Мы будем использовать строку из одного столбца и разместить все модули друг под другом, а при наведении курсора мы преобразуем столбец в горизонтальную сетку. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

Скачать The Hover Grids Layout БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету сетки при наведении, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Начнем воссоздавать!

Подпишитесь на наш канал Youtube

Добавить новый раздел

Начните с добавления нового обычного раздела на страницу, над которой вы работаете.

Добавить новую строку

Структура столбца

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

Фон градиента по умолчанию

Еще не добавляя никаких модулей, откройте настройки строки и добавьте следующий градиентный фон:

• Цвет 1: # b1ffc4
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 28%
• Конечная позиция: 28%

Наведите градиентный фон

Измените градиентный фон при наведении курсора.

• Цвет 1: # b1ffc4
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: влево
• Стартовая позиция: 5%
• Конечная позиция: 5%

Интервал

Перейдите к настройкам интервалов и затем измените значения отступов и полей.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Верхнее поле: 50 пикселей
• Нижнее поле: 50 пикселей

Граница по умолчанию

Затем добавьте радиус границы 50 пикселей к верхнему правому и нижнему правому углам.

Граница при наведении

Верните углы на 0 пикселей при наведении курсора.

Тень бокса по умолчанию

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

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.09)

Hover Box Shadow

Удалите тень блока при наведении, заменив цвет тени на полностью прозрачный.

• Цвет тени: rgba (0,0,0,0)

Добавить текстовый модуль в столбец

Добавить контент H2

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

Настройки текста H2

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

• Шрифт заголовка 2: Acme
• Стиль шрифта заголовка 2: подчеркивание
• Цвет подчеркивания заголовка 2: # 00ff3f
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 3vw

Интервал

Затем добавьте несколько пользовательских значений заполнения.

• Верхняя обивка: 6vw
• Нижняя обивка: 7vw
• Левый отступ: 2vw

Добавить модуль изображения в столбец

Загрузить изображение

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

Лайтбокс

Затем включите опцию лайтбокса в настройках ссылки.

• Открыть в лайтбоксе: Да

Размеры

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

• Принудительная полная ширина: Да

Клонировать модуль изображения дважды

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

Изменить изображения

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

Добавить эффект наведения на строку

Размеры

Теперь, когда мы завершили основные настройки строк и модулей, пришло время задействовать эффект наведения! Мы начнем с изменения высоты и ширины строки и скрытия переполнения. Откройте настройки размера строки и внесите следующие изменения:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 20%
• Максимальная ширина: 100%
• Высота: 15.9vw

Размер при наведении

Верните ширину "100%" при наведении курсора. Это позволит изображениям отображаться при наведении курсора на строку.

• Ширина: 100%

Видимость

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Переходы

Мы также меняем длительность перехода в настройках переходов.

• Продолжительность перехода: 0 мс

Столбец Hover Главный элемент

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

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

Клонировать строку дважды

Завершив первую строку, вы можете клонировать ее столько раз, сколько захотите. В этом конкретном примере дизайна мы дважды клонируем строку.

Изменить повторяющийся градиентный фон строки №1

Измените первый цвет градиента фона градиента второй строки.

• Цвет 1: # ffdc96

Изменить градиентный фон для повторяющейся строки №2

Проделайте то же самое с третьим рядом.

• Цвет 1: # b7c7ff

Изменить текстовый модуль Копирование и цвет подчеркивания обоих дубликатов

Продолжите, изменив цвет подчеркивания обоих дубликатов текстового модуля вместе с копией, и все готово!

• Цвет подчеркивания # 1: # ffaa00
• Цвет подчеркивания # 2: # 0037ff

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам, как отображать изображения в горизонтальной сетке при наведении курсора, используя параметры переполнения Divi. Изображения открывались при наведении курсора на рабочий стол и нажатии на планшете / телефоне. Хотя мы показали изображения, вы можете показать любой контент, который захотите, изменив настройки внутри конструктора. Мы надеемся, что этот урок вдохновит вас на создание собственных альтернативных дизайнов сетки при наведении курсора! Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.