完整设置 WoodMart 头部布局与导航菜单的方法

WoodMart 主题为电商网站提供了非常灵活的头部设计系统，不管你想要一个极简导航、Logo 居中、顶部通栏，还是搜索框与购物车集成的复杂布局，它都能实现。如果你刚安装 WoodMart，或想重新调整网站的顶部结构，这篇教程会一步步带你设置头部布局，并完成自定义导航菜单的配置。

一、头部布局入口在哪？

进入 WordPress 后台后，依次点击：

WoodMart > Header Builder

在这个可视化编辑界面中，你会看到整个头部结构被划分为多个区域：

• Top Bar（顶部条）
• Header Main（主头部区域）
• Header Bottom （底部头部）

每个区域都可以加入组件，比如 Logo、菜单、搜索框、按钮、图标等。

二、设置 Logo 与标语

点击 Header Builder 中的 Logo 模块，左侧会弹出设置面板：

• 上传主 Logo 图片
• 可选上传 Retina 高清版本
• 设置 Logo 宽度、边距
• 可设置“Logo 下标语”文字（如品牌口号）

Logo 是每个页面第一眼能看到的区域，建议使用透明 PNG 格式，避免背景冲突。

三、添加与自定义导航菜单

菜单是头部中最关键的功能部分，设置路径如下：

进入 WordPress 后台：

外观 > 菜单

• 创建一个新菜单，命名如“主菜单”

• 添加页面、分类、链接等项目到菜单

• 拖动调整顺序，可设置多级下拉

• 在页面下方“显示位置”处勾选 Main Menu

返回 Header Builder，把“菜单组件”拖入 Header Main 区域中，即可在页面中显示该菜单。

四、移动端菜单设置

WoodMart 支持单独设置移动端头部结构，非常适合移动访客访问时展示更简洁的菜单。

进入 Theme Settings > Header Builder > Mobile Header

你可以设置：

• 是否显示移动菜单按钮（汉堡图标）
• 移动菜单展开后的内容（菜单项、图标、搜索等）
• Logo 居中或左对齐
• 隐藏或显示其他元素（如购物车、语言切换等）

建议移动端简洁为主，避免堆叠太多内容。

五、多头部布局支持（可选）

WoodMart 还支持为不同页面使用不同头部，比如：

• 首页使用通栏白底头部
• 商品详情页使用透明头部
• 活动页使用特殊图标导航

总结

WoodMart 的头部系统非常灵活，无需编码，就能快速搭建一个适合品牌定位的导航区。通过 Header Builder 的模块化方式，你可以自由组合 Logo、菜单、搜索栏、购物车、语言切换器等组件，并分别针对桌面与移动端进行优化。结合 WordPress 自带的菜单管理系统，导航结构也能轻松维护。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息