Мега-меню (или Mega Menu) — это часть меню вашего сайта, которая кардинально отличается от обычного выпадающего меню со списками, которое можно найти, например, на этом сайте. Чаще всего, мега-меню представляет из себя большой выпадающий экран, при наведении на один, или несколько основных элементов в вашем меню. Элементы могут находится на этом экране горизонтально, вертикально, в списках и иным образом. Иногда можно встретить мега-меню, внутри которого находится фотография, слайдер внутренних элементов, или даже видео.

В этой статье я описываю все предельно коротко и без воды, но если вы хотите узнать как создать мега меню на WordPress + Elementor чуть более подробно, я рекомендую вам посмотреть мое свежее видео на эту тему:

Содержание

Что нам понадобится

Для работы нам понадобятся: 

  • Установленный движок WordPress;
  • Тема Elementor, которая называется «Hello» (можно создать мега-меню и на другой теме, однако используя Elementor и различные дополнения к нему, все же рекомендуется пользоваться именно «штатной» темой Элементор);
  • Также нам понадобится два плагина: непосредственно сам «Elementor», а также плагин под названием «ElementsKit».

Устанавливаем и активируем все необходимое, после чего переходим к настройке.

Создание меню

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

Не спешите выходить из раздела после создания меню! Теперь, когда меню установлено, нам нужно активировать мега-меню. Делается это нажатием на чекбокс над всеми элементами меню (обратите внимание: если у вас не установлен, или не активирован плагин «ElementsKit», сделать этого не получится). 

Теперь мы выбираем пункты меню, для которых хотим активировать мега меню, сделать это можно наведя на пункт меню и нажав на «шестеренку» с надписью «mega menu» (надпись может отличаться). В открывшемся окне активируем слайдер включения и переходим в редактирование с помощью «Elementor», где все выглядит привычным образом, если вы хотя бы раз пытались с ним работать.

Создание хедера

Давайте подведем небольшой итог по проделанной работе к этому моменту:

  • У нас есть WordPress;
  • Установленные тема и плагины;
  • Мы создали меню и выбрали пункты, для которых активировали мега-меню.

Теперь в разделе «ElementsKit» вашей административной панели нам потребуется перейти в «Header/ Footer» и создать Хедер. Процесс также не отличается от обычной работы с конструктором Элементор, за один маленьким исключеним: вы не можете вставить элемент «Nav Bar», или другие подобные, вам обязательно нужно использовать специальное меню от «ElementsKit», которое появилось в разделе «Элементы» после активации этого дополнения.

Важно также добавить, что вы можете использовать подготовленные шаблоны «ElementsKit», как я это делал на видео. С ними работать удобнее и проще, чем создать все самому с нуля. 

Кстати, как создать обычный Хедер на визуальном конструкторе «Elementor», я показывал в целых двух моих прошлых видеороликах: здесь (Cоздание хедера в Elementor) и здесь (Создание сайта на WordPress с нуля).

Активация

После создания и сохранения Хедера, наше мега меню должно отображаться на сайте. Но! У меня дважды возник баг с показом меню. Как я его решил, я показал на видео. Если коротко — вы можете создать дополнительное меню и попереключаться между ними в визуальных настройках хедера. После этого баг пропадает сам собой.

Ссылка на плагин

Если вы предпочитаете ручную установку плагинов (а не из административной панели), вот ссылка на плагин с помощью которого я создавал меню в этой инструкции:

ElementsKit Elementor addons (Header Footer Builder, Mega Menu Builder, Free Elementor Widgets & Elementor Templates Library)

Рекомендации

На сайте вам также могут быть полезными мои плагины, найти их можно в моем профиле на официальном сайте WordPress.org: https://profiles.wordpress.org/dmitrylitvinov/#content-plugins.

На этом все, а если у вас остались вопросы — не стесняйтесь задавать их в комментариях к этой статье, или на платформе YouTube под видеороликом выше.