2024 WordPress Mega 菜单插件推荐和使用教程

WordPress ElementsKit Mega菜单

菜单插件简介

WordPress Mega 菜单插件是 WordPress 建站常用的菜单扩展功能插件。不仅可以提升用户体验帮助他们尽快找到合适的产或内容文章。通过合理的设置能够增加用户内容的点击率。你不仅可以用文字链接来配置展示多层级的导航内容,还能够自定义图片。让我们来看下 WordPress Mega 菜单插件具体的使用方法吧。

什么是 Mega 菜单

WordPress Mega 菜单插件

你还不太清楚什么是 Mega 菜单 ?如图所示,访问网站是鼠标移动到导航栏上出现的下拉效果。 可以是文字的排版格式或是图文混排,完全看你自己的喜好和网站的内容来自定义。

如何实现 Mega 菜单功能

WordPress 有许多插件支持 Mega 菜单的功能,实现的方式都差不多,你需要考虑的是哪种风格适合你。下面让我们看下有哪些插件吧。

WordPress Mega 菜单插件有哪些

本站使用的是 ElementsKit,免费版提供了 11 种风格。我觉得够用了, 如果你想看下其他的风格也是可以的。

是一个全面的 WordPress 插件,除了提供丰富的页面构建器功能外,它还内置了一个强大的Mega Menu 模块。该插件允许用户通过拖放界面创建自定义的 Mega Menu,支持多列布局、图标、图像以及动态内容展示。它与 Elementor 页面构建器无缝集成,提供了丰富的样式选项和高级设置,以便用户可以创建出符合品牌风格和设计需求的导航菜单。

WP Mega Menu 插件允许用户创建复杂的菜单结构,通过拖放界面轻松管理。它支持自定义列数、图标、图像和背景颜色,使得菜单可以根据网站设计进行高度定制。用户可以还设定菜单的动画效果,增强视觉吸引力。

Max Mega Menu 插件提供了一个易于使用的界面来创建响应式大菜单。它可以将现有的菜单转变为 Mega Menu,并支持对每个菜单项的高级设置,包括图标、标签和自定义布局选项。插件还提供了丰富的样式选项和内置的主题模板。

UberMenu 是一个功能强大的 Mega Menu 插件,提供多种布局和样式选项。它支持拖放功能,允许用户轻松添加和组织菜单项。UberMenu 特别适合需要高度定制化和复杂布局的网站,支持丰富的内容展示,如图片、表单和小部件。

QuadMenu Menu 插件

内置多种预设风格,用户可以通过简易的界面进行菜单设计。支持嵌套菜单、社交媒体图标、登录按钮等多种功能。提供可视化的拖放菜单生成器,容易上手。与主流的WordPress主题兼容,支持响应式设计。

为什么推荐 ElementsKit

ElementsKit 与 Elementor 页面构建器无缝集成,利用 Elementor 的拖放功能来创建和定制 Mega Menu。这使得设计复杂的菜单变得直观和简单,即使是没有编码经验的用户也能轻松上手。 另外主要的原因,就是免费的已经满足我的要求。 如果你做的是电商或者独立站的话,可以多参考其他几个插件。

ElementsKit 的设置教程

ElementsKit 的设置需要多动手,下面跟着图文一起操作实践。

安装ElementsKit Mega Menu插件

安装 elementskit 插件

初始化设置 ElementsKit

初始化设置 ElementsKit​
初始化设置 ElementsKit​

点击右下角的 “Next” 进入下一步,直到最后出现 “save changes”。

开启 ElementsKit 插件的功能

开启 ElementsKit 插件的功能

创建主菜单及导航内容

创建主菜单及导航内容

先创建菜单的目的是保证后面流程顺畅,对与初学者来说更友好一些。

创建 ElementsKit 代替原来的导航

创建 ElementsKit 代替原来的导航

添加并编辑 Menu 信息

添加并编辑 Menu 信息​

为了保证流程顺畅,首次使用的ElementsKit Mega Menu先不要保存,直接Edit。

创建 ElementsKit 的 Menu 组件

创建 ElementsKit 的 Menu 组件​

绑定已有的菜单

绑定已有的菜单​

之前让你先创建菜单的目的,就是在 “Select Menu” 时可以直接选择,而不用退出当前页面去创建。编辑之后记得点做下角更新。

编辑菜单使用 Mega Menu

编辑菜单使用 Mega Menu​

将鼠标移动到“测试megamenu”,在测试内容上加上特定的样式。

开启并设置 Mega Menu 功能

开启并设置 Mega Menu 功能​

选择 ElementsKit 提供的模版库

选择 ElementsKit 提供的模版库​
选择 ElementsKit 提供的模版库​
选择 ElementsKit 提供的模版库​

按照你的需求选择你想要的风格。

ElementsKit Mega Menu 编辑并保存

ElementsKit Mega Menu 编辑并保存​

刷新查看效果

刷新查看效果​

总结

ElementsKit Mega Menu 基于Elementor,需要风格样式可以根据自己需要可以自定义,如果要求不高就套用模版省力。如果你很熟练Elementor Mega Menu,自己去定制化也是可以的。根据客户提供参考案例,自定义的Mega Menu案例。

Mega 自定义的案例

如有技术相关问题可以随时联系我们。 想要了解更多的 《WordPress 插件专栏》点击查看。

转载:感谢您对本站的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处 “来源wordpress建站 - 漾动网络”

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

wordpress建站广告宣传图

Get Your Free Demo Free Demo

Sign Up to Sitech