Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62.

Хотите представить свои функции или продукты в виде вкладки Дива с эффектом наведения?

Вы ищете новые творческие способы демонстрации функций и/или продуктов на своих веб-страницах? 

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

Эффект наведения на вкладку будет работать только на рабочем столе. На экранах меньшего размера они будут иметь нормальную форму.

Давайте!

обследование

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

Вкладка Divi с эффектом наведения

Начнем процесс создания с Divi

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

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

Добавьте новую страницу или откройте существующую страницу и добавьте новый раздел. Откройте настройки раздела и добавьте к разделу градиентный фон.

  • Левый цвет: #f2f2f2
  • Правильный цвет: #ffffff
  • Направление градиента: 87 градусов
  • Левая позиция: 20%
  • Правильное положение: 80%

расстояние

Затем измените следующие параметры интервала:

  • Отступы (сверху и снизу): 0 пикселей

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

Структура колонны

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

Фоновый цвет

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

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

Размер и выравнивание

Во вкладке Дизайн, вытащите опцию Калибровка и измените следующие настройки:

  • Использовать пользовательскую ширину желоба: ДА
  • Ширина желоба: 1
  • Ширина: 400 пикселей
  • Выравнивание строки: слева

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

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

  • Ширина (при наведении): 2 пикселей

расстояние

Затем перейдите к настройкам интервала в опции Расстояние

  • Отступы (сверху и снизу): 0 пикселей

Граница (рабочий стол)

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

  • Закругленные углы (рабочий стол): 20 пикселей (правый верхний угол)
  • Ширина левой границы: 20px
  • Цвет левой границы: #6d44ff

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет создавать Легко и бесплатно любой дизайн веб-сайта или блога с профессиональным видом. Перестаньте платить много за веб-сайт, который вы можете сделать сами.

Box Shadow (настольный компьютер)

Наконец, добавьте легкую тень.

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

Парящая тень

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

  • Тень коробки: rgba (255,255,255,0 XNUMX XNUMX)

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

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

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

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

Выберите значок

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

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

И изменить внешний вид значка в настройках значка. Перейти на вкладку Дизайн

  • Цвет значка: #5323ff
  • Размещение изображения/значка: вверху
  • Ширина изображения/значка: 50 пикселей

Настройки заголовка текста (рабочий стол)

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

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

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

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

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

Настройки основного текста (рабочий стол)

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

  • Основной шрифт: Поппинс
  • Вес шрифта корпуса: легкий
  • Выравнивание текста: по центру
  • Цвет основного текста: #000000
  • Размер основного текста: 0 пикселей (для настольных компьютеров), 15 пикселей (для планшетов и телефонов)
  • Высота строки: 2,2 см

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

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

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

Расстояние (рабочий стол)

Вы хотите продавать свою продукцию в Интернете?

Скачайте WooCommerce бесплатно, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты на WordPress и легко создавать свой интернет-магазин. Идеально подходит для начинающих.

Чтобы дать модулю немного места, мы изменим следующие параметры интервала:

  • Отступы (сверху и снизу): 80 пикселей
наведение вкладок

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

Мы собираемся изменить настройки интервала наведения.

  • Отступы (сверху и снизу): 80 пикселей
  • Прокладка (слева и справа): 20vw

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

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

Редактировать модуль строк и рекламных объявлений № 2

Изменить цвет границы линии

Начнем с изменения цвета левой границы линии.

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

Изменить содержимое и значок Blurb

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

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

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

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

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

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

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

Линия редактирования и модуль Burb #3

Цвет границы линии

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

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

Изменить содержимое и значок Blurb

Давайте также изменим значок и содержание рекламного объявления.

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

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

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

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

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

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

Редактировать модуль строк и рекламных объявлений № 4

Изменить цвет границы линии

В следующем и последнем модуле также измените цвет левой границы строки.

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

Изменить содержимое и значок Blurb

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

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

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

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

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

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

  • Цвет текста заголовка: #dd6aca
Вкладка Divi с эффектом наведения

обследование

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

Вкладка Divi с эффектом наведения

Скачайте DIVI прямо сейчас!!!

Заключение

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

Этот подход поможет вам делиться контентом о функциях или продуктах в интерактивном режиме. 

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

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

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

%d блоггеры, как этой странице: