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 超级菜单吗?
推荐:[最新版]WP Mega Menu Pro插件免费下载WordPress超级菜单插件
推荐:WP Speed of Light插件使用教程WordPress速度优化插件
Claude、Netflix、Midjourney、ChatGPT Plus、PS、Disney、Youtube、Office 365、多邻国Plus账号购买,ChatGPT API购买,优惠码XDBK,用户购买的时候输入优惠码可以打95折