Elementor Меню
Идеальное меню в конструкторе wordpress Elementor в пару кликов.
Полная адаптация для мобильных устройств.
Создание так называемого мега-меню.
Добавляйте, любой контент в меню созданный с помощью Elementor
Добавьте новинки или товары на скидках, популярные категории товаров в меню просто перетащив их. Вставляйте баннеры с распродажами в menu, чтобы привлечь внимание клиента.
Контент добавляется в меню как и любой другой виджет в елементор. Простым перетаскиванием.
Добавляйте изображения, значки, карты или любые другие виджеты Elementor в свою навигацию на сайте.
Ваше меню будет полностью адаптивно на любых устройствах. На компьютере один вид, на мобильном другой.
3 варианта меню: горизонтальное, вертикальное и мобильное
Не ограничивайте себя в возможностях создании крутого меню в Elementor!
Один виджет меню содержит в себе по сути несколько меню:
- основное, горизонтальное
- вертикальное
- и меню для мобильных
Просто выберите, какое вам нужно.
Добавляйте иконки и метки, настраивайте внешний вид
Выберите иконку, настройте размер, стиль и добавьте её к конкретному пункту меню
Метки позволяют выделить пункт меню (новинки, скидка, новое). Настройте фон, размер, отступы, шрифт и так далее.
Настраивайте стиль текста для меню. Для основного меню свой стиль, для выпающего свой.
Попробуйте разные отступы для каждого пункта меню индивидуально.
Для мобильных одно, для компьютеров другое меню
Вы можете создать два разных меню. Одно будет отображаться на мобильных устройствах, другое будет показано только на компютерах/ноутбуках.
Создаём меню для Elementor в админке
Любой сайт, в том числе и созданный с помощью плагина Elementor, не обходится без menu.
Давайте пошагово разберем как же создать меню в Elementor.
Меню в самом wordpress
Прежде всего нам нужно создать меню в админ-части самого wordpress. Для этого переходим в админку, выбираем пункт «Внешний вид» > «Меню».
Для примера мы создадим меню под названием «Новое меню» и нажимаем кнопку «Создать меню».
После этого мы можем добавлять элементы в само меню elementor. Для этого ставим галочки напротив необходимых страниц, записей или рубрик (которые мы хотим добавить), нажимаем кнопку «Добавить в меню» и затем «Сохранить меню».
Порядок элементов в меню elementor.
Когда у нас уже есть созданное menu в админ-части (которое мы потом будем отображать в elementor) можно приступить к настройке порядка отображения элементов.
Это происходит очень просто. Мы «захватываем» левой кнопкой мыши необходимый элемент (например, раздел «Услуги») и как бы «перетягиваем» его по вертикали в нужное место относительно других.
Точно также мы можем задавать вложенность элементов меню. Только теперь нам нужно «перетягивать» необходимый элемент по горизонтали. Чтобы он стал как бы дочерним относительно родительского элемента.
Не забудьте потом сохранить меню, чтобы обновить порядок элементов.
Ну вот мы и создали menu в самом wordpress, которое мы сейчас будем вставлять на сайт уже с помощью виджета «Elementor Меню».
Добавляем меню elementor на страницу.
Обычно меню располагается в шапке (header) сайта. Туда мы и будем добавлять наше только что созданное меню с помощью виджета «Elementor Menu» от плагина Elemblock.
Рекомендуем вам почитать как создать header elementor.
Итак, в панели редактирования мы ищем виджет меню и перетягиваем его в нужное нам место.
Нам открываются стандартные настройки виджета элементор: содержимое, стиль и расширенные.
На вкладке содержимое мы видим 2 раздела: меню для компьютера и мобильное меню. Разберем каждый из них.
Меню elementor для компьютера.
Первым делом нам нужно выбрать только что созданное меню. В виджете также есть быстрая ссылка на настройки меню.
Выбираем внешний вид меню:
- горизонтальное
- вертикальное
Анимация подменю.
- плавное появление и закрытии
- увеличение и уменьшение
- появление/закрытие сверху или справа
Триггер и задержка меню Elementor
Существует два типа открытия подменю при использовании виджета меню в elementor:
- при наведении
- при клике
Вы можете выбрать оптимальный для вашего сайта.
Также можно задать задержку, как перед открытием, так и перед закрытием подменю. Время указывается в миллисекундах.
Иконки подменю
В меню можно добавить иконки, которые используются как навигационные, т.е. указывают на то, что элемента меню есть вложенный элемент.
Из библиотеки elementor можно выбрать сами иконки, как для верхнего уровня, так и для вложенных элементов меню.
Меню elementor для мобильных.
Чуть выше мы рассмотрели настройки в вкладке «содержимое» виджета menu elementor для отображения на ПК.
Теперь рассмотрим настройки для мобильных устройств.
Возможность отображения мобильного меню в принципе.
Данная настройка указана для возможности убрать меню в мобильной версии, например, когда вы используете вертикальное меню в elementor.
Выбор самого меню, созданного в админке.
У вас есть возможность показывать 2 разных меню (на ПК и мобильных). Для этого просто создайте несколько меню elementor (например, с разными пунктами меню) по инструкции описанной выше.
Позиция контейнера: слева или справа. Выберите от куда будет «выезжать» menu на мобильнике.
Иконки и значёк. Показывать ли иконки и значёк в мобильном меню. Как их добавить вы прочтете чуть ниже.
Кнопка открытия и закрытия мобильного меню обычно состоит из иконки, которое также выбирается из библиотеки elementor.
При этом к кнопке открытия меню можно добавить произвольный текст, например «меню». Текст появится в кнопке открывающей меню.
Далее выбираем иконку на кнопке назад. Тут все просто.
Тип текста назад. Можно выбрать следующее:
- элемент меню
- произвольный текст
- нет
В качестве элемента меню будет выступал родительский элемент. Произвольный текст: можно написать свой текст, например, «назад». Или ничего не указывать, тогда возвращаться можно будет по клику на иконку, которую мы выбрали чуть ранее.
Иконка подменю. Тут все просто и понятно и смысл выходит из самого названия настройки.
Ну вот и все. Мы создали меню в elementor. Теперь вам нужно только настроить внешний вид по вашему усмотрению на вкладке «Стиль».