Оглавление
Вы можете построить полное мега меню в Elementor, не покупая Elementor Pro. мегаменю - это широкое, многоколоночное раскрывающееся меню, которое показывает сразу целый раздел вашего сайта: ссылки, изображения, значки, даже контактную форму, вместо тонкого вертикального списка в бесплатной версии Elementor нет виджета мегаменю, а есть бесплатный Мегаменю Master Addons добавляет один, и вы проектируете каждую панель с помощью обычного редактора Elementor.
Это руководство охватывает всю сборку: включение расширения, прикрепление мегаменю к пункту меню, проектирование раскрывающейся панели и правильное размещение на мобильном телефоне - шаг, который пропускает большинство учебных пособий.
Вам нужен Elementor Pro для мегаменю?
Нет. в "Элементоре" есть три маршрута к мегаменю, и только один из них стоит денег:
| Маршрут | Стоимость | Компромисс |
|---|---|---|
| Виджет Мега Меню Элементор Про | Оплачиваемая годовая лицензия | Требуется Pro на каждом сайте, который вы создаете |
| Пользовательское меню CSS/ручной кодировки | Бесплатно | Хрупкий, его трудно редактировать позже, нет визуального редактирования |
| Мегаменю Master Addons | Бесплатно | Добавляет один плагин; панели, построенные визуально в Elementor |
Если мега-меню является единственной причиной, по которой вы собирались обновить, бесплатный маршрут выполняет ту же работу. Master Addons работает вместе с Elementor Pro без конфликтов тоже, поэтому существующая лицензия Pro не тратится зря. Элементор документирует здесь собственный рабочий процесс мегаменю Pro если вы хотите сравнить два подхода рядом; прежде чем начать, необходимо включить несколько экспериментальных функций.
Что вам нужно, прежде чем начать
- Элементор (бесплатная версия в порядке) установлен и активен
- Мастер-аддоны для Elementor установлен и активен
- Меню WordPress уже создано под Внешний вид → Меню (даже грубый, отредактировать его можно позже)
Шаг 1: Включите расширение мегаменю
Перейти к Основные дополнения → Дополнения и расширения на панели управления WordPress найдите Мега Меню в списке расширений и переключить его на. Сохранить.
Главные Аддоны поставляются со всем выключенным по умолчанию, поэтому вы загружаете только то, что используете. именно поэтому этот шаг существует вообще. если вы не видите опцию немедленно, жестко обновите страницу администратора (Cmd/Ctrl + Shift + R); плагины кэширования удерживают на старой меню администратора в течение минуты.
Шаг 2: Превратите элемент меню в мегаменю
Открытый Внешний вид → Меню и разверните элемент верхнего уровня, из которого вы хотите, чтобы мегапанель упала, обычно что-то широкое, например “Products”, “Services” или “Shop”.
- Отметьте Включить мегаменю опция в этом пункте меню.
- Выберите ширину панели. Полная ширина растягивается от края к краю, ширина контейнера соответствует вашему контенту.
- Сохранить меню.
Включите его только на пунктах, которые действительно нуждаются в пространстве. мега меню на одной ссылке “Contact” хуже, чем простая ссылка: это заставляет людей работать усерднее для одного пункта назначения.
Шаг 3: Создайте раскрывающуюся панель в Elementor
Содержимое панели представляет собой шаблон Elementor, что делает этот подход гибким: все, что вы можете построить на странице, вы можете поместить в меню.
- Нажмите Редактировать содержимое мегаменю в пункте меню открыть редактор Elementor.
- Постройте многоколонную компоновку Три или четыре столбца подходят для большинства навигаций.
- Заполните столбцы: виджеты заголовков в виде меток категорий, списки значков в виде групп ссылок, изображение или два для визуальной привязки.
- Опубликовать шаблон.
Несколько вещей, которые заставляют мегаменю работать, а не просто выглядеть занятыми:
- Группируйте по тому, как думают клиенты, а не по вашей организационной диаграмме. Заголовки столбцов должны соответствовать словам, которые используют посетители.
- Закройте его примерно пятью-семью ссылками на столбец. После этого сканирование рушится, и меню становится стеной.
- Дайте одной колонке работу. Рекомендуемый продукт, промо-акция или a призыв к действию зарабатывает свое пространство более чем в четвертом списке ссылок.
- Держите изображения светлыми. Изображения меню загружаются на каждую страницу. Сжимайте их и обслуживайте WebP: тяжелое мегаменю тащит весь ваш сайт время загрузки, а не только одна страница.
Шаг 4: Добавьте меню в заголовок
Если ваша тема уже отображает меню WordPress в заголовке, мегаменю работает немедленно. Дальнейшего шага не требуется.
Для полного контроля над самим заголовком создайте его с помощью бесплатного Мастер-создатель тем аддонов: создайте шаблон заголовка, загляните в него Виджет меню навигации, выберите меню, несущее ваше мега меню, и установите условие отображения на весь ваш сайт.That pairing, free teme builder плюс бесплатное мега меню, заменяет две функции, за которые люди чаще всего покупают Pro.
Шаг 5: Исправьте мобильный опыт
Здесь разваливается большинство мега меню Четырехколонная панель, которая выглядит острой на экране 1440px, становится бесконечным свитком на телефоне.
- Переключитесь на мобильный вид в Elementor и проверьте реальную высоту панели Если она проходит мимо двух экранов, вырежьте контент для мобильных.
- Скрыть декоративные изображения на мобильном с помощью отзывчивых средств контроля видимости Elementor; сохранить ссылки, уронить орнамент.
- Столбики штабеля вертикально и подтверждающие цели касания удобно большие.
- Тест на реальном телефоне, а не только предварительный просмотр редактора. Предварительный просмотр приближается; он не воспроизводит сенсорное поведение.
Если ваши точки останова не соответствуют вашему дизайну, бесплатно Пользовательское расширение точек останова позволяет установить свой собственный. Это полезно, когда точка останова планшета по умолчанию разрезает ваше меню на неудобную ширину.
Устранение неполадок
- Мегаменю не появляется. Подтвердите, что расширение включено, в пункте меню отмечена галочка "Включить мегаменю", и шаблон панели опубликован, а не оставлен в виде черновика. Затем очистите свой кэш.
- Панель появляется, но не имеет стиля. Обычно кэшированная таблица стилей. очистите свой кэш страниц и любой CDN, а затем жестко перезагрузите.
- Панель отрезана или скрыта за контентом. Родительский контейнер имеет
overflow: hiddenили низкий z-индекс. поднимите z-индекс заголовка и проверьте настройку переполнения контейнера заголовка. - Работает на рабочем столе, сломан на мобильном. Почти всегда область тумблера/гамбургера. проверьте настройки мобильного виджета меню и подтвердите, что ничто не накладывает тап-цель.
Часто задаваемые вопросы
Как создать мегаменю в Elementor без Pro?
Установите бесплатные главные дополнения для плагина Elementor, включите расширение Mega Menu под главными дополнениями > дополнения и расширения, затем откройте Внешний вид > Меню и отметьте Включить мегаменю на нужном элементе. нажмите "Редактировать содержимое мегаменю", чтобы разработать раскрывающуюся панель в обычном редакторе Elementor и опубликовать ее.
Как я могу создать меню в Элементоре бесплатно?
Бесплатная версия Elementor позволяет вам создать стандартное меню WordPress через меню "Внешний вид" и отобразить его с помощью бесплатного виджета Nav Menu. Для раскрывающегося списка мега-стиля бесплатный Elementor сам по себе не включает этот виджет, поэтому вам нужно бесплатное расширение, такое как Master Addons Mega Menu, чтобы добавить панели с несколькими столбцами.
Как я могу создать мегаменю в WordPress без использования плагинов?
Вы можете вручную кодировать раскрывающийся список с помощью пользовательских CSS и HTML, но он хрупкий. Он прерывает обновления тем, нуждается в разработчике для каждого изменения и не дает вам визуального редактирования. Большинство владельцев сайтов получают более быстрый и удобный результат от бесплатного плагина, такого как Master Addons, вместо этого.
Меню Max Mega бесплатно?
Меню Max Mega имеет бесплатную версию в репозитории плагинов WordPress, плюс платное дополнение Pro для дополнительных вариантов стилистики, и оно работает независимо от вашего конструктора страниц.Master Addons Mega Menu построено специально для Elementor, поэтому панели разработаны с тем же редактором перетаскивания, который вы уже используете для страниц.
Какой плагин мегаменю лучше всего подходит для Elementor?
Это зависит от того, что вы уже запускаете Если вы используете Elementor и хотите панели, разработанные визуально, не изучая новый интерфейс, Master Addons Mega Menu является надежным бесплатным вариантом. если вам нужны расширенные многоуровневые меню с динамическими условиями, оплаченный инструмент может стоить стоимости. протестируйте с вашим собственным контентом, прежде чем брать на себя обязательства по любому из них.
Как сделать мегаменю Elementor отзывчивым на мобильном телефоне?
Переключитесь на мобильный вид Elementor и проверьте реальную высоту панели.Сложите столбцы вертикально, спрячьте декоративные изображения с помощью адаптивных элементов управления видимостью, сохраните большие цели касания и протестируйте на реальном телефоне, а не на предварительном просмотре редактора. Если точки останова по умолчанию неловко разрезают меню, установите свои собственные с помощью расширения Custom Breakpoints.
Почему не появляется мое мегаменю Elementor?
Проверьте четыре вещи по порядку: расширение Mega Menu включено, пункт меню отмечен галочкой Включить Mega Menu, шаблон панели опубликован, а не сохранен в виде черновика, и ваш кэш очищен Если панель появляется, но обрезана, переполнение родительского контейнера: скрытый или низкий z-индекс скрывает его.
Связанное чтение
