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