Создание мега-меню WordPress + Elementor

Создание мега-меню WordPress + Elementor

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

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

В некоторых темах есть возможность реализации мега-меню. Например, в теме Ocean есть такая опция, но она довольна ограничена и во многих случаях не позволяет воплотить богатую фантазию дизайнеров. В теме Astra создавать мега-меню можно только в версии PRO. Решение, о котором я расскажу, можно применить в любой теме и позволяет создать практически любое мега-меню.

Создаем мега-меню

Для этого нам потребуется редактор Elementor и дополнение для него Elements kit Elementor addons. Кстати, небольшое отступление на тему данного плагина. На сайте есть статья, посвященная созданию анимации, используя ресурс Lottie и Elementor. В этом дополнении уже встроен виджет для создания аналогичной анимации. И, если вам также нужно создать анимированные изображения, то для этого не потребуется установка дополнительного плагина. Теперь вернемся опять к мега-меню.

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

Это дополнение позволяет существенно расширить функционал редактора Elementor, к тому же у него есть собственная библиотека различных шаблонов.

После установки и активации плагина Elements kit Elementor addons в главном меню админ-панели WordPress появится соответствующий раздел ElementsKit, к которому мы обратимся чуть позже.

Для начала нам нужно создать меню или использовать уже заранее созданное в разделе Внешний вид > Меню. Когда меню создано, над всеми элементами меню появится раздел ElementsKit Megamenu. Ставим галочку Enable this menu for Megamenu content и сохраняем меню. Теперь при наведении на основные элементы меню, в каждом из них появляется кнопка Mega menu.

Нажимаем на эту кнопку, и появляется слудеюущее всплывающее окно с настройками. Активируем ползунок в положение Megamenu enabled. Во вкладке Settings можно задавать расположение мега-меню и его ширину.

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

Нажимаем на кнопку Edit megamenu content. При этом загрузится редактор Elementor, где мы можем создать контент для собственного мегаменю или выбрать шаблон из библиотеки. Несмотря на то, что большинство шаблонов платные, для создания мегаменю есть пара бесплатных шаблонов, которые можно настроить по своему желанию.

После того, как область мега-меню создана, как обычно в Elementor, нажимаем Обновить и выходим из редактора.

В окне Mega menu нажимаем кнопку Save и закрываем его. На этом мега-меню для данного элемента создано.

После этого находим раздел ElementsKit в основном меню админ-панели WordPress и заходим в раздел ElementsKit. В нем открываем вкладку Elements, там должен быть активирован раздел Heading.

После этого открываем вкладку Modules. Там должны быть активированы опции Header Footer и Mega menu. На этом настройки плагина закончены и можно переходить непосредственно к формированию самого хедера с мега-меню.

В разделе админ-панели ElementsKit идем во вкладку Header Footer и нажимаем на кнопку Add new. Во всплывающем окне, которое появится при нажатии, присваиваем заголовок будущему элементу, выбираем тип, что это будет. В нашем случае, это Header. Выбираем условие его появления. В бесплатной версии это единственный выбор – для всех страниц сайта. И активируем его установив ползунок Activition в положение On. Нажимаем Save Changes.

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

Затем нажимаем кнопку Edit content. После этого загрузится редактор Elementor, где можно сразу создать область заголовка. Опять же, можно сделать это полностью с нуля по своему усмотрению, а можно загрузить готовый шаблон из библиотеки. Там есть бесплатные шаблоны Хедера.

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

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

Добавить комментарий