其他教程

其他教程

Products

当前位置:首页 > 其他教程 >

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

GG网络技术分享 2025-03-18 16:14 0


大家好,这里是关于[使用Elementor创建wordpress所有文章页面],[wordpress如何制作超级菜单(mega menu)]问题的解答,希望对您有所帮助。如果你还想了解更多这方面的信息,请关注本站其他相关内容,共同学习吧!

使用Elementor创建wordpress所有文章页面

教程大全Elementor,wordpress,所有文章

教程总目录:菜鸟建站进阶篇–使用Elementor设计wordpress网站页面

所有文章页面我们需要单独创建一个页面,跟分类目录等页面稍微有一点差别。

差别在于,分类目录页面是在Elementor模板里的,所有文章页面是在wordpress后台创建的一个页面,然后使用Elementor来改变他的页面排版。

1.创建一个页面

我们在wordpress后台创建一个页面,名字就叫所有文章、所有资源等类似标题。

固定链接可以修改下。

下面是更改他的排版了

2.使用Elementor编辑排版

点击那个“使用Elementor编辑”即可

这里就根据本站的所有文章页面来更改了。大家也可以按照自己喜好进行调整。

选择单栏结构

将posts小工具拖入栏目

更改posts基础设置

皮肤:经典
列:4列
每页帖子:16
元数据:空(将默认的删掉)
新窗口打开:yes

分页:数字(上一个下一个)
缩短:是
以前的标签:空(默认的删掉)
下一个标签:空(默认的删掉)

因为演示站好些文章没有特色图片,所以看着丑了点。

3.直接发布更新即可

因为这就是个单独的页面,所以不存在什么显示条件设置。

直接发布更新即可

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

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

什么是超级菜单(mega menu)

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

最受欢迎且免费的制作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按钮,点击该按钮

  1. 点击mega menu按钮后,将显示下图的弹出框,请将megamenu enabled开启
  2. 然后点击edit megamenu content,系统会弹出elementor编辑器,请在编辑器中制作megamenu的内容,就像用elementor制作页面的方法一样

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

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

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

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

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

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

标签:

提交需求或反馈

Demand feedback