Оглавление
Ресторанное мега меню - это широкая раскрывающаяся панель, которая помещает все меню еды, диетическую информацию, часы работы и кнопку бронирования в одном месте вместо того, чтобы закапывать их за несколько кликов. Посетители приезжают, желая увидеть еду, цены, часы и способ бронирования. Обычно по телефону. Часто, решая между вами и где-то еще.
Это руководство строит один со свободным Элементором и бесплатным Мегаменю Master Addons. Elementor Pro не нужен. Вот готовый результат.Hovering “Dishes” открывает полное меню ресторана с категориями, ценами, диетическими тегами, особенным сегодняшним вечером и кнопкой "Зарезервировать стол":
Если вам нравится стиль меню ресторана мега тогда вы можете скачать его и импортировать в мастер аддоны виджет builder.Then вы можете легко настроить цвет текста, изображение, URL etc исходя из ваших потребностей и использовать его в вашем мега меню на вашем сайте ресторана.
Что должно содержать мегаменю ресторана
Прежде чем что-либо строить, определитесь, что приносит место в панели. планировка, которую мы строим в этом руководстве, имеет четыре зоны, и они охватывают почти каждый ресторан:
| Зона | Содержание | Почему там |
|---|---|---|
| Боковая панель категории | Закуски, макароны и ризотто, пицца на дровах, гриль-магазин, десерты, вино и напитки | Позволяет посетителям сразу перейти в раздел, который им дорог |
| Решетка посуды | Названия блюд, краткие описания, цены, теги вроде Вегетарианская, Острая, Выбор шеф-повара | Единственный самый популярный контент на любом сайте ресторана (в теги встроена диетическая информация) |
| Рекомендуемая карта | Сегодняшнее особенное с фотографией, описанием и ценой | Дает кухне место, где можно продать свою лучшую тарелку |
| Подкладка действий | Забронируйте кнопку "Настольный", часы работы, адрес, полное меню PDF-ссылка | Преобразует визит вместо того, чтобы просто информировать об этом |
Что упустить: ваш полный О истории, упоминаниях в прессе и социальных лентах. Те принадлежат нижний колонтитул. Навигационная панель предназначена для того, чтобы куда-то доставлять людей, а не для того, чтобы рассказывать всю историю.
Вам нужен Elementor Pro для этого?
Виджет мегаменю № Elementor находится внутри Elementor Pro, но бесплатный маршрут ниже создает ту же панель без подписки.
| Маршрут | Стоимость | Компромисс |
|---|---|---|
| Виджет Мега Меню Элементор Про | Оплачиваемая годовая лицензия | Требуется Pro на каждом сайте, который вы создаете, а также включение экспериментальных функций |
| Пользовательский CSS/выпадающий код с ручным кодированием | Бесплатно | Хрупкий, трудно редактировать между изменениями меню, без визуального редактирования |
| Мегаменю Master Addons | Бесплатно | Добавляет один плагин; панель спроектирована визуально в Elementor, как и любая другая страница |
Для ресторана с одним местом, обновляющего свое меню несколько раз в год, достаточно бесплатного расширения. более крупная группа с несколькими местоположениями, жонглирующая несколькими редакторами, все равно может получить выгоду от более широкого набора инструментов Pro, но это решение обо всем сайте, а не конкретно о мегаменю. Элементор документирует рабочий процесс мегаменю Pro здесь если вы хотите сравнить это напрямую.
Что вам нужно
- Элементор (бесплатная версия в порядке)
- Мастер-аддоны для Elementor, установлен и активен
- Страницы, уже созданные для разделов вашего меню (пока они могут быть заполнителями)
Шаг 1: Включите расширение мегаменю
Мастер Аддоны хранит каждый виджет и расширение за тумблером так что неиспользуемые никогда не загружаются Перейти к Мастер-аддоны → Настройки, открой Расширения таб и найдите Мега Меню в группе Дисплей. включите его переключатель и нажмите Сохранить изменения. Если вы не видите переключатель, вы, вероятно, используете старую версию плагина, поэтому сначала обновите.
Шаг 2: Структурируйте меню WordPress и включите мегаменю
Перейти к Внешний вид → Меню и построить скелет, прежде чем касаться любого дизайна. в этой сборке меню называется Главное меню с пятью пунктами: Главная, Блюда, О нас, Блог, Аккаунт. “Dish” - это предмет, который получает мегапанель.
Сначала сделайте структуру правильно. мегапанель прикреплена к пункту меню, поэтому перестановка после означает переделку дизайнерских работ.
При активном расширении a Мегаменю Master Addons в левом столбце экрана Меню появляется поле Переключить его Включить мегаменю включись. В тот момент, когда ты это сделаешь, фиолетовый Мастер Мега значок отображается рядом с каждым пунктом меню. Этот значок - это место, где живут мега-варианты меню каждого пункта.
Шаг 3: Включите мегаменю для блюд
Нажмите « Мастер Мега значок на элементе “Dishes” Всплывающее окно настроек открывается четырьмя вкладками: Содержимое, Настройки, Значок и Значок.
- На Содержание таб, переверните Мегаменю Включено переключитесь на ДА. Загорается кнопка Правка содержимого мегаменю.
- На Настройки вкладка, установите размер и поведение панели. Мы использовали Пользовательская ширина при 1000px, достаточно широкий для сетки посуды плюс избранная карта. полная ширина также есть, если вашему дизайну нужен весь экран.
- Набор Мобильное меню на Контент строителя, Триггерный эффект на Ховер и Переход чтобы исчезнуть. вкладки "Иконка" и "Значок" являются дополнительными опциями (например, значок “New” в сезонном меню).
- Нажмите Сохранить.
Вы настраиваете ширину мега меню на вкладке Настройки: Полная ширина, По умолчанию или Пользовательская ширина, как у нас 1000px. На той же вкладке находится источник Мобильного меню, Эффект триггера (наведение или щелчок), анимация перехода и переключатели для метки меню и описания:
Шаг 4: Создайте панель в элементоре
Вернувшись на вкладку "Контент", нажмите Редактировать содержимое Megamenu. Панель открывается в обычном редакторе Elementor, поэтому вы проектируете ее, как и любую другую страницу. выстраивайте четыре зоны из таблицы выше:
- Полоса заголовка: название ресторана плюс короткая кухонная заметка (“Кухня открыта до 23:00 · Деревянная печь, ежедневно работающая при 4”).Записка тихо отвечает на вопрос “открываются ли они?”, и никто не охотится часами.
- Боковая панель категории: Закуски, паста и ризотто, пицца на дровах, гриль-магистраль, десерты, вино и напитки, каждый из которых имеет количество блюд.
- Решетка блюд: имя, однострочное описание, цена, и теги, такие как Вегетарианский, Пряный, или Выбор шеф-повара. теги обрабатывают диетическую фильтрацию без отдельного столбца.
- Рекомендуемая карта и нижний колонтитул действия: сегодняшний выпуск с фотографией и ценой, а Зарезервировать кнопку Стол, часы работы и адрес, а также ссылка “Скачать полное меню (PDF)”. Если вы предпочитаете показывать структурированное время работы, то Виджет "Часы работы" сохраняет их редактируемыми в одном месте.
Каждое имя блюда, цена и тег остаются редактируемыми с панели Элементор слева. Обновление меню позже - это редактирование контента, а не задание на дизайн. Опубликуйте шаблон, когда закончите, и закройте редактор.
Шаг 5: поместите меню в заголовок
Для мегаменю нужен заголовок, в котором можно жить Если в заголовке вашей темы уже отображается Главное меню, вы можете пропустить этот шаг, но построение заголовка с помощью Master Addons сохраняет все в одном редакторе.The Тема Builder бесплатна, в отличие от Elementor Pro.
- Перейти к Мастер-аддоны → Theme Builder и нажмите Добавить новый шаблон.
- Установите тип шаблона Заголовок, переключатель Активация на и в разделе Условия выбирайте Включить → Весь сайт.
- Нажмите Редактировать с помощью Elementor.
Внутри шаблона заголовка перетащите Меню Навигация виджет и выбор Главное меню в разделе Выбрать меню Установите макет на Горизонтальный и выровняйте его, как того требует дизайн заголовка. элемент “Dish” несет свою мегапанель с собой автоматически.
Шаг 6: Наведите курсор и проверьте результат
Опубликуйте заголовок и откройте свой сайт.Hover “Dishes” и полное меню ресторана опускается вниз над страницей: категории слева, блюда с ценами посередине, сегодняшний специальный и кнопка Забронировать стол справа.
Нажмите на каждую категорию, чтобы убедиться, что блюдо считается и ссылки ведут себя, затем проверьте панель на странице позади него. Темная панель над темным героем нуждается в границе или тени, чтобы ее края оставались видимыми.
Шаг 7: Держите это быстро
Изображения меню загружаются на каждую страницу вашего сайта, поэтому неосторожное мегаменю замедляет работу всего сайта ресторана Медленные сайты ресторанов теряют посетителей, которые сравнивают варианты на мобильных данных.
- Используйте одну фотографию на панели (представленное специальное предложение), а не в галерее.
- Сжимайте его и подавайте WebP; сортируйте его до места, которое он фактически занимает.
- Напишите настоящий альтернативный текст (“wood-fired margherita pizza”).Он помогает доступности и поиска изображений.
- Проверьте свой общий Скорость страницы Элементора после добавления меню, не раньше.
Шаг 8: Заставьте это работать на телефонах
Большая часть трафика ресторана мобильная, часто от людей, стоящих снаружи, решающих, заходить ли. Вот почему мы установили Мобильное меню к Контенту Строителя назад в Шаге 3. та же панель, которую вы разработали, обслуживает раскладку телефона вместо голого списка ссылок. широкая панель все равно должна красиво свернуть:
- Спрятать фотографию спецвыпуска на мобильном телефоне, держать кнопку Забронировать таблицу. отзывчивые органы управления видимостью Elementor обрабатывают это для каждого элемента.
- Поставьте ссылки категорий на первое место в порядке укладки; именно для этого пришли посетители телефона.
- Сохраняйте кнопку “Reserve a Table” доступной без длительной прокрутки.
- Тест на реальном телефоне. Предварительный просмотр редактора приближается к поведению прикосновений; он его не воспроизводит.
Если точка останова планшета по умолчанию неловко разрезает вашу панель, установите свою собственную с помощью бесплатной панели Пользовательское расширение точек останова.
Необязательно: показывать сезонные товары автоматически
Рестораны постоянно предлагают ограниченные по времени предложения: специальные обеды, праздничное меню, счастливый час. с бесплатным Расширение условий отображения вы можете установить диапазон дат или правило дня недели на элементе панели, чтобы ссылка на рождественское меню появлялась в декабре и удалялась в январе, при этом никто не редактировал сайт в полночь.
Часто задаваемые вопросы
Как мне создать мегаменю ресторана в Элементоре?
Включите бесплатное расширение Master Addons Mega Menu, создайте меню в разделе Внешний вид > Меню, включите меню "Включить мега", затем нажмите значок Master Mega на элементе "Блюда" и установите значение "Включено мегаменю" да. Нажмите "Редактировать контент мегаменю" и создайте панель в элементере: категории меню, блюда с ценами и диетическими тегами, специальный раздел и кнопку "Забронировать стол". Наконец, отобразите меню с помощью виджета "Меню навигации" в заголовке.
Нужен ли мне Elementor Pro для мегаменю ресторана?
Виджет мегаменю № Elementor - функция Pro, но бесплатное расширение Master Addons Mega Menu добавляет такую же возможность для освобождения Elementor, и вы проектируете раскрывающуюся панель в обычном редакторе Elementor.
Что должно быть включено в меню сайта ресторана?
Категории меню еды, такие как закуски, сеть, десерты и напитки; цены на блюда с диетическими тегами, как вегетарианский, веганский и пряный; часы работы и адрес; и четкое бронирование или онлайн-заказ. Оставьте свою историю, упоминания в прессе и социальные ленты для нижнего колонтитула.
Мегаменю замедлит работу сайта моего ресторана?
Он может, потому что изображения меню загружаются на каждую страницу. использовать одну сжатую фотографию WebP, размер которой соответствует ее отображаемому пространству, а не галерее, написать реальный альтернативный текст и повторно проверить скорость вашей страницы после добавления меню. Сделано осторожно, влияние незначительно.
Как заставить мегаменю ресторана работать на мобильном телефоне?
Установите опцию Мобильное меню в Контент строителя, чтобы телефоны получили вашу разработанную панель, спрятать фотографию блюда на мобильном телефоне, сохраняя при этом кнопку бронирования, сначала стекировать ссылки категории и сохранить кнопку "Забронировать таблицу" доступной без длительной прокрутки Всегда тестируйте на реальном телефоне, а не на предварительном просмотре редактора.
Могу ли я показывать сезонные пункты меню только в определенные даты?
Да. бесплатное расширение "Условия отображения" позволяет установить диапазон дат или правило дня недели для любого элемента внутри панели мегаменю, поэтому ссылка на праздничное меню появляется и исчезает по расписанию, и никто не редактирует сайт.
Является ли Max Mega Menu бесплатным и подходит ли оно для ресторана?
Меню Max Mega имеет бесплатную версию в репозитории WordPress плюс платное дополнение Pro. Это отдельный плагин меню, не созданный специально для Elementor, поэтому панели редактируются в собственном интерфейсе, а не в редакторе Elementor, который вы уже используете для страниц. Для создания ресторана, состоящего исключительно из Элементов, Master Addons Mega Menu хранит всю панель в одном редакторе.
Связанное чтение
