Basel主题设置指南：全面了解网站界面配置（11）
lyc054211WoodMart 主题为电商网站提供了非常灵活的头部设计系统，不管你想要一个极简导航、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 自带的菜单管理系统，导航结构也能轻松维护。
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章
lyc054211
快速导入 WoodMart 演示站点完整教程lyc054211
Astra 主题菜单设置详解：从基础到超级菜单的全面指南（04）lyc054211
WoodMart常见错误解决方法（白屏与样式错乱）lyc054211 暂无评论... |
|---|