Generic filters
页面
教程分类

WoodMart 主题创建 Mega Menu (超级菜单)教程

Generic filters
WoodMart 主题创建 Mega Menu
WoodMart 主题创建 Mega Menu (超级菜单)教程,解决网站菜单杂乱问题,更高端的显示网站重要内容。
文章目录

本篇文章共 996 字,预计阅读时间 4 分钟

什么是 Mega Menu ?

简单来说,Mega Menu 就是那种大面积展开的下拉菜单,可以放很多栏目,甚至可以加图片、图标、按钮、产品等等。常见于一些大型商城、企业站,大多数 B2C 外贸独立站的主菜单就是这种形式。

很多人在搭建网站的时候,网站内容一多,导航菜单就变得杂乱无章,尤其是一些产品、页面较多的 C 端网站,这个时候就需要用到 Mega Menu(超级菜单)了。

今天这篇教程,Well 手把手教你如何在 Woodmart 主题里创建一个专业、美观的 Mega Menu。不用写代码,只需简单几步,就能做出高大上的导航效果!下图是一个简单的 Woodmart Mega Menu 效果展示 ↓

WoodMart Mega Menu 效果预览

在图片中:上方区域是网站菜单区域,鼠标移入设置了超级菜单(WHY US)的菜单后,下方显示对应超级菜单内容。

创建 Mega Menu

打开你 WordPress 网站后台,进入 外观 – 菜单 – 展开需要设置超级菜单的菜单 ↓

WoodMart 设置 Mega Menu

在 Dropdown settings 里进行超级菜单配置:

Design:Full width,全宽度显示超级菜单

Dropdown height:留空

Dropdown padding:20px的内距

Enable scroll:No,下拉高度取决于内容高度

HTML Block for the dropdown:需要点击“Edit this block with page builder”创建超级菜单的内容,创建后就可以在这里选择

比如 Well 创建了一个名为 megamenu1 超级菜单内容 ↓

WoodMart 创建 Mega Menu

Load HTML dropdown with AJAX:Yes,会在首次加载超级菜单的时候ajax异步加载超级菜单的内容,防止和页面一起渲染,从而避免影响页面加载速度

Dropdown color scheme:黑白色调,按需选择

Open on mouse event:Hover,鼠标悬停展示超级菜单

设置好后保存菜单即可。

以上就是本篇 WoodMart 超级菜单教程的全部内容。

更多超级菜单教程请查看:

Elementor超级菜单教程

超级菜单插件JetMenu使用教程

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
WordPress建站资源下载
WordPress 插件下载,合理使用插件丰富网站功能
外贸服务器推荐(Well在用的服务器)
vultr-logo
一线品牌VPS服务器,稳定、不贵、性能强
Clouvider-logo
二线品牌VPS服务器,稳定、便宜、性能强
文章标签
文章推荐
文章目录

建站遇到问题?

联系我们获得技术支持
相关文章

or

or