Max Mega Menu插件教程WordPress添加超级菜单
菜单可帮助访问者在 WordPress 中导航您的网站,但您知道存在大型菜单吗?大型菜单是一个大型的多列下拉菜单,您可以在其中放置图像和视频等媒体。WordPress大型菜单可让您在多列或多行中显示菜单内容,从而轻松组织大量信息。因此,用户可以访问网站的不同部分,而无需浏览多个页面。
在设计网站时,WordPress 大型菜单对于无缝导航至关重要。对于提供多种产品类别的电子商务网站来说尤其如此。
它们是大型网站的一个很好的补充,这些网站有大量内容供访问者探索。特别是,如果您有很多类别和子类别,那么大型菜单是理想的菜单选项。今天,我们晓得博客将介绍如何使用Max Mega Menu插件在WordPress中添加大型菜单。
推荐:Slim SEO插件使用教程优化WordPress网站SEO
什么是WordPress Mega Menu超级菜单?
WordPress Mega Menu大型菜单允许网站所有者添加多个栏、富媒体内容和自定义样式。与传统菜单相比,大型菜单使复杂网站的导航变得更加容易。访问者可以快速有效地找到他们需要的信息。
WordPress 大型菜单通常由几个级别组成:
- 顶级菜单。这是访问者登陆网站后看到的主菜单。顶级菜单通常包含网站的主要类别或部分,例如产品页面。
- 二级菜单。当用户将鼠标悬停或单击顶级菜单项时,它将可见。例如,时尚品牌通常将服装列为产品部分的二级商品之一。
- 三级菜单。当访问者与二级菜单交互时,这些子菜单就会出现。例如, Clothing 的第三级项目 可以是Shirts、Sweaters和Jackets。
虽然可以创建更多子菜单级别,但请坚持使用三个子菜单级别以避免过多的访问者。大型菜单非常适合内容丰富的网站。但它们对于创意开发人员来说也非常有用。它们是一个更大的画布,开发人员可以在上面创建与网站相匹配的出色设计。
例如,查看 Etsy、WPengine、Gitee网站。他们有非常漂亮的大型菜单,其中加载了图像,使访问者可以更轻松地找到他们想要的东西。
当然,您不必每次都添加这样的图像。相反,您可以设计大型菜单中的背景来满足您的需求。这可以像颜色更改一样简单,也可以创建实际图像作为背景显示。无论哪种情况,大型菜单都会带来很多定制功能。与传统菜单相比,在 WordPress 中使用Mega Menu大型菜单可为您的网站带来以下好处:
- 更好的组织。如果您的 WordPress 网站有大量内容或产品类别,大型菜单可以帮助您整齐地组织并向用户展示它们。
- 增强视觉吸引力。大型菜单可以定制以匹配您网站的品牌,确保设计具有凝聚力和视觉吸引力。
- 提高用户参与度。当用户可以轻松找到所需内容时,他们更有可能探索您的 WordPress 网站。大型菜单简化了导航,鼓励用户停留更长时间并与您的内容进行交互。
- 高效的空间利用。使用大型菜单来展示各种选项,而不会使网站的布局变得混乱。
- 竞争优势。提供大型菜单可以使您的网站从竞争对手中脱颖而出,表明您致力于提供卓越的用户体验。
推荐:WordPress网站推送通知插件OneSignal插件教程
如何在WordPress中创建超级菜单
在 WordPress 中创建大型菜单的最简单方法是使用插件。如果您拥有一定程度的技术知识,还可以使用自定义CSS代码手动添加大型菜单。
注意:本文操作使用的是Max Mega Menu Pro版本。
安装Max Mega Menu菜单
Max Mega Menu插件非常受欢迎,活跃安装量超过 300,000 次。该插件会自动将所有现有菜单转换为大型菜单。这包括您可以在小部件区域中添加的菜单。它还提供了您可以更改的设置,以使它们按照您想要的方式运行。
单击插件并选择左侧管理面板上的添加新选项。在可用搜索框中搜索“ Max Mega Menu ”。这将拉出您可能会觉得有用的其他插件。向下滚动,直到找到 Max Mega Menu 插件,然后单击“立即安装”按钮并激活该插件以供使用。
推荐:WordPress网站推送通知插件OneSignal插件教程
Max Mega Menu功能设置介绍
激活Max Mega Menu插件后,即可在左侧导航栏看到Mega Menu,点击后可看到Max Mega Menu菜单位置、Max Mega Menu菜单主题、Max Mega Menu常规设置、Max Mega Menu工具、Max Mega Menu Pro License许可证,接下来为你详细介绍如何使用Mega Menu超级菜单。
Max Mega Menu菜单位置
这是主题支持的菜单位置的概述。使用这些选项来启用Max Mega Menu和定义每个菜单位置的行为(包括主菜单、次要菜单、手机端、页脚菜单、Third、Fourth、Mobile Secondary、Logged Out Account、Logged In Account菜单等等)。
注意:可在外观->菜单->管理位置设置
具体到每个菜单的菜单位置,可看到不仅能选择触发子菜单的条件,选择子菜单动画类型效果、移动端菜单选择样式,还可以设置子菜单的粘性效果等等。
创建后,勾选常规设置下的启用框。在“事件”旁边,从三个主要选项中进行选择以触发菜单:
- 悬停意图。用户需要将鼠标悬停在顶级菜单上几秒钟,然后才会出现二级菜单。此延迟旨在防止意外点击。
- 悬停。当用户将鼠标指针悬停在父菜单上时,子菜单将立即打开。由于没有延迟,这种方法最适合提供流畅的导航系统。
- 点击。它要求访问者单击或点击大型菜单才能打开其第二级项目。此选项非常适合触摸屏设备和精确鼠标悬停可能具有挑战性的情况。
如果选择“单击”,请转到“高级”选项卡→ “单击事件行为”。然后,选择以下选项之一来确定当用户单击大型菜单时会发生什么:
- 第一次单击将打开子菜单,第二次单击将关闭子菜单。
- 第一次点击将打开二级菜单,下次点击将跟随页面链接。
- 第一次点击会直接打开页面链接。
Max Mega Menu菜单主题
可设置Mega Menu菜单中的箭头样式,行高,阴影,菜单高度、菜单背景,菜单内边距,字体样式等等。
向下滚动时,还有一个专门的部分用于自定义顶级菜单项:
- 菜单项对齐。将所有菜单项放置在网站的左侧、中间或右上角。
- 项目字体。自定义菜单排版以匹配您的网站设计,包括字体系列、大小、粗细、颜色和视觉样式选项。
- 项目背景。更改每个菜单项的背景颜色。如果您已经设置了菜单背景,请将其保留为透明。
- 项目间距。调整每个项目周围的边距和填充,以微调您的大型菜单布局。
- 项目边框。定义边框的颜色、菜单宽度和半径以创建不同的视觉效果。
- 突出显示当前项目。启用后,当用户将鼠标悬停在当前菜单项上时,当前菜单项将突出显示,使导航更加直观。
推荐:如何使用Local by Flywheel设置WordPress本地开发环境
Max Mega Menu常规设置
在左侧管理面板上,单击“超级菜单”并选择“常规设置”选项。可设置CSS输出、排队图标样式、自定义字体指定主题编辑器的字体下拉列表中可用的自定义字体(每行一个)。
Max Mega Menu工具
Max Mega Menu Pro License许可证
推荐:Contact Form 7插件教程WordPress设置Contact Form表单插件
创建超级菜单
当然,如果您还没有菜单,则您网站上的任何内容都不会改变。在这种情况下,是时候创建您自己的超级菜单了。
单击外观并选择菜单选项。
创建一个新的菜单项并将其添加到您的菜单中。将鼠标悬停在新添加的菜单项上,然后单击“超级菜单”。在菜单结构下,将子类别拖放到各自的主类别中。您可以通过将其拖动到二级菜单的右侧来创建三级菜单,依此类推。
将出现一个弹出窗口,其中包含您可以设置的选项。您可以在三种大型菜单布局之间进行选择,包括弹出菜单、网格布局或标准布局。这完全取决于您,但我建议您尝试所有三种方法,看看哪一种最适合您的需求。
这些设置允许您自定义显示的文本及其显示的平台(桌面或移动设备)。图标设置允许您向菜单添加图标。您可以使用专业版添加自定义图标。只需记住保存您所做的任何更改,您的超级菜单就可以使用了。
推荐:WordPress轻量级迁移插件Better Search Replace迁移插件
Max Mega Menu是一个完整的菜单管理插件,支持多个菜单位置。这种灵活性使您可以为站点的不同部分自定义大型菜单设置。Max Mega Menu 提供拖放界面,可以轻松添加新内容。除了文本链接之外,您还可以添加 WooCommerce 产品、图像和搜索过滤器。
大型菜单网格布局可让您在多列和行中创建菜单。同时,您只能在使用标准布局时更改列数。通过单击选择要添加到面板的小部件,添加丰富的内容,使您的菜单更具视觉吸引力。然后,从下拉列表中选择一个小部件,包括搜索栏、图片库、日历、音频内容、视频和产品过滤器。
如果您的网站有一个包含许多链接的复杂菜单,请为每个项目分配一个图标以提升用户体验。只需导航到左侧边栏上的图标,然后从各个平台选择图标即可。
关闭超级菜单弹出窗口并对每个顶级页面重复该过程。配置所有设置后,单击“保存菜单”以在您的站点上启用大型菜单。
推荐:[最新版]WordPress表单生成器Piotnet Forms Pro
总结
以上是晓得博客为你介绍的Max Mega Menu插件教程WordPress添加超级菜单的全部内容,在启动 WordPress 网站之前,确保直观的导航非常重要。对于具有多个页面的电子商务商店和网站,使用大型菜单是理想的解决方案。与标准 WordPress 菜单不同,大型菜单使您能够以简单但视觉上吸引人的方式组织复杂的信息。
如果您是喜欢更大灵活性的高级用户,可以使用 CSS 代码根据需要自定义大型菜单。我们希望这个 WordPress 大型菜单教程能够提供必要的指导,帮助您提供更好的用户体验。
推荐:[最新版]Hero Menu免费下载响应式WordPress Mega Menu超级菜单插件
常见问题
我的WordPress 网站需要大型菜单吗?
大型菜单非常适合结构复杂或信息量大的网站。如果您的网站有多个类别、子类别或广泛的导航需求,创建大型菜单可以帮助访问者快速找到所需内容。
WordPress 超级菜单会影响网站性能吗?
优化良好的大型菜单对 WordPress 网站性能的影响应该最小。使用有效的编码实践并确保大型菜单中的图像和其他媒体元素得到适当的压缩和优化。这将有助于保持快速的加载时间和积极的用户体验。
我可以制作适合移动设备的 WordPress 超级菜单吗?
是的,有很多响应式大型菜单插件可以在不同的屏幕尺寸上正常工作。选择一个明确提到移动响应能力的插件,并在各种设备上彻底测试大型菜单以确保其正常工作。
Claude、Netflix、Midjourney、ChatGPT Plus、PS、Disney、Youtube、Office 365、多邻国Plus账号购买,ChatGPT API购买,优惠码XDBK,用户购买的时候输入优惠码可以打95折