Kadence 教学:如何使用Kadence主题制作巨型下拉菜单

怎么样让你的WordPress网站提升互动性,同时呈现更多样化的内容,使用Kadence主题Mega Menu功能是一个不错的选择。今天,我们将教你如何通过Kadence主题实现一个巨型下拉菜单,为你的用户带来更好的导航体验。

20250318095136433-image
20250318152818224-image

1. 安装并启用所需插件

首先,我们需要安装Kadence主题的付费版

20250318095252198-image

并启用以下功能:

  • Ultimate Menu
  • Hooked Elements
20250318095322114-image

这两个功能会为你提供更强大的菜单自定义功能,使得Mega Menu的设置变得更加灵活。

2. 配置Mega Menu

进入WordPress后台的外观 > 菜单页面,选择你要设置为Mega Menu的菜单项。点击相关按钮后,进入菜单项的设置界面。在这里,你可以进行以下调整:

20250318095422947-image
  • 设置图标:为菜单项添加图标,并设置图标的展示位置,可以选择放在左侧或右侧。
20250318095447757-image
  • 调整图标颜色和尺寸:根据需要调整图标的颜色和尺寸,使其更符合你网站的设计风格。
20250318095611485-image
  • 设置Mega Menu宽度:选择全宽模式,让菜单从左到右展开,达到页面内容和菜单一致的视觉效果。
20250318095537963-image

3. 设置Mega Menu列数和背景色

对于Mega Menu,我选择了一列布局,但实际上是通过放置六个内容项来实现的。你可以根据需求调整列数。

20250318095803716-image

背景色可以设置为全局背景色,以确保与网站的整体设计一致。

20250318095853327-image

为了去除多余的空白,你还可以将内间距设置为零。

20250318095939262-image

完成上述设置后,记得保存更改。

4. 使用简码创建菜单内容

接下来,我们需要在Kadence的元素部分创建具体的菜单内容。进入外观 > Kadence > 元素页面,你会看到我已经创建了两个元素。点击其中一个,查看如何添加六个产品分类。

20250318100051685-image

由于Kadence主题并没有提供可视化的产品分类元素块,我们可以利用WooCommerce的简码功能来实现。

20250318100238197-image

简码中的数字表示产品分类的ID,你可以通过以下步骤获取:

  • 进入后台的产品 > 分类页面,点击编辑你需要的分类。
20250318100449780-image
  • 查看浏览器地址栏中的URL,其中的数字就是该产品分类的ID。
20250318100423326-image

获取到ID后,将其填入简码中,格式如下:


ID替换为实际的分类ID。

5. 添加简码并调整菜单项

在元素页面,点击“添加”按钮

20250318100633192-image

选择默认设置并输入一个标题,确保该元素可以在整个网站上显示,并设置为所有用户可见。

20250318100802263-image

添加内容时,点击加号,选择六列布局格式,然后粘贴之前获得的简码。

20250318100901575-image

根据需要调整简码中的ID值。如果有多个简码要添加,可以使用快捷键来加速操作。

若需要调整菜单项的顺序,可以解锁栏目的顺序,点击解锁按钮后,你可以自由地拖动栏目以调整它们的顺序。

20250318101035450-image

完成后,保存并发布元素。

6. 添加子菜单项

返回后台的外观 > 菜单页面,为Mega Menu添加一个子项。你可以随意命名这个子项,因为它只是用来承载巨型菜单的内容,不会在网页上显示。

20250318101210670-image

将它作为第一个菜单的子项。

保存后刷新页面,你就可以看到新的菜单项已经出现。点击展开菜单,新的内容项将会显示六个内容。确保菜单项的宽度和结构继承了主题的最大宽度。

7. 检查效果并调整布局

刷新前端页面,查看菜单效果。你可能需要对菜单进行最后的微调,确保它正常显示,并符合你的设计要求。

总结

通过以上步骤,你可以轻松地在Kadence主题中创建一个巨型下拉菜单。使用Mega Menu功能,你可以为用户提供一个更加清晰、动态的菜单,让他们能够快速找到所需内容。

如果你成功地设置了Mega Menu,欢迎在评论区分享你的经验!


了解 宝藏号 的更多信息

订阅后即可通过电子邮件收到最新文章。

© 版权声明

相关文章

暂无评论

none
暂无评论...

了解 宝藏号 的更多信息

立即订阅以继续阅读并访问完整档案。

继续阅读