Каждому сайту нужно меню, а заголовок темы по умолчанию редко совпадает с настраиваемым дизайном Elementor.The free Виджет меню навигации в Мастер-аддоны для Elementor отображает любое меню WordPress внутри редактора Elementor: горизонтальные или вертикальные макеты, установленные для каждого устройства, стилизованные подменю и переключатель гамбургера, который заменяет телефоны.
Это руководство проходит через виджет от первого перетаскивания до стилизованного меню с рабочим раскрывающимся падением на странице в реальном времени.
Что делает виджет Меню Навигации #
Виджет извлекает меню, которое вы создали в разделе Внешний вид, Меню и отображает его как элемент Элементор. Вы выбираете макет и поведение, стилизуете каждое состояние элементов, раскрывающихся элементов и мобильного переключателя, все из панели Элементор. Сами пункты меню, их метки, порядок и подменю остаются управляемыми в WordPress, поэтому редакторы контента никогда не прикасаются к Elementor, чтобы добавить страницу в меню.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Виджет меню навигации включен на панели параметров "Мастерные надстройки" в разделе "Виджеты навигации".
- Меню, созданное под Внешний вид, Меню в вашей панели управления. в демо-версии используется меню “main” с Домой, Ценообразование, Команда и Контакт, а также подменю часто задаваемых вопросов в разделе Контакт.
Как добавить виджет Меню Навигации #
В редакторе Elementor выполните поиск Элементы панель для Меню навигации и перетащите его на страницу, как правило, в раздел заголовка. виджет отображает ваше первое меню WordPress немедленно.
Выберите меню и макет #
The Генерал раздел управляет всем виджетом. Выбрать Меню перечисляет каждое меню на экране меню; выберите тот, который нужно отобразить. Макет предлагает Горизонтальный, Вертикальный и Гамбургер (Pro), и вы можете установить его отдельно для каждого устройства. для вертикальных меню, Тип добавляет поведение: Нормальный, Переключить, Аккордеон или Сторона. Вот демонстрационное меню в вертикальном расположении:
Для заголовка Horizontal - обычный выбор. Выравнивание размещает элементы слева, по центру, справа или обоснованно. не существует единой настройки точки останова: переключите Elementor на просмотр планшета или телефона и выберите макет для этого устройства. телефоны по умолчанию используют переключатель гамбургера. стоит попробовать Вертикаль один раз, даже если она вам не нужна; вид обеих макетов заставляет параметры выравнивания щелкнуть.
Настройте раскрывающийся список #
The Выпадающее меню раздел управляет поведением и индикатором подменю:
- Индикатор падения: покажите или спрячьте стрелку рядом с элементами, содержащими подменю.
- Положение индикатора, промежуток между ними, размер значка: где сидит стрелка и насколько она велика.
- Значок раскрытия: замените шеврон по умолчанию на любой значок с помощью состояний "Нормальное" и "Наведение", а также элемента управления "Поворот".
- Ширина и выравнивание понижения: размер панели подменю и выравнивание текста.
- Индикатор подменю: значок меню третьего уровня.
Настройте мобильный переключатель #
Когда устройство использует макет гамбургера, меню сворачивается за кнопкой переключения.The Гамбургер Меню раздел настраивает его: Выравнивание, Тип (Иконка, текст или и то, и другое), Вид (По умолчанию, в стопке или в рамке), Форма (Квадрат или Круг), и отдельные значки для Нормального и Активного состояний Переключить редактор на мобильный предварительный просмотр и появляется переключатель с меню, сложенным под ним:
Стиль пунктов меню #
В Стиль вкладка, Основной пункт меню охватывает ссылки верхнего уровня. Типографика обрабатывает шрифт:
Ниже этого, Нормальный, Наведите курсори Активный вкладки каждая переноска Цвет, Цвет фона предметаи Текстовая теньплюс поделились Горизонтальная и вертикальная набивка, Пространство Между, и пограничный контроль. демо-версия устанавливает синий цвет зависания, предварительный просмотр в прямом эфире, когда курсор пересекает Цены:
Стиль переключателя, раскрывающегося списка и элементов #
Еще три раздела "Стиль" завершают работу:
Гамбургер стили переключателя: цвет, фон, радиус границы, тени, размер значка и заполнение с нормальными, ховер- и активными состояниями.
Выпадающее меню стили подменю панель: цвет фона, разрыв сверху, граница и набивка. Подменю Выпадающие охватывает более глубокие меню.
Элемент раскрывающегося меню стилизует ссылки внутри панели с теми же тремя состояниями плюс a Делитель группа для линии между элементами:
Результат на странице #
На странице "В реальном времени" меню отображается в вашем стиле: наведение на курсор состояния "Запуск", а подменю часто задаваемых вопросов находится под заголовком "Контакт", где именно его помещают раскрывающиеся настройки.
Обычные случаи использования #
- Пользовательские заголовки построен с Элементором, где тематическое меню не может следовать дизайну.
- Лендинги со своим тонким меню, отдельным от общесайтового.
- Навигация по боковой панели использование вертикального макета на страницах документации или категорий.
- Мобильные-первые меню опираясь на значок переключателя, вид, варианты формы.
- Многоуровневые меню со стилизованными раскрывающимися панелями и панелями подуровней.
Советы по улучшению навигационного меню #
- Сначала создайте меню в WordPress. Виджет рендерит меню из Внешний вид, Меню, он их не создает Структура там, стиль здесь.
- Дайте Hover и Active разные цвета. Наведите курсор; Active сообщает посетителям, на какой странице они находятся. Тот же цвет тратит сигнал.
- Проверьте каждое устройство на реальном телефоне. Меню из четырех пунктов может подойти планшетам, а меню из семи пунктов может потребоваться и вертикальная компоновка на планшетах.
- Явно стилизуйте раскрывающийся фон. Прозрачное подменю над содержимым страницы - наиболее распространенная жалоба в меню, которую мы видим; надежный фон раскрывающегося меню исправляет это в один клик.
Видео Учебник #
Если вы хотите увидеть виджет Меню Навигации в действии, это видео проходит через полную настройку, от выбора меню до стилизованного раскрывающегося списка на странице в реальном времени:
Часто задаваемые вопросы #
Что такое виджет меню навигации в главных аддонах?
Это виджет Elementor, который отображает любое меню WordPress с полным контролем стиля. Он предлагает горизонтальные и вертикальные макеты, установленные для каждого устройства, стилизованное подменю с пользовательскими индикаторами и настраиваемый переключатель гамбургера, который телефоны используют по умолчанию.
Где добавить или удалить пункты меню?
В WordPress, под Внешний вид, Меню. раскрывающийся список меню выбора виджета перечисляет каждое меню, которое вы там построили, и отображает выбранное вами. Элементы, порядок и подменю управляются в WordPress; виджет обрабатывает макет и стиль.
Как сделать раскрывающееся подменю?
Вставить элементы в меню WordPress, перетащив их под родительский элемент на экране Меню Виджет показывает выпадающий индикатор рядом с родителями автоматически, а разделы Выпадающее меню и Выпадающий список управляют поведением и стилем панели.
Когда появляется мобильное меню гамбургеров?
На телефонах по умолчанию.Master Addons Pro позволяет выбрать раскладку Hamburger для любого устройства, с типами Popup и Offcanvas. раздел Меню Hamburger стилизует тумблер, включая пиктограмму или тип текста, виды в стопке или рамке, квадратную или круглую форму, а также отдельные нормальные и активные пиктограммы.
Может ли меню быть вертикальным, а не горизонтальным?
Да. элемент управления макетом предлагает горизонтальное, вертикальное и гамбургерное (Pro). Вертикальные масти боковые панели и страницы документации, а элемент управления типом добавляет поверх модели Toggle, Accordion или Side.
Завершая #
Виджет "Меню навигации" помещает меню сайта, в котором живет остальная часть вашего дизайна: выберите меню WordPress, выберите макет, стилизуйте элементы, раскрывающиеся данные и переключатели мобильных устройств, а также опубликуйте. Он естественным образом сочетается с Внехолстовый контент виджет (Pro) для выдвижной мобильной навигации.Просмотреть полный набор Виджеты и расширения Master Addgetsи посмотрите Страница виджета Nav Menu для сравнения с виджетами меню Elementor Pro.
