本文介绍最新基于原生Elementor Mega Menu实现方法,Elementor最新版本3.12.0实现了原生的Mega Menu功能。该功能需要安装激活Elementor Pro。
本站提供Elementor Pro官方授权,49元/年每站点,有需要可以联系获取。
推荐阅读Elementor教程(一套适合新手的完整Elementor外贸建站教程)
第一步 升级Elementor到最新版本
首先需要将你的Elementor 和Elementor Pro都升级到最新的3.12.0版本。
升级之后你还可以看到Elementor整个编辑界面都发生变化,颜色变成了黑色,而不是之前的红色了。
第二步 启用对应的功能
进入Elementor 设置的Features中将Flexbox Container、Nested Elements、Menu这三个功能设置为【Active】
设置完成之后点击页面最下方的【Save Changes】保存设置。
第三步 在Header模版中添加Elementor Mega Menu
1)添加Menu元素到页面中
2)开启菜单元素单个项目中的Dropdown Content
3)开启之后点击开启Dropdown Content对应的菜单项目,会自动弹出一个可以编辑的区域(红色框内的区域)
4)在这个可编辑区域中添加任何你想要展示的内容
5)给菜单项目添加链接
6)通过Content Width来控制Mega Menu内容的宽度
7)设置Mega Menu的打开方式,Hover代表鼠标移动到菜单就打开对应的Mega Menu
8)通过Style中的Distance Form Content可以设置Mega Menu和菜单的距离
9)通过Style下面的Content设置Mega Menu的风格布局
10)设置完成之后更新模版,并刷新页面查看效果。
总结
Elementor原生提供的Mega Menu在操作层面上是我用过的最简单的,这得益于Nested Elements(嵌套元素的功能),在制作Mega Menu内容的过程中不需要跳转到别的地方,也不需要制作模版,完全的可视化编辑。
但是,以上的功能还是Elementor的实验功能,在使用前需要注意一些兼容性问题,如果你想尝试原生Elementor Mega Menu功能,请先做好网站备份。