Как создать меню навигации в Elementor без Pro

Ключевые выводы

• Элементор без Pro не может разместить меню WordPress на странице или в заголовке, поскольку виджет меню Элементор (ранее меню Nav) поставляется только с Elementor Pro.
• Меню навигации Elementor без Pro можно создать с помощью виджета меню навигации Master Addons, который отображает любое меню WordPress и устанавливает его макет отдельно для настольных компьютеров, планшетов и мобильных устройств.
• Подменю в меню Elementor nav взяты из WordPress: перетащите элемент немного прямо под его родительским элементом в Внешний вид > Меню, пока он не прочитает “sub item”, затем сохраните.
• Виджет Master Addons Nav Menu имеет четыре вертикальных типа: Normal открывает подменю сбоку при наведении, Toggle и Accordion расширяют их при нажатии, а Side прижимает меню к краю страницы.
• Виджет Master Addons Nav Menu по умолчанию дает телефонам переключатель гамбургера, а Hamburger на настольном компьютере или планшете, а также типы Popup и Offcanvas нуждаются в Master Addons Pro.

Вы можете построить стилизованное меню Elementor nav, не покупая Elementor Pro. Виджет собственного меню Elementor - только Pro, но виджет Master Addons Nav Menu втягивает в редактор любое меню WordPress, стилизует каждый уровень с панели и сворачивается в гамбургер на телефонах.

Это руководство охватывает почему ядро Elementor покидает пробел, способы заполнить его и заголовок построить в шесть шагов Затем идут подменю, четыре вертикальных типа меню, мобильное поведение, обычные причины меню не отображается, и части, которые нуждаются в Master Addons Pro.

Почему Elementor free не имеет виджета меню

Бесплатный плагин Elementor поставляет десятки виджетов макета и контента и никак не может разместить навигационное меню WordPress на странице или в шаблоне. виджет, который это делает, первоначально назывался Nav Menu, а теперь виджет Menu, только Pro. Собственная документация Элементора подтверждает.

Вы все еще можете построить меню в разделе Внешний вид > Меню. разрыв находится на стороне дизайна: ядро Elementor не в что опустить это меню, поэтому оно появляется везде, где ваша тема печатает его.

На простом сайте с готовой к меню темой, этого может быть достаточно, Как только вы хотите пользовательский заголовок, гамбургер переключает вы управляете или мега меню, бесплатный Элементор в одиночку не может туда попасть Старые учебные пособия вызывают виджет Pro Nav Menu и более новые называют его Меню, но он всегда нуждался в Pro.

Три способа добавить меню навигации без Pro

Существует три реальных варианта без лицензии Elementor Pro. Четвертая строка - Elementor Pro, для сравнения.

Расположение меню темы. Каждая тема регистрирует хотя бы одну область меню. назначьте свое меню, и оно будет работать с нулевыми плагинами, но вы не получите контроля над его внешним видом от Elementor, а поведение мобильных устройств - это то, что создал автор темы. если это меню уже выглядит прямо на телефоне, пропустите виджет.

Виджет меню навигации Master Addons. Это вариант Elementor-native, который работает без Elementor Pro. Бросьте Виджет меню навигации в любой шаблон укажите его в меню из меню "Внешний вид" > "Меню", а также цвета стиля, интервал, подменю и переключатель мобильного телефона с панели.

Мегаменю Master Addons. Для сайтов с большим количеством категорий расширение Mega Menu строит многоколонные панели поверх одного и того же виджета и работает без Elementor Pro. Прохождение: как построить мегаменю в Elementor без Pro.

Элементор Про. Если он уже принадлежит вам, используйте его виджет Меню и Theme Builder. два плагина для одного задания только добавляют вес.

Хотите увидеть каждый макет перед сборкой? выше Страница виджета Nav Menu имеет живые демо горизонтальных заголовков, вертикальных боковых панелей и телефон гамбургер.

Постройте меню, начните заканчивать

Сборка происходит в wp-admin и редакторе Elementor, без кода. Сначала проверьте, что ваша тема не печатает свой собственный заголовок, потому что два сложенных заголовка - это самый распространенный беспорядок здесь.

Шаг 1: Зарегистрируйте меню

Перейдите в "Внешний вид" > "Меню", создайте меню, добавьте свои страницы и ссылки и дайте ему имя, которое вы узнаете через шесть месяцев. Это простой WordPress, не имеющий никакого специфического плагина, и у WordPress есть руководство по экрану Меню если вы не построили его раньше. Настройте любые раскрывающиеся данные и здесь (см. раздел подменю).

Шаг 2: Создайте шаблон заголовка

Открыть Мастер-создатель тем аддонов и добавить новый шаблон с набором типов в Заголовок Это позволяет заменить заголовок темы вместо борьбы с ним. чтобы начать с готового дизайна, импортируйте один из них Шаблоны заголовков Elementor и укажите виджет меню в своем меню.

Шаг 3. Добавьте виджет меню навигации и выберите меню

Найдите на панели Elementor для “Nav Menu” и перетащите его в заголовок (на его панели написано Меню навигации).В Содержании > Общие выберите меню, которое вы создали на шаге 1 из раскрывающегося списка Выберите меню, затем установите Макет Горизонтальный подходит стандартный заголовок, с управлением выравнивания рядом с ним Вертикаль подходит боковой панели и добавляет элемент управления типа с Нормальным, Переключить, Аккордеон и Сторона.

Макет установлен для каждого устройства. рабочий стол запускается на Horizontal, а телефоны запускаются на Hamburger, поэтому меню сворачивается на телефоне без дополнительной настройки.

Шаг 4: Создайте стиль

Состояния шрифта, цвета, интервала и наведения - все это на вкладке Стиль, без пользовательских CSS. Основной элемент меню содержит заполнение, пробел в элементе, выравнивание, типографику, нормальные цвета, цвета наведения и активные цвета, фон, граница, радиус и тень текста. Core Elementor не может сделать ничего из этого для меню.

Шаг 5: Опубликуйте и назначьте его

Сохраните шаблон и назначьте его всему сайту. без главных дополнений Pro это единственное доступное условие отображения, которое работает, когда вы хотите один заголовок везде.

Шаг 6: Проверьте его на передней части

Загрузите сайт и подтвердите только один рендер заголовка Если меню темы тоже отображается, выключите его в настройках Customizer темы, так как скрытие его с помощью CSS оставляет разметку на странице.

Как добавить подменю и стилизовать раскрывающийся список

Чтобы добавить подменю в меню навигации Elementor, вложите элемент под его родительским элементом в меню "Внешний вид" >, и виджет превратит его в раскрывающееся меню. Внутри Elementor нет настройки подменю.

1. Откройте "Внешний вид" > "Меню" и выберите меню, которое использует виджет.
2. Добавьте дочернюю страницу или ссылку, если ее еще нет в меню.
3. Перетащите его под родительский элемент и немного вправо, пока рядом с его именем не появится метка “sub item”.
4. Нажмите "Сохранить меню", затем перезагрузите редактор Elementor или интерфейсную часть.

В горизонтальном заголовке родитель получает стрелку индикатора (установленную в значке "Содержимое" > "Индикатор"), и подменю открывается при наведении.

Выпадающее меню стилизует панель (ширина, фон, граница, радиус, тень, расстояние от верхней панели).Выпадающее меню Элемент стилизует ссылки внутри него: типографика, разрыв, заполнение, нормальные цвета, цвета наведения и Active, а также дополнительный разделитель. Меню третьего уровня получают соответствующие разделы выпадающего подменю.The демонстрация вариантов раскрывающегося меню показывает несколько стилей панелей, построенных таким образом.

Четыре типа вертикальных меню

Вертикальное меню Elementor в Master Addons бывает четырех типов: Обычное, Переключающее, Аккордеонное и Боковое. Установите макет на вертикальное и под ним появится элемент управления Type.Type устанавливается на устройство тоже, поэтому боковая панель может использовать Аккордеон на планшете и Нормальный на рабочем столе.

Нормальный

Нормальный открывает каждое подменю сбоку от своего родительского на hover, как вылет Он подходит настольной боковой панели с местом справа.

Переключить

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

Аккордеон

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

Сторона

Сторона привязывает меню к краю страницы, основные элементы которого находятся в вертикальной полосе, а каждое подменю - на панели рядом с ней. The демонстрация вертикального бокового меню показывает на полной странице.

выше демонстрация меню вертикальной навигации показывает стилизованную версию боковой панели.

Заставить его работать на мобильном телефоне

На телефонах виджет Nav Menu по умолчанию сворачивается в гамбургерный тумблер Раздел "Меню Гамбургера" на вкладке "Контент" устанавливает его выравнивание, значок, текст или и то, и другое, представление, форму, сложенное или оформленное в рамку по умолчанию, а также отдельные нормальные и активные значки.

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

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

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

Почему не отображается меню навигации Elementor

Когда меню навигации Elementor не отображается, причина почти всегда одна из этих четырех. Проверьте их по порядку.

1. Меню не выбрано или меню не существует. Создание меню не соединяет его с виджетом, поэтому выберите его в Выбрать меню Если в поле написано “В вашем сайте нет меню”, создайте одно первое.
2. Шаблон заголовка не применяется. Шаблон заголовка ничего не делает, пока не имеет условия отображения. Установите весь сайт в сборщике тем и проверьте, чтобы ни один заголовок темы не закрывал его.
3. На телефоне меню за гамбургером. Телефоны показывают тумблер вместо ссылок Если цвет туглера соответствует фону заголовка, значок невидим, а меню выглядит отсутствующим. дайте тугглу контрастный цвет в Стиль > Гамбургер.
4. Кэширование или задержка JavaScript. Кэш страницы может обслуживать старый заголовок, а задержка JavaScript может остановить раскрывающиеся данные и переключатель от работы до тех пор, пока посетитель не переместит мышь.Очистите кэш и исключите сценарии меню из задержки JS.

Что нужно Мастер Аддоны Про

Две части этой установки нуждаются в Master Addons Pro.

Гамбургер на рабочем столе или планшете, а также типы Popup и Offcanvas. Макет предлагает горизонтальный и вертикальный на каждом устройстве, с Гамбургер маркировки Pro. Телефоны получить гамбургер по умолчанию из коробки, но Гамбургер на более широких экранах и типах Popup или Offcanvas нужно Pro. Таким образом, скользящее меню вне холста является платной функцией здесь, через макет Гамбургера или отдельно Виджет контента Off-Canvas, который открывает любой сохраненный шаблон в панели Без Pro ближайшим вариантом является тип Вертикальная макет Боковая.

Таргетирование Theme Builder - одно из правил. Бесплатный Theme Builder сохраняет ровно одно условие отображения: Весь Сайт. другой заголовок на целевой странице или для вошедших в систему участников нуждается в Pro. Наш разбивка условий отображения объясняет, как работают правила условий и бесплатное руководство по созданию тем охватывает остальную часть этого уровня.

Виджет не имеет анимации указателя на наведение (в меню Elementor Pro они есть) и не имеет липкой настройки ни на одном плане, Чтобы держать заголовок в поле зрения, используйте эффекты движения Elementor Pro на контейнере заголовка, или добавьте selector { position: sticky; top: 0; z-index: 99; } в контейнер через Мастер надстроек Пользовательское расширение CSS. руководство по липкому заголовку проходит через оба.

Если вы уже владеете Elementor Pro, ничего из этого не применимо. The каталог виджетов и расширений перечисляет остальную часть плагина, и если заголовку нужен раздел, который вы продолжаете восстанавливать вручную, Виджет Строитель (Про) превращает его в настоящий виджет.The страница ценообразования перечисляет уровни.

Часто задаваемые вопросы

Что делать дальше

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

• Страница виджета Nav Menu: макеты, живые демо и сравнение с виджетами меню Elementor Pro.
• Расширение Мега Меню: многоколонные панели с любым виджетом Elementor внутри.
• Угольная навигационная панель с демонстрацией мегаменю: полный заголовок, созданный с обоими.

Связанное чтение

• Что такое мегаменю? Определение, примеры и когда его использовать
• Как построить мегаменю ресторана в Элементоре
• Как создать одностраничный веб-сайт с помощью Elementor
• Как редактировать нижний колонтитул в WordPress с помощью Elementor без Pro