Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt

页面

教程分类

WordPress超级菜单插件JetMenu使用教程,3种Mega Menu展示形式

Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt
WordPress超级菜单插件JetMenu使用教程
WordPress超级菜单插件JetMenu使用教程,JetMenu是一个非常强大的超级菜单插件,可以生成水平、垂直、汉堡菜单,适用于不同场景和设备。还能再菜单上添加图标和文本,满足个性化设置。
文章目录

本篇文章共 2210 字,预计阅读时间 9 分钟

JetMenu使用教程

JetMenu是一个简单好用且强大的超级菜单(Mega Menu)插件,可以和ElementorGutenberg编辑器搭配使用,可以很轻松就实现美观、功能丰富并且完全响应式的超级菜单界面。

和Well之前写的使用Elementor自带的Mega Menu文章不同,JetMenu的超级菜单种类更丰富,适合在更多的设备端展示,以及更多的使用场景。

点击购买JetMenu插件

下图是JetMenu支持的超级菜单形式:

JetMenu支持的菜单形式

安装JetMenu插件

上传安装Wordpress插件

首先,在教程开始前,需要在WordPress后台 – 插件 – 安装新插件 中通过上传插件的方式安装JetMenu插件。

如果还没有JetMenu插件,请先购买

安装JetMenu后可以在Crocoblock – JetPlugins Settings – JetMenu中对该插件进行默认设置:

JetMenu插件设置界面

默认设置不是必须的,可以在使用该插件时对相应的组件进行设置即可。

创建JetMenu超级菜单

创建JetMenu超级菜单,WP后台 – 外观 – 菜单,可以在现有的菜单上进行操作,或者创建一个新的菜单。

创建菜单

将鼠标移动到对应菜单上时,会在该菜单右侧显示Settings图标,点击图标即可对改菜单进行Mega Menu设置:

开启超级菜单

Mega Content:

  • Use Mega Content:开启,启用改菜单的超级菜单。
  • Mega Content Type:选择Elementor。
  • 然后保存,其他的不用修改。

Item Icon:是给这个菜单添加一个图标,根据自己需求选择要不要添加。

Item Badge:是给改菜单添加一个文本或SVG标签,比如“Hot” “New”,根据需求决定是否设置。

这些设置都做好后回到Mega Content界面,可以点击“Edit Mega Content”,对超级菜单的内容进行编辑:

编辑超级菜单

因为Well选择了Elementor,所以会自动跳出Elementor编辑界面,在这个界面填充改菜单下超级菜单内容即可。

填充完超级菜单内容后点击右上角发布,然后关闭该Elementor编辑界面。

创建了超级菜单的菜单右侧会显示一个“Mega Activated”的标志:

创建菜单设置完成后的标志

使用JetMenu小部件

使用JetMenu超级菜单组件的时候,只需要打开对应页面的Elementor编辑界面,一般是网站的Header(页眉)模版页。

用JetMenu添加水平超级菜单

水平超级菜单就是水平排列的菜单布局,属于常规的PC端超级菜单。

在Elementor编辑界面左侧小部件里搜索menu:

在页眉中添加水平超级菜单 Mega Menu

然后找到Mega Menu并添加即可。

在页眉中添加水平超级菜单 Mega Menu 2

添加JetMenud的Mega Menu小部件后,在该小部件的Layout设置里选择之前创建了超级菜单的菜单“Jet Menu”。

这样就完成了PC端超级菜单的添加,鼠标移动到对应菜单就会显示其下的超级菜单内容。视频演示↓

注:如果要修改超级菜单的宽度,需要在Layout设置里修改Mega Container Width Type为“Selector”,然后在Custom selector填写CSS选择器。

假设ID为“aaa”容器,它宽度是1200px,那么你在JetMenu超级菜单小组件的Custom selector设置里填写#aaa,那超级菜单的宽度就会变成和“aaa”容器一样的宽度 – 1200px;

也可以给一个全宽度的容器(比如Header容器)添加一个CSS ID(在容器的 高级设置 – CSS ID 里添加),然后在Custom selector里填写该ID,该超级菜单的宽度就会变成全宽度。

最后在该菜单的高级设置里,选择在移动端隐藏:
设置超级菜单在移动端隐藏

用JetMenu添加汉堡超级菜单

汉堡超级菜单就是折叠隐藏起来的菜单,点击菜单按钮后显示,是适合移动端的超级菜单。

在Elementor编辑界面左侧小部件里搜索menu:

添加JetMenu的汉堡菜单到移动端

找到Hamburger Menu小部件并添加到指定位置。

选择Hamburger Menu小部件的Menu为之前添加的“Jet Menu”菜单:

设置JetMenu的汉堡菜单

高级设置里隐藏该小部件在桌面端展示:

设置JetMenu的汉堡菜单在桌面端隐藏

JetMenu汉堡菜单效果展示:

用JetMenu添加垂直超级菜单

同样是在小部件里搜索Menu

添加JetMenu的垂直菜单

找到Vertical Mega Menu小部件并添加。

设置Select Menu为“Jet Menu”:

设置JetMenu的垂直菜单

鼠标移动到“All Product”,就会显示对应的超级菜单内容:

JetMenu的垂直菜单效果展示

调整垂直超级菜单内容的宽度:

JetMenu的垂直菜单中超级菜单区域宽度设置

在垂直菜单小部件里找到“Mega Menu”,Mega Menu Width的数值即可调整垂直超级菜单内容的宽度。

以上就是JetMenu使用教程的全部内容。

Well还推荐你看Ajax实时搜索插件JetSearch教程

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
Well企业微信
专业网站搭建,扫码直接咨询
外贸服务器推荐(Well在用的服务器)
vultr-logo
一线品牌VPS服务器,稳定、不贵、性能强
Clouvider-logo
二线品牌VPS服务器,稳定、便宜、性能强
文章标签
文章推荐
文章目录

建站遇到问题?

联系我们获得:免费技术咨询 / 付费技术支持
联系我们获得免费技术咨询 、 付费技术支持
相关文章
没有账号? 忘记密码?