如何在 Elementor 中构建餐厅大型菜单(免费分步指南)

餐馆巨型菜单是一个宽大的下拉面板,将您的整个食物菜单、饮食信息、开放时间和预订按钮放在一个地方,而不是将它们埋在几次点击之后。食客到达时希望看到食物、价格、时间和预订方式。通常是在电话中。通常是在您和其他地方之间做出决定时。

本指南构建了一个带有免费元素器和免费元素器的指南 主插件巨型菜单。不需要Elementor Pro, 这里是完成的结果, 悬停“菜肴”打开餐厅菜单全套, 包含类别, 价格, 饮食标签, 今晚的特色, 以及一个保留一个桌子按钮:

如果您喜欢餐厅巨型菜单风格,那么您可以下载它并将其导入到 master addons 小部件构建器中。然后您可以根据您的需求轻松自定义文本颜色、图像、网址等,并将其用于餐厅网站的巨型菜单中。

下载餐厅巨型菜单

餐厅巨型菜单应该包含什么

Building anything之前,决定什么在面板中赢得一席之地,我们在本指南中构建的布局有四个区域,它们几乎覆盖了每个餐厅:

遗漏什么:您的完整 关于故事、新闻提及和社交动态。那些属于 的页脚。导航面板是为了让人们到某个地方,而不是为了讲述整个故事。

您需要 Elementor Pro 来完成此操作吗?

No。Elementor自己的巨型菜单小部件位于Elementor Pro内部,但下面的免费路线无需订阅即可构建相同的面板。

1年更新几次菜单的单地点餐厅,免费扩展就足够了,一个更大的多地点小组兼顾几位编辑可能仍然可以从Pro更广泛的工具集中获得价值,但这是关于整个站点的决定,而不是关于特大菜单的元素 在此记录其 Pro mega 菜单工作流程 如果你想直接比较的话。

你需要什么

• Elementor(免费版可以)
• Elementor 的主插件、已安装且处于活动状态
• 已经为您的菜单部分创建的页面(它们现在可以成为占位符)

第 1 步:启用巨型菜单扩展

Master Addons 将每个小部件和扩展保存在一个切换后面,因此未使用的小部件和扩展永远不会加载。转到 主插件 → 设置,打开 扩展 tab,然后找到 巨型菜单 display 群组中。打开其切换并单击 保存更改。如果没有看到切换,你可能是在旧插件版本上,所以先更新。

第 2 步:构建 WordPress 菜单并打开 Mega 菜单

去 外观→菜单 并在触摸任何设计之前构建骨架。在此构建中,菜单称为主菜单,包含五个项目: 主页、菜肴、关于我们、博客、帐户。“碟”是获得巨型面板的物品。

Get结构先对,mega面板附在菜单项上,所以事后重新排列就意味着重新做设计工作。

扩展处于活动状态,a 主插件巨型菜单 menus 屏幕左栏中出现框。切换其 启用巨型菜单 打开。当你做的那一刻,一片紫色 巨型大师 badge 出现在每个菜单项旁边,那个徽章是每个项目的巨型菜单选项所在的地方。

第 3 步:打开菜肴项目的大菜单

单击 巨型大师 “碟”项目上的徽章。弹出设置打开,有四个选项卡:内容、设置、图标和徽章。

1. 上 内容 选项卡,翻转 启用 Megamenu 切换到"是"。编辑 Megamenu 内容按钮亮起。
2. 上 设置 tab,设置面板大小和行为我们用过 自定义宽度 1000px, 足够宽, 一个碟格加上一个特色卡如果您的设计需要整个屏幕, 全宽也在那里。
3. 套 移动菜单 到构建器内容, 触发效应 到悬停,并且 过渡 到淡化。图标和徽章选项卡是可选的额外内容(例如季节性菜单上的“新”徽章)。
4. 单击 保存.

您从"设置"选项卡配置巨型菜单宽度:全宽、默认或自定义宽度(如我们的 1000px)。同一选项卡包含移动菜单源、触发效果(悬停或单击)、过渡动画以及菜单标签和描述的切换:

第 4 步:在 Elementor 中设计面板

回到"内容"选项卡,单击 编辑 Megamenu 内容。面板在普通的 Elementor 编辑器中打开, 因此您像其他任何页面一样进行设计。从上表构建四个区域:

• 标题条: 餐厅名称加上一张简短的厨房纸条(“厨房营业至晚上 11:00 · 木烤箱每天以 4”点燃)。纸条悄悄回答了“他们是否打开?”的问题,没有人打猎几个小时。
• 类别侧边栏: 起始菜、意大利面和烩饭、燃木披萨、主菜和烧烤、甜点、葡萄酒和饮料,每种都有一道菜。
• 菜网: name、单行描述、价格,以及诸如素食、辛辣或厨师精选等标签,标签处理饮食过滤,没有单独的列。
• 特色卡片和动作页脚: 今晚特价,附照片和价格,a 预订表格按钮、开放时间和地址,以及一个“下载完整菜单(PDF)”链接,如果您更愿意显示结构化的开放时间, 营业时间小部件 将它们保持在一个位置可编辑。

Elementor面板左侧每个菜名、价格、标签都保持可编辑状态,稍后更新菜单是内容编辑,不是设计工作,完成后发布模板,关闭编辑器。

第 5 步:将菜单放入标题中

Mega菜单需要一个头部来居住,如果你的主题头部已经显示主菜单,你可以跳过这一步,但是用Master Addons构建头部将所有内容都保存在一个编辑器中 主题生成器是免费的的《元素师》pro不同。

1. 去 主插件 → 主题生成器 然后单击 添加新模板.
2. 将模板类型设置为 标头,开关 激活 打开,并在条件下选择 包括 → 整个网站.
3. 单击 使用元素器编辑.

在标头模板内部,拖入 导航菜单 小部件和选择 主菜单 在选择菜单下。将布局设置为水平,并在您的标头设计要求的任何情况下对齐。“dishes”项目会自动随身携带其巨型面板。

6步:悬停并检查结果

Publish header并打开您的网站。将“碟式”和完整的餐厅菜单在页面上下降:左侧的类别,中间有价格的菜肴,今晚的特色菜和右侧的预留一个桌子按钮。

单击每个类别以确保菜肴计数和链接的行为,然后根据其后面的页面检查面板。黑暗英雄上方的黑暗面板需要边框或阴影,以便其边缘保持可见。

7步:保持快

Menu images 加载到您网站的每个页面,因此粗心的巨型菜单会减慢整个餐厅网站的速度,慢餐厅网站会失去正在比较移动数据选项的食客。

• 面板中使用一张照片(特色特别照片),而不是画廊。
• 压缩它并为 WebP 服务;将其大小调整到实际占用的空间。
• 写真正的替代文本(“燃木玛格丽塔披萨”)。它有助于辅助功能和图像搜索。
• 检查你的整体情况 元素器页速度 添加菜单后,而不是之前。

第 8 步:让它适用于手机

大多数餐厅交通都是移动的,经常来自站在外面决定是否进来的人。这就是我们设定的原因 移动菜单 to Builder 内容 回到步骤 3。你设计的同一块面板服务于电话布局, 而不是一个裸露的链接列表。一个宽的面板仍然要优雅地崩溃:

• 将特价商品的照片隐藏在手机上,保留"保留表格"按钮。 Elementor 的响应式可见性控件可处理每个元素的此内容。
• 将类别链接放在堆叠顺序的第一位;这就是电话访客的目的。
• 保持 “保留 Table” 按钮可伸缩,无需长时间滚动。
• 在真实手机上进行测试。编辑器预览近似触摸行为;它不会重现它。

如果默认平板电脑断点错误地切割您的面板,请免费设置您自己的面板 自定义断点扩展.

可选:自动显示季节性项目

餐厅定期提供:午餐特价、节日菜单、欢乐时光。与免费 显示条件扩展 您可以在面板元素上设置日期范围或周中规则,因此圣诞菜单链接在 12 月出现,并在 1 月删除,午夜没有人编辑该网站。

常见问题

相关阅读

• 免费元素主题构建器
• 如何免费在 Elementor 中添加弹出窗口
• 营业时间小部件