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

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

图片[1]-如何使用Kadence主题创建巨型下拉菜单:详细教程
图片[2]-如何使用Kadence主题创建巨型下拉菜单:详细教程

1. 安装并启用所需插件

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

图片[3]-如何使用Kadence主题创建巨型下拉菜单:详细教程

并启用以下功能:

  • Ultimate Menu
  • Hooked Elements
图片[4]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

2. 配置Mega Menu

entrer dansWordPress后台的état extérieur > menu页面,选择你要设置为Mega Menu的菜单项。点击相关按钮后,进入菜单项的设置界面。在这里,你可以进行以下调整:

图片[5]-如何使用Kadence主题创建巨型下拉菜单:详细教程
  • 设置图标:为菜单项添加图标,并设置图标的展示位置,可以选择放在左侧或右侧。
图片[6]-如何使用Kadence主题创建巨型下拉菜单:详细教程
  • 调整图标颜色和尺寸:根据需要调整图标的颜色和尺寸,使其更符合你网站的设计风格。
图片[7]-如何使用Kadence主题创建巨型下拉菜单:详细教程
  • 设置Mega Menu宽度:选择全宽模式,让菜单从左到右展开,达到页面内容和菜单一致的视觉效果。
图片[8]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

en ce qui concerneMéga menu,我选择了一列布局,但实际上是通过放置六个内容项来实现的。你可以根据需求调整列数。

图片[9]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

图片[10]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

图片[11]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

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

接下来,我们需要在Kadence(utilisé comme expression nominale)élément d'un ensemble部分创建具体的菜单内容。进入état extérieur > Kadence > élément d'un ensemble页面,你会看到我已经创建了两个元素。点击其中一个,查看如何添加六个产品分类。

图片[12]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

图片[13]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

  • 进入后台的offres > catégorisation页面,点击编辑你需要的分类。
图片[14]-如何使用Kadence主题创建巨型下拉菜单:详细教程
  • 查看浏览器地址栏中的URL,其中的数字就是该产品分类的ID。
图片[15]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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


commandant en chef (militaire)ID替换为实际的分类ID。

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

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

图片[16]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

图片[17]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

图片[18]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

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

图片[19]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

6. 添加子菜单项

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

图片[20]-如何使用Kadence主题创建巨型下拉菜单:详细教程

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

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

7. 检查效果并调整布局

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

résumés

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

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


Contactez nous
Vous ne pouvez pas lire l'article ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
Tel : 020-2206-9892
QQ咨询:1025174874
(iii) Courriel : info@361sale.com
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
© Déclaration de reproduction
Cet article a été écrit par : upupdowndownLRLRBABA
LA FIN
Si vous l'aimez, soutenez-le.
félicitations8321 partager (joies, avantages, privilèges, etc.) avec les autres
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires