Стандартный раскрывающийся список показывает тонкий список ссылок Мегаменю открывает широкую панель, которая представляет сразу целый раздел вашего сайта: сгруппированные столбцы ссылок, изображения, значки, даже призыв к действию.The Мега Меню расширение в Мастер-аддоны для Elementor прикрепляет одну из этих панелей к любому пункту меню WordPress, и вы проектируете саму панель в обычном редакторе Elementor, так что все, что вы можете построить на странице, может жить внутри вашей навигации. для быстрого обзора и демо-версий см бесплатный конструктор мегаменю Elementor страница.
Вот готовый результат демонстрации: при наведении курсора "Продукты" открывается панель из трех столбцов с сгруппированными ссылками и избранным изображением.
Что делает расширение Mega Menu #
После включения каждый элемент в меню WordPress получает всплывающее окно конфигурации мегаменю Внешний вид → Меню. Включите его для элемента, и раскрывающийся список этого элемента станет шаблоном Элементора. Расширение обрабатывает:
- Панели по товарам: включите мегапанель только на те предметы, которые в ней нуждаются; остальные остаются обычными ссылками.
- Визуальный дизайн панели: раскрывающийся контент создается с помощью редактора Elementor с использованием любых понравившихся вам виджетов.
- Ширина мегаменю: По умолчанию, полная ширина или пользовательская ширина с точным значением пикселя.
- Триггерный эффект: откройте панель на наведении курсора или нажатии.
- Переход: выберите, как панель анимируется, "Увядать в демо".
- Мобильное меню: решите, какие телефоны получают, включая отображение контента конструктора в меню переключения.
- Значок и икона: прикрепите значок выделения к метке пункта меню (бесплатно) или значок собственного цвета (Pro).
Прежде чем начать #
- WordPress с Элементор установлен и активен; достаточно бесплатной версии.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- Меню WordPress уже создано под Внешний вид → Меню, даже грубый; вы можете уточнить это позже.
ПРИМЕЧАНИЕ: Вы можете управлять фоном вашего мега меню из параметра стиль страницы. обязательно поставьте цвет фона, изображение или что угодно в параметре стиль страницы. по умолчанию будет установлен белый фон. но вы можете сделать настройку фона из этого параметра. взгляните —
Шаг 1: Включите расширение Мегаменю #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка. Мегаменю находится в Отображение виджетов группа. Нажмите на его переключатель, чтобы он стал фиолетовым, а затем нажмите Сохранить изменения и дождитесь зеленого “Настройки, сохраненные успешно” уведомление.Master Addons поставляется со всем выключенным по умолчанию, поэтому ваш сайт загружает только то, что вы на самом деле используете. если новая опция не отображается в администраторе сразу, жестко обновите страницу (Cmd/Ctrl + Shift + R); плагины кэширования, как правило, удерживаются в старом меню администратора в течение минуты.
Шаг 2: Включите мегаменю для своего меню #
Открытый Внешний вид → Меню. Новый Мегаменю Master Addons поле появляется над списком пунктов меню Переключить Включить мегаменю на и ждать зеленого “Мега Меню Сохраненное” подтверждение.Каждый пункт в структуре меню теперь несет фиолетовый Мастер Мега значок, то есть на нем может размещаться панель.
Шаг 3: Включите панель пункта меню #
Наведите указатель мыши на элемент верхнего уровня, обычно что-то широкое, например "Продукты" или "Услуги", и откройте настройки его мега-меню. Во всплывающем окне Содержание таб, флип Мегаменю Включено чтобы ДА. Редактировать содержимое Megamenu появляется кнопка, она открывает редактор Elementor для панели этого пункта Хит Сохранить во всплывающем окне, когда вы закончите.
Включите панель только на элементы, которые действительно нуждаются в пространстве. мега меню на одной Контактная ссылка заставляет посетителей работать усерднее для одного пункта назначения.
Шаг 4: Создайте панель в Элементоре #
Нажмите Редактировать содержимое Megamenu и знакомый редактор Elementor открывается панелью как холст. демо-версия строит три столбца: две группы ссылок под заголовками Запись и Анализ, плюс столбец изображения, чтобы панель не была стеной текста. Публикуйте шаблон, когда макет готов; шаблон черновика не будет отображаться в живом меню, что сбивает людей с толку больше всего на свете.
Группируйте ссылки по тому, как думают клиенты, а не по вашей организационной диаграмме, и ограничьте каждый столбец пятью-семью ссылками; после этого сканирование рушится. Дайте одному столбцу задание за пределами ссылок, например избранный продукт или файл призыв к действию. И сохраняйте изображения сжатыми, поскольку панель загружается на каждую страницу сайта, а не на одну.
Шаг 5: Установите ширину, триггер и переход #
Вернувшись во всплывающее окно с товаром Настройки вкладка управляет поведением панели:
- Ширина мегаменю: По умолчанию соответствует меню, Полная ширина растягивается от края к краю, Пользовательская ширина принимает точное значение пикселя, например 800px.
- Мобильное меню: какие телефоны получают; Контент Builder отображает ту же панель внутри меню мобильного переключателя.
- Триггерный эффект: Наведение курсора открывает панель при наведении курсора мыши; переключитесь на щелчок, если предпочитаете преднамеренное открытие.
- Переход: вступительная анимация "Fade in the demo".
- Показать метку меню / Показать описание (Pro): необязательная этикетка и текст описания на товаре.
The Значок вкладка в том же всплывающем окне прикрепляет значок выделения, полезный для маркировки записи "Новинка" или "Продажа". Икона tab для цвета значка и значка необходимы Master Addons Pro.
Шаг 6: Поместите меню в заголовок #
Если ваша тема уже отображает меню WordPress, мегаменю работает немедленно. Для полного управления заголовком создайте его с помощью бесплатного Мастер-создатель тем аддонов: создайте шаблон заголовка, загляните в него Виджет меню навигации, и выберите меню, которое несет ваши мега панели, Раздел Общие виджета охватывает макет, выравнивание, и точку останова, где меню сворачивается.
Проверьте мобильный вид #
Переключите редактор Elementor на мобильный превью перед публикацией Меню рушится за гамбургер тумблер и ссылки стекают вертикально Проверьте реальную высоту панели здесь; четырехколоночная панель, которая выглядит резкой на 1440px, может превратиться в бесконечный свиток на телефоне Если он работает долго, спрячьте декоративные изображения с помощью адаптивных элементов управления видимостью Elementor и сохраните ссылки Затем протестируйте на реальном телефоне, так как превью приближается к сенсорному поведению, но не воспроизводит его.
Результат на странице #
С выбранной полной шириной опубликованная панель охватывает всю грань окна просмотра к краю; коробочная версия в верхней части этой страницы показывает ширину по умолчанию для сравнения. в любом случае, наведение на элемент открывает разработанный шаблон с выбранным вами переходом.
Где мегаменю работает хорошо #
- Магазины. Категории продуктов, бестселлеры и промо-изображение на одной панели в разделе "Магазин".
- Агентства и сервисные предприятия. Услуги сгруппированы по результатам с тематическим исследованием.
- Издатели и блоги. Тематические концентраторы с последней стойкой, вставленной в панель.
- Сайты SaaS. Функции, решения и ресурсы организованы рядом, а не вложенные раскрывающиеся данные.
- Университеты и организации. Отделения и быстрые звенья, которые в противном случае похоронили бы глубину трех уровней.
Устранение неполадок #
- Мегаменю не появляется. Подтвердите включение переключателя расширения, в пункте меню установлено значение "Включено мегаменю" ДА, и шаблон панели публикуется, а не сохраняется в виде черновика. Затем очистите свой кэш.
- Панель появляется, но не имеет стиля. Обычно кэшированная таблица стилей. очистите свой кэш страниц и любой CDN, а затем жестко перезагрузите.
- Панель срезана или скрыта. У родительского контейнера скрыт перелив или низкий z-индекс. поднимите z-индекс заголовка и проверьте настройку перелива контейнера заголовка.
- Работает на рабочем столе, сломан на мобильном. Почти всегда область переключения Проверьте настройки мобильного виджета Nav Menu и подтвердите, что ничто не накладывает на цель tap.
Часто задаваемые вопросы #
Как добавить мегаменю в Elementor без Pro?
Включить расширение Mega Menu на вкладке Расширения Master Addons, включить меню Enable Mega в разделе Внешний вид → Меню, установить Megamenu Включено в ДА на нужном элементе и спроектировать панель с помощью Правка содержимого Megamenu.Elementor Pro не требуется.
Расширение Mega Menu бесплатно?
Да. Мега Меню поставляется с бесплатной версией Главных Дополнений для Элементора, в группе Виджеты Дисплея вкладки Расширения.The страница ценообразования охватывает то, что добавляют планы Pro.
Может ли панель быть во всю ширину?
Да. вкладка Настройки всплывающего окна элемента предлагает значение по умолчанию, полную ширину и пользовательскую ширину. Пользовательская ширина принимает точное значение пикселя, например 800px, когда вы хотите, чтобы панель была уже страницы.
Что я могу положить внутрь раскрывающейся панели?
Все, что Elementor может построить: виджеты заголовков, списки значков, изображения, кнопки, формы. панель является обычным шаблоном Elementor, поэтому каждый виджет, доступный на странице, доступен в меню.
Как ведет себя мегаменю на мобильном?
Меню рушится за гамбургерным тумблером, а ссылки стекутся вертикально Настройка Мобильное меню контролирует, получают ли телефоны разработанный контент конструктора внутри тумблера, а отзывчивые элементы управления Elementor позволяют скрывать тяжелые элементы панели на маленьких экранах.
Завершая #
The Расширение Мега Меню превращает обычное меню WordPress в разработанную навигацию с тремя ходами: включите расширение, включите панель элемента и создайте раскрывающийся список в Elementor. Ширина, триггер, переход, значки и (с помощью Pro) значки устанавливаются из всплывающего окна элемента и соединяют его с бесплатным Тема Строитель и Виджет меню навигации дает вам полный пользовательский заголовок без Elementor Pro. Полный набор Виджеты и расширения Master Addgets находится на одной странице.
