Хотите создать сетку с Divi быть плавным при наведении?
Если вам нравится создавать веб-сайты с учетом взаимодействия с пользователем, вам понравится это руководство.
Сегодня мы собираемся показать вам, как создать прозрачную сетку, фоновое изображение которой появляется, как только кто-то наводит курсор на один из элементов. Дизайн изначально простой и чистый. Это приводит к хорошему опыту зависания.
В этом уроке мы шаг за шагом проведем вас через процесс создания.
Пойдем.
обследование
Прежде чем углубиться в руководство, давайте быстро взглянем на результат на разных размерах экрана.
офис
Мобильный телефон
Начнем процесс создания в Divi
Добавить новый раздел
Фоновый цвет
Добавьте новый раздел на страницу, над которой вы работаете.
Сначала откройте настройки раздела и примените белый цвет фона.
- Фон: #ffffff
Добавьте строку №1
Структура колонны
Продолжите, добавив новую строку, используя следующую структуру столбцов:
калибровка
Не добавляя пока никаких модулей, откройте настройки линии, перейдите на вкладку Проект, вытащите опцию Калибровка и измените параметры размера следующим образом:
- Использовать пользовательскую ширину желоба: ДА
- Желоб с : 1
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Затем потяните вниз вариант Расстояние и измените следующие настройки:
- Отступы (сверху и снизу): 0 пикселей
граница
В параметре «Граница» также внесите следующие изменения:
- Стили границ (сверху и снизу): 1px
- Цвет границы (сверху и снизу): #d3d3d3
Настройки столбца 1
Фон при наведении
Далее давайте настроим параметры для столбца 1. Применим градиентную заливку к наведению.
- Цвет 1: rgba (255,255,255,0 XNUMX XNUMX)
- Цвет 2: #000000
- Тип градиента: Линейный
- Позиция Цвет 1: 30%
- Поместить градиент над изображением градиента: ДА
Фоновое изображение при наведении
Также загрузите фоновое изображение, которое будет появляться при наведении.
- Размер фонового изображения : Обложка
- Положение фонового изображения: Центр
Класс CSS
И завершите настройку столбца, назначив следующий класс CSS на вкладке Фильтр :
- Класс CSS: столбец с наведением
Добавьте модуль «Текст № 1» в столбец 1.
Добавьте текст размера H3 (Заголовок 3)
Пришло время добавить модули, начиная с первого модуля Text в столбце 1. Вставьте текст по вашему выбору.
Настройки текста H3
Затем перейдите на вкладку Проект модуля и измените текстовые параметры H3 следующим образом:
- Шрифт: Освальд
- Вес шрифта Вес шрифта: сверхлегкий
- Стиль шрифта заголовка 3: TT
- Цвет текста: #0a0a0a
- Размер текста заголовка 3:
- Рабочий стол: 3vw
- Таблетка: 7vw
- Телефон: 14vw
- Интервал между тремя буквами заголовка: -3px
калибровка
Измените ширину на разных размерах экрана в настройках размера.
- Ширина:
- Рабочий стол: 44%
- Таблетки: 48%
- Телефон: 50%
расстояние
Также изменим следующие параметры в опции Расстояние.
- Поле (нижнее): 25vh
- Набивка (сверху и снизу): 5%
- Набивка (слева и справа): 4%
граница
Далее мы добавим границы справа и снизу.
- Ширина границы (справа и снизу): 1px
- Цвет границы (справа и снизу): #d3d3d3
Класс CSS
И мы также завершим настройку модуля, назначив модуль Text следующий класс CSS:
- Класс CSS: hover-title
Добавьте модуль «Текст № 2» в столбец 1.
Добавить контент
Добавьте еще один текстовый модуль чуть ниже предыдущего с помощью содержание описание по вашему выбору.
Настройки текста
Перейти на вкладку Проект модуля и соответствующим образом измените текстовые параметры:
- Шрифт текста: Карла
- Цвет текста: #ffffff
- Размер:
- Рабочий стол: 0,8 Вт
- Таблетка: 2vw
- Телефон: 3.6vw
- Высота строки: 2,2 см
расстояние
Также примените пользовательские значения маржи.
- Набивка (снизу): 10%
- Набивка (слева и справа): 9%
Класс CSS
И заполните параметры модуля, используя следующий класс CSS для модуля:
- Класс CSS: текст при наведении
Добавьте модуль «Кнопка» в столбец 1.
Добавить описание
Следующий и последний модуль, который нам нужен, это модуль Button. Введите описание по вашему выбору.
Настройки кнопок
Измените параметры модуля следующим образом:
- Использовать пользовательские стили для кнопки: ДА
- Размер текста кнопки:
- Рабочий стол: 1vw
- Таблетка: 2,5 Вт
- Телефон: 4vw
- Ширина границы кнопки: 0px
- Радиус границы: 0px
- Шрифт кнопки: Карла
- Показать значок кнопки: ДА
- Расположение значка кнопки: справа
- Показывать только значок наверху для кнопки: НЕТ
расстояние
Также добавьте собственные значения интервала.
- Маржа (снизу): 8%
- Маржа (слева и справа): 9%
- Набивка (снизу): 5%
- Набивка (справа): 20%
тень коробки
Затем примените коробчатую тень.
- Коробчатая тень Горизонтальное положение: 0px
- Коробчатая тень по вертикали: 2px
- Цвет тени: #000000
Класс CSS
И завершите настройку модуля, назначив кнопке следующий класс CSS:
- Класс CSS: кнопка наведения
Повторное использование столбца 1
Удалить столбцы 2, 3 и 4
Теперь, когда мы построили первый столбец, мы можем использовать его повторно. Первое, что мы собираемся сделать, это удалить пустые столбцы из нашей строки.
Клонировать столбец 1 три раза
Мы будем повторно использовать столбец 1, клонировав его три раза.
Изменение фоновых изображений при наведении на повторяющиеся столбцы
Затем измените фоновые изображения дубликатов столбцов в каждом дублирующемся столбце.
Изменить повторяющийся контент
Также измените содержание модуля в каждом дублирующемся столбце.
Уникальные границы столбцов
Колонка 1
Нам нужно будет применить уникальные настройки границ к каждому столбцу, начиная со столбца 1.
- Ширина границы (справа):
- Рабочий стол: 1 пикс.
- Планшет: 1px
- Телефон: 0px
- Цвет (справа): #d3d3d3
- Ширина границы (снизу):
- Рабочий стол: 0 пикс.
- Планшет: 1px
- Телефон: 1px
- Цвет границы (внизу): #d3d3d3
Колонка 2
Далее у нас есть столбец 2.
Ширина границы (справа):
- Рабочий стол: 1 пикс.
- Планшет: 1px
- Телефон: 0px
Цвет (справа): #d3d3d3Ширина границы (снизу):
- Рабочий стол: 0 пикс.
- Планшет: 1px
- Телефон: 1px
Цвет границы (внизу): #d3d3d3
Колонка 3
И мы будем использовать следующие настройки границы для столбца 3:
- Ширина границы (справа):
- Рабочий стол: 1 пикс.
- Планшет: 1px
- Телефон: 0px
- Цвет (справа): #d3d3d3
- Ширина границы (снизу):
- Рабочий стол: 0 пикс.
- Планшет: 1px
- Телефон: 1px
- Цвет границы (внизу): #d3d3d3
Добавить пользовательский CSS в настройки страницы
Открыть настройки страницы
Теперь, когда весь дизайн готов, остается только добавить некоторый пользовательский код CSS, чтобы помочь вызвать эффекты наведения на модули. Для этого откройте настройки страницы.
Также прочитайте наше руководство по: Divi: Как создать липкий футер с эффектом «Раскрыть»
Добавить 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;
}
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
офис
Мобильный телефон
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как создать красивый дизайн при наведении курсора.
В частности, мы создали сетку столбцов, которая изначально проста и понятна. Как только посетителей наведите указатель мыши на определенный элемент сетки, откроется фоновое изображение, а стили модуля изменятся.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
