Создайте простое мегаменю с помощью темы Divi

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

В этом видео мы рассмотрим:

Добавление нового меню,
Настройку ключевой пользовательской ссылки мегаменю,
Использование пользовательских ссылок для заголовков,
Добавление пункта подменю,
Применение имени CSS-класса,
Настройку цветов мегаменю,
Использование Chrome Inspector,
Добавление пользовательского CSS-эффекта при наведении курсора,
Публикацию кода,
Проверку на мобильных устройствах и планшетах.

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

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

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

Во-вторых, мегаменю повышают доступность и удобство использования вашего сайта, предоставляя пользователям альтернативные способы навигации. Это особенно полезно для пользователей с ограниченными возможностями или пользователей мобильных устройств.

И наконец, мегаменю также улучшают поисковую оптимизацию (SEO) вашего сайта, предоставляя понятные и структурированные ссылки для поисковых роботов.

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

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

Скидка 10% на плагин Divi Supreme Modules Pro: https://bit.ly/DiviSupremeCoupon

Плагин Divi Supreme Modules Light: https://divisupreme.com/divi-plugins/...

Плейлист с модулями Divi Supreme:    / watch  
v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

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

Полный плейлист по созданию сайта электронной коммерции:    / watch  
v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Контактная форма с видеозагрузкой файла:    • Divi Theme Contact Form With File Upload 👍👍👍  

Тема Divi 4: создайте интернет-магазин за час:    • Divi 4 Theme Create An Ecommerce Store In ...  

Мой блог: https://web-design-and-tech-tips.com

Больше видео на эту тему смотрите в нашем плейлисте:    / system22net  

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

--------- КОД, ИСПОЛЬЗОВАННЫЙ СЕГОДНЯ ---------

Класс CSS: mega-menu

/* Mega Меню при наведении */

.et_mobile_menu li a:hover, .nav ul li a:hover {
background-color: black;
opacity: 1;
border-bottom: 1px solid lightgray;
}

--------- ГЛАВЫ ---------

00:00 Введение
00:56 Добавление нового меню,
01:41 Установка пользовательской ссылки для ключевого мегаменю,
02:35 Использование пользовательских ссылок для заголовков,
03:05 Добавление пункта подменю,
03:37 Применение имени класса CSS,
06:06 Настройка цветов мегаменю,
07:05 Использование Chrome Inspector,
07:36 Добавление пользовательского эффекта CSS при наведении,
09:40 Публикация кода,
10:26 Проверка на мобильных устройствах и планшетах.
10:53 Результат.

--------- РЕКОМЕНДУЕМЫЕ ПЛЕЙЛИСТЫ ---------

Интернет-магазин Elementor:    • Elementor Ecommerce Store Woocommerce Inst...  

Фрагменты Divi:    • Divi 4 Snippets Divi Theme Overview 👍  

Интернет-магазин Divi 4:    • Divi 4 Ecommerce Store Theme Setup And Ove...  

Основы Bootstrap 4:    • Bootstrap 4 Basics Index Page and External...  

Элемент:    • Elementor Wordpress Builder Install And Ov...  

Советы по WordPress:    • Wordpress 2020 Theme Customize The Page Ti...  

Подписаться: https://www.youtube.com/channel/UC...