专注于WordPress、Elementor、外贸建站教程与服务
大家好呀~本站正在筹备公益的B2B外贸建站实操直播,感兴趣的同学可以戳右上角微信加我报名(注明来意),直播时间视报名情况待定~

如何制作wordpress超级菜单(mega menu)

更新日期:2020-09-20

本文将介绍什么是超级菜单、制作超级菜单的热门免费插件、制作超级菜单的步骤教程。

什么是超级菜单(mega menu)

什么是超级菜单呢?相比普通菜单而言,超级菜单的展示形式更加丰富,比如菜单里带有图片、视频、多列子菜单等等,譬如下图就是一个超级菜单,实现它需要借助插件。如果你还不会创建菜单,请先查看如何在WordPress中制作导航菜单(7个功能点)

mega-menu

最受欢迎且免费的制作mega menu的插件

最受欢迎且免费的mega menu插件是Max Mega Menu,但它不适用于使用Elementor pro制作的header的菜单。

如果使用Elementor pro制作header,那么需要用的另一个插件Elements kit Elementor addons,它是Elementor的扩展组件,免费版就能提供mega menu功能。接下来我们用这个插件来讲解mega menu的制作

如何制作超级菜单(mega menu)

安装并启用Elements kit Elementor addons插件,若不会安装插件,请查看这篇安装插件教程

进入菜单页面,如下图所示,

  1. 选中Enable this menu for Megamenu content,
  2. 在需要设计mega menu的菜单上悬停,将浮现mega menu按钮,点击该按钮
mega-menu-tutorial
  1. 点击mega menu按钮后,将显示下图的弹出框,请将megamenu enabled开启
  2. 然后点击edit megamenu content,系统会弹出elementor编辑器,请在编辑器中制作megamenu的内容,就像用elementor制作页面的方法一样
mega-menu-tutorial-2

如下图所示,我随意制作了一个mega menu实例,记得点击update保存,然后点击左上角的x关闭界面回到菜单页面。

mega-menu-tutorial-3

最后依次点击弹出层上的save按钮,点击保存菜单。

mega-menu-tutorial-4

接下来请将elementor的header模板中的导航元素换成Elements kit Elementor addons提供的导航元素,即下图中带有ekit标记的nav menu元素,否则megamenu也不能生效。

mega-menu-tutorial-5

最后访问网站看一下效果,如下图所示,将鼠标放到products上,下方即刻浮现刚才制作的mega menu。

mega-menu-tutorial-6

需要注意的是,megamenu不适合手机端,而Elements kit Elementor addons插件必须付费升级到PRO才能控制手机端不显示megamenu,这并不意味着我们要付费。

我们可以通过elementor编辑header,新增一个setion放移动端的菜单,按下图所示,用可见性开关控制菜单在不同设备上的可见性。譬如将有megamenu的菜单仅仅在桌面端可见;而没有megamenu的菜单仅仅在平板和手机端可见,完美省钱?。

mega-menu-tutorial-7

制作megamenu菜单的教程到此结束~ヾ(•ω•`)o

评价
0 / 5 0

Your page rank:

分享知识是一种美德,当我们每一个人都在不断的分享知识给这个社会的时候,我们这个社会将会变得越来越好,所以如果您喜欢这篇文章的内容,希望您可以把它分享到您的朋友圈当中,或者给到您指定的某一个人,您关心谁,就把知识分享给他,谢谢。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Copyright © LOYSEO.COM
Do NOT follow this link or you will be banned from the site!
微信扫一扫
扫码加我微信吧 ~

在朋友圈无分组分享本站首页,或点赞知乎专栏置顶文章,联系我可获得以下任一正版主题或插件~
插件:Elementor Pro、WP Rocket、Essential addons elementor、WPML...
主题:Astra、bridge、avada、manufacturer、Jnews...

外贸网站或同类博客交换友情链接也可以联系我哦~
loyseo weixin 0804