Эффект наведения на меню в Divi 5 (без кода!): создаем потрясающую анимацию с двойной линией

Описание: Divi 5: Создайте потрясающий эффект наведения курсора на меню с двойной линией — без написания кода! Хотите придать своему сайту на Divi 5 более изысканное и профессиональное навигационное меню? В этом уроке мы покажем вам, как создать элегантный эффект наведения курсора на меню с подчеркиванием и опусканием, используя новейшие текстовые функции Divi 5 — и все это без написания единой строки CSS или JavaScript.

Этот простой метод придаст навигации вашего сайта премиальный вид, оставаясь при этом полностью адаптивным и легко настраиваемым.

В этом видео вы узнаете, как:

✔ Создать красивый эффект наведения курсора с двойной линией

✔ Использовать новейшие функции стилизации текста Divi 5

✔ Создать эффект полностью с помощью визуального конструктора

✔ Настроить цвета, интервалы и анимацию

✔ Применить эффект к глобальному заголовку

✔ Создать современное навигационное меню без написания кода

Независимо от того, создаете ли вы бизнес-сайт, портфолио, сайт агентства или интернет-магазин, этот эффект наведения — фантастический способ выделить вашу навигацию. Если вам нравятся уроки по Divi 5, бесплатные ресурсы и советы по веб-дизайну на WordPress, не забудьте поставить лайк, подписаться и нажать на колокольчик уведомлений, чтобы не пропустить новые уроки от System22.

#Divi #Divi5 #DiviTutorial #WordPress #ElegantThemes #WebDesign #CSS #MenuDesign #NavigationMenu #System22

ТЕМЫ И ПЛАГИНЫ, ИСПОЛЬЗУЕМЫЕ В ЭТИХ ВИДЕО

Попробуйте тему Divi: https://bit.ly/TryDiviNow

Скидка 10% на плагин Divi Supreme Modules Pro: https://divisupreme.com/system22/?ref=6

Плагин Divi Supreme Modules Light: https://bit.ly/SupremeFreeVersion

Изображения, созданные с помощью AI от Nightcafe: https://creator.nightcafe.studio?fpr=...

Используйте промокод SYSTEM22NC для скидки 15%

РАЗДЕЛЫ

Введение:** (00:07) Обзор запрошенного эффекта двойной линии при наведении курсора.

Доступ к глобальному заголовку:** (00:44) Как перейти в конструктор тем для редактирования глобального заголовка.
Настройка модуля меню:** (01:18) Настройка модуля меню в заголовке.
Стилизация текста и активных ссылок:** (02:09) Настройка цветов меню и состояний активных ссылок.
Создание эффекта подчеркивания и надчеркивания:** (02:43) Использование новых функций Divi 5 для добавления линий над и под текстом.
Настройка параметров линий:** (03:25) Точная настройка толщины линий и межстрочного интервала/смещения.
Настройка взаимодействия при наведении курсора:** (04:00) Скрытие линий по умолчанию (с использованием прозрачности) для предотвращения смещения макета при наведении курсора.
Настройка состояний при наведении курсора:** (04:44) Назначение цветов линиям для состояния при наведении курсора.

Изменение стиля линий:** (05:27) Варианты, такие как сплошные, пунктирные, штриховые или волнистые линии.
Настройки переходов:** (06:05) Настройка времени анимации для эффекта.
Заключительное тестирование и подведение итогов:** (06:47) Сохранение изменений и предварительный просмотр конечного результата на работающем веб-сайте.

МОИ ПЛЕЙЛИСТЫ НА YOUTUBE:

Divi 5:    • Divi 5  

Полное руководство по Divi для начинающих:    • Divi Ultimate Guide For Getting Started  

Divi 5 для начинающих:    • Divi 5 For Beginners  

Divi 4 для начинающих:    • Divi For Beginners  

Модули Divi Supreme:    / watch  

v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Полный плейлист по созданию интернет-магазина:    / watch  

v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Посмотрите другие видео на нашей странице плейлистов:    / system22net  

Не забудьте задать любые вопросы ниже, я постараюсь ответить или сделать для вас видеодемонстрацию!


Подписка:    / @system22  

Получить слайдеры: https://www.elegantthemes.com/blog/di...

МОЙ БЛОГ

https://web-design-and-tech-tips.com

Отказ от ответственности: Некоторые из этих ссылок являются партнерскими, и я получу небольшую комиссию, если вы совершите покупку, без дополнительных затрат для вас.