Хотите представить свои функции или продукты в виде вкладки Divi с эффектом наведения?
Вы ищете новые творческие способы демонстрации функций и/или продуктов на своих веб-страницах?
Если это так, продолжайте читать, потому что в этой статье мы покажем вам, как отображать функции на вкладках при наведении, используя только встроенные параметры Divi. Возможности, которые вы получаете при таком подходе, безграничны, и они наверняка позволят вам понять Divi на более глубоком уровне.
Эффект наведения на вкладку будет работать только на рабочем столе. На экранах меньшего размера они будут иметь нормальную форму.
Давайте!
обследование
Прежде чем погрузиться в этот урок, давайте взглянем на результат, которого мы хотим достичь.
Начнем процесс создания с Divi
Добавить новый раздел
Градиентный фон
Добавьте новую страницу или откройте существующую страницу и добавьте новый раздел. Откройте настройки раздела и добавьте к разделу градиентный фон.
- Левый цвет: #f2f2f2
- Правильный цвет: #ffffff
- Направление градиента: 87 градусов
- Левая позиция: 20%
- Правильное положение: 80%
расстояние
Затем измените следующие параметры интервала:
- Отступы (сверху и снизу): 0 пикселей
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:
Фоновый цвет
Пока не добавляя никаких модулей, откройте настройки строки и измените цвет фона.
- Цвет фона: #ffffff
Размер и выравнивание
Во вкладке Проект, вытащите опцию Калибровка и измените следующие настройки:
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 400 пикселей
- Выравнивание строки: слева
Размер при наведении
Изменить вариант Ширина в настройках размера при наведении. Это позволит линии расширяться при наведении.
- Ширина (при наведении): 2 пикселей
расстояние
Затем перейдите к настройкам интервала в опции Расстояние
- Отступы (сверху и снизу): 0 пикселей
Граница (рабочий стол)
Добавьте «20px» в верхний правый угол линии, а также добавьте к линии левую границу.
- Закругленные углы (рабочий стол): 20 пикселей (правый верхний угол)
- Ширина левой границы: 20px
- Цвет левой границы: #6d44ff
Граница при наведении
Удалите верхний правый закругленный угол «20px» при наведении, добавив вместо него «0px».
Box Shadow (настольный компьютер)
Наконец, добавьте легкую тень.
- Сила размытия тени коробки: 80 пикселей
- Сила распространения тени коробки: -10px
- Цвет тени: rgba(0,0,0,0.11)
Парящая тень
И измените цвет тени на полностью прозрачный цвет при наведении.
- Тень коробки: rgba (255,255,255,0 XNUMX XNUMX)
Добавить модуль Blurb в строку
Добавить контент
Теперь, когда мы изменили все настройки строки, мы можем добавить модуль Blurb в столбец. Не стесняйтесь использовать любой другой модуль по вашему выбору.
После того как вы добавили модуль, добавьте несколько содержание де Votre Choix.
Выберите значок
Затем выберите значок по вашему выбору.
Настройки значка
И изменить внешний вид значка в настройках значка. Перейти на вкладку Проект
- Цвет значка: #5323ff
- Размещение изображения/значка: вверху
- Ширина изображения/значка: 50 пикселей
Настройки заголовка текста (рабочий стол)
Затем измените настройки заголовка.
- Шрифт заголовка: Поппинс
- Выравнивание текста: по центру
- Цвет текста заголовка: #5323ff
- Размер текста заголовка: 25px
- Расстояние между буквами: -1px
- Высота строки: 1 см
Настройки заголовка текста при наведении
И измените высоту строки заголовка при наведении.
- Высота строки заголовка: 1,5 см
Настройки основного текста (рабочий стол)
Затем перейдите к настройкам основного текста и внесите некоторые изменения. Это включает в себя изменение размера текста на «0px». Это поможет нам сделать так, чтобы основной текст появлялся только при наведении.
- Основной шрифт: Поппинс
- Вес шрифта корпуса: легкий
- Выравнивание текста: по центру
- Цвет основного текста: #000000
- Размер основного текста: 0 пикселей (для настольных компьютеров), 15 пикселей (для планшетов и телефонов)
- Высота строки: 2,2 см
Настройки основного текста при наведении
Чтобы основной текст отображался при наведении, измените размер текста при наведении.
- Размер основного текста: 15 пикселей
Расстояние (рабочий стол)
Чтобы дать модулю немного места, мы изменим следующие параметры интервала:
- Отступы (сверху и снизу): 80 пикселей
Расстояние при наведении
Мы собираемся изменить настройки интервала наведения.
- Отступы (сверху и снизу): 80 пикселей
- Прокладка (слева и справа): 20vw
Клонировать строку 3 раза
Когда вы закончите редактирование первой строки и ее модуля Blurb, вы можете продолжить и клонировать строку столько раз, сколько захотите.
Редактировать модуль строк и рекламных объявлений № 2
Изменить цвет границы линии
Начнем с изменения цвета левой границы линии.
- Цвет левой границы: #00ffcc
Изменить содержимое и значок Blurb
Затем откройте настройки модуля Blurb и измените значок.
Изменить цвет значка модуля Blurb
С цветом значка.
- Цвет значка: #00eda6
Изменить цвет заголовка
И цвет текста заголовка.
- Цвет текста заголовка: #00eda6
Линия редактирования и модуль Burb #3
Цвет границы линии
Давайте изменим цвет границы левой линии.
- Цвет левой границы: #afebff
Изменить содержимое и значок Blurb
Давайте также изменим значок и содержание текста презентации.
Изменить цвет значка модуля Blurb
Также измените цвет значка.
- Цвет значка: #68d9ff
Изменить цвет текста заголовка
И цвет текста заголовка тоже.
- Цвет текста заголовка: #68d9ff
Редактировать модуль строк и рекламных объявлений № 4
Изменить цвет границы линии
В следующем и последнем модуле также измените цвет левой границы строки.
- Цвет левой границы: #dd87cf
Изменить содержимое и значок Blurb
Откройте модуль Blurb в строке и измените значок и содержание du модуль.
Изменить цвет значка модуля Blurb
С цветом значка.
- Цвет значка: #dd6aca
Изменить цвет текста заголовка
И цвет текста заголовка тоже.
- Цвет текста заголовка: #dd6aca
обследование
Теперь, когда мы прошли учебник, давайте в последний раз взглянем на результат.
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как использовать встроенные параметры Divi только для создания вкладок, доступных при наведении.
Этот подход поможет вам делиться контентом о функциях или продуктах в интерактивном режиме.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
