Как продемонстрировать функции во вкладках при наведении курсора с помощью Divi

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

Давайте приступим к делу!

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

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

Рабочий стол

Мобильный

Начнем творить!

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

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

Градиентный фон

Добавьте новую страницу или откройте существующую и добавьте новый раздел. Откройте настройки раздела и добавьте в раздел градиентный фон. Мы будем использовать градиентный фон, чтобы покрыть левую часть наведенных вкладок, как вы можете заметить на экранах печати выше.

• Цвет 1: # f2f2f2
• Цвет 2: #ffffff
• Направление градиента: 87 градусов
• Стартовая позиция: 20%
• Конечная позиция: 20%

Интервал

Затем удалите настраиваемые верхнее и нижнее отступы раздела, добавив «0 ​​пикселей» к обоим параметрам.

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

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

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

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

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и измените цвет фона.

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

Выравнивание строк

Также измените выравнивание строки.

• Выравнивание ряда: по левому краю

Размер по умолчанию

И тоже измените настройки размеров.

• Использовать нестандартную ширину: Да
• Единица: PX
• Настраиваемая ширина: 400 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

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

Измените параметр «Пользовательская ширина» в настройках размера при наведении курсора. Это позволит строке расширяться при наведении курсора.

• Настраиваемая ширина: 2000 пикселей

Интервал

Затем перейдите к настройкам интервала и удалите значения верхнего и нижнего отступов по умолчанию.

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

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

Добавьте «20 пикселей» в верхний правый угол строки, а также добавьте левую границу к строке.

• Ширина левой границы: 20 пикселей
• Цвет левой границы: # 6d44ff

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

Удалите верхний правый закругленный угол «20 пикселей» при наведении курсора, добавив вместо него «0 пикселей».

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

И последнее, но не менее важное: добавьте легкую тень блока.

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

Hover Box Shadow

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

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

Добавить модуль Blurb в строку

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

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

Выбрать значок

Далее выберите значок по вашему выбору.

Настройки значков

И измените внешний вид значка в настройках значка.

• Цвет значка: # 5323ff
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 54px

Настройки текста заголовка по умолчанию

Затем измените настройки текста заголовка.

• Шрифт заголовка: Poppins
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 5323ff
• Размер текста заголовка: 25 пикселей
• Интервал между заголовками: -1px
• Высота строки заголовка: 1em

Настройки текста заголовка при наведении

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

• Высота строки заголовка: 1,5 м

Настройки основного текста по умолчанию

Затем перейдите к настройкам основного текста и внесите некоторые изменения. Это включает изменение размера текста на «0 пикселей». Это поможет нам сделать так, чтобы основной текст отображался только при наведении курсора.

• Шрифт основного текста: Poppins
• Толщина основного шрифта: Light
• Выравнивание основного текста: по центру
• Цвет основного текста: # 000000
• Размер основного текста: 0 пикселей (рабочий стол), 15 пикселей (планшет и телефон)
• Высота линии корпуса: 2.2em

Настройки основного текста при наведении

Чтобы основной текст отображался при наведении, измените размер текста при наведении.

• Размер основного текста: 15 пикселей

Интервал по умолчанию

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

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

Расстояние при наведении

Мы изменим настройки интервала при наведении курсора. Вы не сможете увидеть конечный результат до выхода из Visual Builder, потому что мы применяем параметры наведения как к строке, так и к модулю Blurb.

• Верхний отступ: 80 пикселей
• Нижний отступ: 80 пикселей
• Левое заполнение: 20vw
• Правое заполнение: 20vw

Клонировать строку 3 раза

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

Модуль №2 «Изменить строку и рекламное объявление»

Изменить интервал между строками

Откройте первый дубликат и добавьте немного настраиваемого левого поля. Это позволит нам создать эффект лестницы, который вы можете заметить в превью этого поста.

• Левое поле: 6vw

Изменить цвет границы строки

Также измените цвет левой границы строки.

• Цвет левой границы: # 00ffcc

Изменить содержимое рекламного сообщения и значок

Затем откройте модуль Blurb и измените значок.

Изменить цвет значка модуля Blurb

Вместе с цветом значка.

• Цвет значка: # 00eda6

Изменить цвет текста заголовка

И цвет текста заголовка.

• Цвет текста заголовка: # 00eda6

Модуль № 3 «Изменить строку и рекламное объявление»

Изменить интервал между рядами

Также добавьте немного настраиваемого левого поля ко второму дубликату.

• Левое поле: 12vw

Изменить цвет границы строки

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

• Цвет левой границы: #afebff

Изменить содержимое рекламного сообщения и значок

Наряду со значком аннотации и содержанием.

Изменить цвет значка модуля Blurb

Также измените цвет значка.

• Цвет значка: # 68d9ff

Изменить цвет текста заголовка

И цвет текста заголовка тоже.

• Цвет текста заголовка: # 68d9ff

Модуль №4 «Изменить строку и рекламное объявление»

Изменить интервал между строками

Переходим к следующему и последнему дубликату! Добавьте настраиваемое левое поле к строке.

• Левое поле: 18vw

Изменить цвет границы строки

Также измените цвет левой границы строки.

• Цвет левой границы: # dd87cf

Изменить содержимое рекламного сообщения и значок

Откройте модуль Blurb в строке и измените значок и содержимое модуля.

Изменить цвет значка модуля Blurb

Вместе с цветом значка.

• Цвет значка: # dd6aca

Изменить цвет текста заголовка

И цвет текста заголовка тоже.

• Цвет текста заголовка: # dd6aca

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

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

Рабочий стол

Мобильный

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

В этом посте мы показали вам, как использовать встроенные параметры Divi только для создания вкладок при наведении курсора. Такой подход поможет вам в интерактивном режиме делиться контентом о функциях или продуктах. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!