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

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

Проблема в том, что WordPress «из коробки» мегаменю не поддерживает. Даже если тема предлагает встроенный вариант, он почти всегда ограничен парой колонок без нормальной кастомизации. Для полноценного мегаменю с визуальным редактором, адаптивной версией и точной настройкой нужен правильный инструмент, и здесь на сцену выходят Elementor и The Plus Addons.

💡 Быстрый обзор:

• Активируете виджет TP Navigation Menu в The Plus Addons и создаёте шаблон мегаменю через визуальный редактор Elementor.
• Настраиваете стандартное меню WordPress (Внешний вид, Меню), добавляя в него созданный шаблон как пункт, раскрывающий мегаменю.
• Создаёте шаблон заголовка через Elementor Theme Builder и размещаете в нём виджет Navigation Menu из The Plus Addons.
• Настраиваете адаптивное поведение: отдельное меню или шаблон для мобильных посетителей, точка переключения, внешний вид.

Когда мегаменю нужно вашему сайту

Мегаменю, не универсальное решение для каждого проекта. Но если на сайте больше шести разделов с подкатегориями, стандартная навигация перестаёт справляться. Исследователи пользовательского опыта из Nielsen Norman Group сформулировали это точно: «Мегаменю отлично подходят для навигации по сайту... Это превосходный дизайн-выбор когда нужно разместить большое количество опций или показать страницы нижнего уровня с первого взгляда.»

В интернет-магазинах мегаменю, фактически стандарт. Категории товаров, подкатегории, фильтры, всё это нужно показать посетителю сразу, а не прятать за серией наведений:

Это колоссальный шаг вперёд по сравнению со «старым» подходом, составными меню с каскадными подменю, где посетителю требовалась снайперская точность движений, а одна ошибка возвращала его в начало:

Вот как крупные интернет-магазины используют мегаменю:

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

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

Yelp группирует рестораны, домашние услуги и автомобильные сервисы в интуитивно понятные блоки, экономя посетителю время на поиск:

Конструктор сайтов Tilda использует мегаменю для показа типов шаблонов и примеров портфолио, помогая новому пользователю сориентироваться:

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

Агентство Квазар размещает в мегаменю портфолио, услуги и контакты, превращая навигацию в витрину возможностей:

Что понадобится для создания мегаменю

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

Конкретно, The Plus Addons для Elementor. Это мощное расширение со 120+ виджетами, и среди них, виджет TP Navigation Menu, который закрывает все сценарии: горизонтальное, вертикальное и боковое мегаменю, переключатели, адаптивные варианты.

Что даёт The Plus Addons:

• Полная интеграция с Elementor. Виджет написан именно под Elementor и совместим со всеми остальными виджетами и функциями конструктора, не нужно изучать новый интерфейс.
• Адаптивность с точностью до пикселя. Можно задать разное меню или даже разные шаблоны мегаменю для десктопа и мобильных устройств.
• Кроссбраузерная поддержка. Все посетители получают одинаково качественный опыт независимо от браузера.
• Гибкая кастомизация. Настройки размера, выравнивания, цветов меток, иконок, всё через привычную панель Elementor.

Для полноценной работы с заголовками понадобится также Elementor Pro, его Theme Builder позволит создать кастомный шаблон хедера и разместить в нём виджет Navigation Menu.

Как создать мегаменю в Elementor: пошаговое руководство

Весь процесс укладывается в пять шагов. Убедитесь, что установлены и активированы три плагина:

• Elementor (бесплатный)
• Pro-версия Elementor, для Theme Builder и кастомных заголовков
• The Plus Addons for Elementor, бесплатная версия доступна на WordPress.org, но для виджета Navigation Menu нужна Pro-лицензия с официального сайта

Шаг 1. Активируйте виджет TP Navigation Menu

В панели управления WordPress перейдите в ThePlus Settings → Plus Widgets и включите виджет TP Navigation Menu:

После активации в боковом меню панели управления появится новый пользовательский тип записей Plus Mega Menu, это хранилище для всех ваших шаблонов мегаменю.

Шаг 2. Создайте шаблон мегаменю в Elementor

Перейдите в Plus Mega Menu → Add New. Дайте шаблону осмысленное название, это пригодится когда вы будете использовать разные мегаменю в разных местах сайта. Нажмите Edit with Elementor:

Теперь вы в визуальном редакторе Elementor. Строите макет мегаменю как обычную страницу: родительская секция на всю ширину мегаменю, внутри, колонки под каждый смысловой блок, а в колонках, любые виджеты Elementor: заголовки, списки, изображения, кнопки. Elementor Navigator (панель структуры слева внизу) помогает видеть иерархию секций и колонок.

Когда дизайн готов, сохраните и опубликуйте шаблон.

Шаг 3. Настройте меню навигации WordPress

Теперь нужно привязать созданный шаблон к реальному меню сайта. Перейдите в Внешний вид → Меню. Если меню ещё нет, создайте его.

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

Затем раскройте секцию Plus Mega Menu в боковой панели добавления элементов и выберите созданный на предыдущем шаге шаблон, он добавится как пункт меню, при наведении на который будет раскрываться мегаменю.

Если секция Plus Mega Menu не отображается, WordPress её скрывает. Нажмите Настройки экрана в правом верхнем углу и установите флажок Plus Mega Menu:

Для добавленного пункта настройте размер и выравнивание. Доступны три варианта размера:

• По умолчанию, максимальная ширина в пикселях.
• Контейнер, по ширине контейнера сайта.
• Полная ширина, мегаменю растягивается на всю ширину экрана.

Здесь же настраиваются метка элемента, цвет меток и иконки:

Шаг 4. Создайте шаблон заголовка в Theme Builder

Теперь мегаменю нужно разместить в заголовке сайта. Для этого используется Theme Builder, часть Elementor Pro.

Перейдите в Templates → Theme Builder и создайте новый шаблон заголовка (или отредактируйте существующий). Можно выбрать готовый шаблон хедера или собрать свой с нуля. Через условия отображения Elementor Pro настройте где показывать этот заголовок, на всём сайте или только на определённых страницах.

В редакторе заголовка добавьте виджет TP Navigation Menu из The Plus Addons:

В настройках виджета выберите направление меню, горизонтальное, вертикальное или вертикальное боковое:

Затем в опции Select Menu укажите меню, которое вы настроили на шаге 3:

Дополнительные параметры стилизации доступны на вкладке Style, цвета, шрифты, отступы, эффекты наведения.

Шаг 5. Настройте адаптивное поведение

Финальный шаг, мобильная версия. Разверните настройки Mobile Menu на вкладке Content виджета Navigation Menu. Включите опцию Responsive Mobile Menu и задайте точку переключения, ширину экрана, при которой включается мобильная вёрстка:

В выпадающем списке Menu Content выберите, что показывать мобильным посетителям: то же меню что и на десктопе, отдельное меню без мегаменю (создаётся в Внешний вид → Меню) или полностью отдельный шаблон, свёрстанный в Elementor.

Готово. Вы только что создали адаптивное мегаменю на WordPress с помощью Elementor и The Plus Addons.

Видео: процесс настройки от первого лица

Теория, хорошо, но живой показ экономит полчаса проб и ошибок. В этом видео показан полный процесс настройки виджета Navigation Menu из The Plus Addons для Elementor, от активации до работающего мегаменю на сайте:

⁉️🤔 Частые вопросы

Нужен ли Elementor Pro для создания мегаменю?

Да, Elementor Pro необходим. Бесплатная версия Elementor не включает Theme Builder, инструмент для создания кастомных шаблонов заголовков, без которого нельзя разместить виджет мегаменю в хедере сайта. Стандартные темы WordPress не предоставляют область для вставки Elementor-виджета в навигацию. Pro-лицензия Elementor стоит от $59 в год для одного сайта.

The Plus Addons бесплатный или платный?

У The Plus Addons есть бесплатная версия на WordPress.org с базовым набором виджетов. Однако виджет TP Navigation Menu, отвечающий за мегаменю, доступен только в Pro-версии. Pro-лицензия приобретается на официальном сайте theplusaddons.com и включает 120+ виджетов, 1000+ шаблонов и приоритетную поддержку. Альтернативный путь, встроенное мегаменю Elementor Pro (появилось в версии 3.12+), но оно уступает по гибкости: нет бокового и вертикального мегаменю, меньше настроек адаптивности.

Можно ли сделать несколько разных мегаменю на одном сайте?

Да. The Plus Addons позволяет создать любое количество шаблонов мегаменю через Plus Mega Menu → Add New. Каждый шаблон верстается в Elementor независимо. В меню WordPress (Внешний вид → Меню) вы добавляете нужные шаблоны как отдельные пункты, например, мегаменю «Каталог» для пункта «Товары» и мегаменю «Услуги» для пункта «Сервисы». Через условия отображения Elementor Pro можно показывать разные заголовки на разных страницах сайта: один хедер для магазина, другой для блога.

Что делать если мегаменю не отображается на мобильных?

Проверьте три настройки в виджете Navigation Menu. Первое, включена ли опция Responsive Mobile Menu (вкладка Content → Mobile Menu). Второе, правильно ли задана точка переключения (ширина в пикселях, при которой активируется мобильная вёрстка). Третье, выбран ли конкретный источник в Menu Content: если стоит «Same as desktop», но десктопное меню слишком широкое для мобильного экрана, оно не влезает. Решение: создайте в Внешний вид → Меню отдельное упрощённое меню для мобильных и выберите его в выпадающем списке Menu Content.

The Plus Addons конфликтует с другими плагинами Elementor?

Крайне редко. The Plus Addons написан специально под Elementor и тестируется на совместимость с каждым крупным обновлением. В мае 2026 года плагин получил совместимость с WordPress 7.0 через два дня после релиза, это показатель уровня поддержки. Если конфликт всё же возник, начните с отключения других аддонов Elementor по одному чтобы найти виновника. Чаще всего проблемы создают не основные плагины, а малоизвестные надстройки с непротестированным CSS.

Создайте мегаменю, которое работает на вас

Мегаменю, не украшение, а инструмент навигации, который превращает хаос из тридцати страниц в понятную структуру. Посетитель видит всё сразу, добирается до нужного раздела за один клик и не покидает сайт от раздражения.

С Elementor и The Plus Addons вы получаете визуальный контроль над каждым пикселем мегаменю без единой строки кода. Пять шагов, описанных выше, активация, шаблон, меню, заголовок, адаптив, закрывают весь цикл от идеи до работающего решения за час-полтора.

Выбирайте инструмент под задачу. Если сайт простой, а бюджет ограничен, встроенного мегаменю Elementor Pro достаточно. Если проект сложный, с несколькими типами мегаменю, разной мобильной и десктопной навигацией, ставьте The Plus Addons и не оглядывайтесь.