Как создать бесшовную сетку при наведении курсора с помощью Divi

Если вам нравится создавать веб-сайты с учетом взаимодействия с пользователем, вам понравится это руководство по дизайну Divi. Сегодня мы покажем вам, как создать бесшовную сетку при наведении курсора. Дизайн изначально простой и чистый. Как только кто-то наводит курсор на один из элементов, открывается фоновое изображение, и стили модуля меняются вместе с ним. В результате получается прекрасный опыт зависания. В этом руководстве мы шаг за шагом проведем вас через процесс создания. Вы также сможете бесплатно скачать файл JSON макета!

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

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

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

Рабочий стол

Мобильный

Скачать макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

Фоновый цвет

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

• Цвет фона: #ffffff

Добавить строку №1

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

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

Размеры

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

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

Интервал

Затем удалите все стандартные верхние и нижние отступы.

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

Граница

И включите верхнюю и нижнюю границу.

• Ширина верхней и нижней границы: 1px
• Цвет верхней и нижней границы: # d3d3d3

Столбец 1 Настройки

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

Далее у нас есть настройки столбца 1. Примените градиентный фон при наведении курсора.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: # 000000
• Тип градиента: линейный
• Стартовая позиция: 30%

Фоновое изображение при наведении

Загрузите фоновое изображение при наведении курсора.

• Размер фонового изображения: обложка
• Положение фонового изображения: по центру

CSS-класс

И завершите настройки столбца, назначив следующий класс CSS на расширенной вкладке:

• Класс CSS: наведение-столбец

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

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

Пора добавлять модули, начиная с первого текстового модуля в столбце 1. Используйте контент H3 по вашему выбору.

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

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

• Шрифт заголовка 3: Oswald
• Толщина шрифта заголовка 3: Ультра легкий
• Стиль шрифта заголовка 3: прописные
• Цвет текста заголовка 3: # 0a0a0a
• Размер текста заголовка 3:
  • Рабочий стол: 3vw
  • Таблетка: 7vw
  • Телефон: 14vw
• Интервал между буквами заголовка 3: -2 пикселя

Размеры

Измените ширину для разных размеров экрана в настройках размера.

• Ширина:
  • ПК: 44%
  • Таблетка: 48%
  • Телефон: 50%

Интервал

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

• Нижняя маржа: 25vh
• Верхняя набивка: 5%
• Нижняя обивка: 5%
• Левый отступ: 7%
• Правое заполнение: 7%

Граница

Затем мы добавим правую и нижнюю границы.

• Ширина правой и нижней границы: 1px
• Ширина правой и нижней границы: 1px
• Цвет правой и нижней границы: # d3d3d3

CSS-класс

И мы завершим настройку модуля, назначив текстовому модулю следующий класс CSS:

• Класс CSS: заголовок при наведении

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

Добавить содержимое

Добавьте еще один текстовый модуль прямо под предыдущим с некоторым описанием по вашему выбору.

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

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

• Шрифт текста: Karla
• Цвет текста: #ffffff
• Размер текста:
  • Рабочий стол: 0.8vw
  • Таблетка: 2vw
  • Телефон: 3.6vw
• Высота текстовой строки: 2.2em

Интервал

Также примените некоторые пользовательские значения заполнения.

• Нижняя обивка: 10%
• Левый отступ: 9%
• Правое заполнение: 9%

CSS-класс

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

• Класс CSS: текст при наведении

Добавить модуль кнопок в столбец 2

Добавить копию

Следующий и последний модуль, который нам нужен, - это кнопочный модуль. Добавьте какую-нибудь копию по вашему выбору.

Настройки кнопок

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки:
  • Рабочий стол: 1vw
  • Таблетка: 2,5 ВВт
  • Телефон: 4vw
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Karla
• Показать значок кнопки: Да
• Расположение значка кнопки: слева
• Показывать значок только при наведении курсора на кнопку: Нет

Интервал

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

• Нижняя маржа: 8%
• Левая маржа: 9%
• Правая маржа: 9%
• Нижняя обивка: 5%
• Правое заполнение: 20%

Коробка Тень

Затем примените тень блока.

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 2 пикселя
• Цвет тени: # 000000

CSS-класс

И завершите настройку модуля, назначив кнопке следующий класс CSS:

• Класс CSS: кнопка наведения

Повторное использование столбца 1

Удалить столбцы 2, 3 и 4

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

Клонировать столбец 1 три раза

Мы повторно используем столбец 1, клонировав его три раза.

Изменение повторяющихся фоновых изображений при наведении курсора на столбец

Измените повторяющиеся фоновые изображения столбца в каждом повторяющемся столбце.

Изменить повторяющийся контент

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

Уникальные границы столбцов

Столбец 1

Нам нужно будет применить некоторые уникальные настройки границы к каждому столбцу, начиная со столбца 1.

• Ширина правой границы:
  • Рабочий стол: 1px
  • Таблетка: 1px
  • Телефон: 0px
• Цвет правой границы: # d3d3d3
• Ширина нижней границы:
  • Рабочий стол: 0px
  • Таблетка: 1px
  • Телефон: 1px
• Цвет нижней границы: # d3d3d3

Колонка 2

Далее у нас есть столбец 2.

• Ширина правой границы:
  • Рабочий стол: 1px
  • Таблетка: 0px
  • Телефон: 0px
• Цвет правой границы: # d3d3d3
• Ширина нижней границы:
  • Рабочий стол: 0px
  • Таблетка: 1px
  • Телефон: 1px
• Цвет нижней границы: # d3d3d3

Колонка 3

И мы будем использовать следующие настройки границы для столбца 3:

• Ширина правой границы:
  • Рабочий стол: 1px
  • Таблетка: 1px
  • Телефон: 0px
• Цвет правой границы: # d3d3d3
• Ширина нижней границы:
  • Рабочий стол: 0px
  • Таблетка: 0px
  • Телефон: 1px
• Цвет нижней границы: # d3d3d3

Добавить собственный код CSS в настройки страницы

Открыть настройки страницы

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

Добавить код CSS

Скопируйте и вставьте следующие строки кода CSS:

.hover-column:hover .hover-title {
background-color: #000000;
}

.hover-column:hover .hover-title h3 {
color: white !important;
}

.hover-button {
color: black;
}

.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}

.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}

.hover-column:hover::before {
opacity: 0;
}

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

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

Рабочий стол

Мобильный

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

В этом посте мы показали вам, как создать красивый дизайн при наведении курсора. В частности, мы создали сетку столбцов, которая начинается с простого и чистого. Как только посетители наводят курсор на конкретный элемент в сетке, открывается фоновое изображение и меняются стили модуля. Вы также смогли бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

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