Мегаменю — популярный элемент дизайна, который может придать вашему Веб-сайт взрыв элегантности, предлагая посетителей дополнительный навигационный слой. Есть несколько способов добавить мегаменю в Divi. Один из самых простых методов, которые я использовал, этосторонний плагин под названием Divi Mega Pro .

Divi Mega Pro позволяет легко создавать мегаменю с помощью Divi Builder. Каждое меню можно добавить к любому элементу с помощью класса CSS. Это означает, что вы можете добавить макет Divi к любой ссылке в меню, но вы можете пойти еще дальше и добавить их к любому элементу макета Divi, просто добавив класс CSS.

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

Создать Mega Pro Mega Menu

Меню Divi Mega Pro добавлено в меню приборной панели. Здесь вы можете ввести свой лицензионный ключ, просмотреть созданные вами меню и создать новое меню. Когда вы нажмете, чтобы добавить новое меню, вы увидите редактор для типа сообщения меню. Экран простой, но тут много чего происходит.

Издатель - вы можете создать мегаменю или всплывающую подсказку с помощью Divi Builder.

Мега Про Фон - вы можете выбрать цвет фона и шрифта.

Посмотреть локации - выберите все страницы или назовите определенные страницы, затем введите исключения.

Мега Про Анимация - выберите анимацию. Выберите смещение, смещение, перспективу, затухание или масштаб.

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

Настройки дисплея Mega Pro : выберите направление отображения (верхнее или нижнее), введите верхнее и нижнее поля в пикселях, выберите процент ширины и активируйте стрелку. Активация стрелки открывает дополнительные настройки, где вы можете выбрать тип стрелки (треугольная или круглая), выбрать цвет, установить ширину и высоту и предварительно просмотреть стрелку.

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

Дополнительные параметры Mega Pro - выберите тип триггера (завис или щелкнул), тип вывода (завис или щелкнул) и введите задержку на выход.

Divi Mega Pro Модели

Разработчик представил несколько моделей для Divi Mega Pro. Когда вы покупаете плагин, эти шаблоны доступны в вашей учетной записи на вкладке «Шаблоны макета плагина». Они отлично подходят для того, чтобы помочь вам начать разрабатывать свои мегаменю. Я буду использовать некоторые из них в своих примерах.

Диви Мега Про Меню

Как только вы создадите мегаменю, оно появится в списке. Здесь вы можете редактировать, быстро редактировать или удалять меню. Вы также можете искать, фильтровать по дате, просматривать по статусу и т. Д. Он также предоставляет уникальный класс Mega Pro, поэтому вы можете скопировать их отсюда, а не открывать каждый, чтобы получить класс.

При копировании класса обязательно вставьте его без лишних пробелов. В противном случае все мегаменю на странице больше не будут работать.

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

Добавление триггера

В поле Mega Pro Triggers вы увидите один класс Mega Pro. Скопируйте и вставьте его в поле CSS Class элемента, который хотите использовать в качестве триггера.

Чтобы добавить поле «Класс CSS» в пункт меню, необходимо включить классы CSS. На экране меню выберите Параметры экрана и включить CSS классы.

Вставьте класс CSS в поле меню. Теперь этот пункт меню будет отображать мегаменю при наведении курсора и по щелчку перейти на страницу.

Вы заметите, что Divi Mega Pro также является опцией в параметрах ссылки меню. Они отлично подходят для добавления пункта меню в меню, которое на самом деле никуда не денется. Добавьте класс CSS, как любой другой пункт меню.

Раздел контактов в мегаменю

Меню открывается при наведении. Я всегда могу щелкнуть ссылку «Контакты», чтобы открыть страницу контактов, если захочу. Если бы я просто хотел, чтобы отображалось мегаменю, я мог бы просто использовать ссылку главного меню «Контакт» и переименовать его (как в примере выше).

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

Простой призыв к действию со столбцами меню

Это одна из моделей, которые добавляют несколько столбцов. Вношу коррективы в цвет фона и шрифта. Я также добавил стрелку и сделал ширину 75%.

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

вкладки

Шаблон вкладки включает модуль кода с jQuery для создания эффекта наведения.

Я добавил контент во вкладки и адаптировал их для сайта. Каждая ссылка слева показывает отдельную вкладку в большей части меню.

Конфигурации Info Bubbles

Для этого я добавил класс CSS в рекламное объявление, чтобы оно открывало небольшое всплывающее окно при наведении курсора. Всплывающее окно - это просто изображение с тенью внизу.

На изображении выше моя мышь находится над надписью LIVE WEBSITE. Я еще не настраивал позиционирование, но его легко разместить где угодно.

Для этого я создал всплывающее окно, чтобы показать изображение с некоторым текстом. Я установил направление отображения на Низкое и, чтобы оно отображалось рядом с изображением, к которому я хочу добавить, добавил маржу -300.

Всплывающее окно теперь появляется слева и вверху изображения, когда я нахожу на него курсор. Я добавил прозрачный цвет фона, цвет границы, заливку и закругленный контур.

Лицензия и документация

У вас есть выбор между четырьмя лицензиями:

• Один сайт - 15 долларов в год
• Три сайта - 29 долларов в год
• Безлимитные сайты - 59 долларов в год
• Неограниченное время жизни - 129 долларов единовременно

Документация предоставляется видео демонстрация и статья на сайте объясняет функции и объясняет, шаг за шагом, как использовать плагин.

[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin