在 WordPress 电商网站中,页眉和页脚不只是导航和品牌展示的工具,更关系到转化和信任感。WoodMart 主题提供了功能强大的 Header Builder,可视化操作,轻松打造专属布局。本文带你一步步搭建独一无二的页眉与页脚结构。
一、启用 WoodMart Header Builder
登录 WordPress 后台
前往 WoodMart > Header Builder默认开启,如未启用可点击启用按钮
界面非常直观,拖拽组件排版,与 Elementor 的操作逻辑类似。
二、定制页眉(Header)
1. 新建页眉
点击“add new header”选项,选择需要的结构样式,如 Logo 居左、菜单居中、图标居右等,或者空白模板。
2. 添加模块组件
点击加号搜索并添加下列模块:
Main Menu:主导航菜单,需先在 WordPress 设置好菜单Search:搜索框,支持切换为产品搜索,选择你喜欢的样式Cart:显示购物车图标,适合电商功能
Social Icons:添加社交媒体链接
3. 设置样式与响应显示
点击模块后,可设置字体、颜色、背景、边距等样式细节。
点击右上角“桌面 / 手机”图标,分别调整各端显示效果。
4. 固定页眉 Sticky Header
点击设置,开启 Sticky 功能,可让页眉在滚动时仍保留在页面顶部,方便操作和导航。
三、定制页脚(Footer)
WoodMart 虽然没有独立的 Footer Builder,但可以借助以下两种方式实现自定义页脚:
方式一:使用小工具区域
进入 外观 > 小工具 > Footer Widgets,可添加内容模块如文字说明、菜单、联系方式等。
方式二:使用 Elementor 创建页脚模板
打开 Elementor > 模板 > 添加新模板
类型选择“页脚”利用 Elementor 拖拽编辑设计页脚设置显示范围为“整站”返回 WoodMart,进入 Theme Settings > Footer 中选择创建好的模板
四、自定义代码区域(进阶用法)
WoodMart 的页眉与页脚支持插入 HTML 块与 JS 脚本,常见用法有:
第三方客服插件嵌入
网站统计追踪代码添加
顶部通栏公告或广告信息展示
五、常见问题与技巧
Logo 变形? 建议上传宽度不超过 200px 的图片,SVG 格式可避免模糊
菜单未居中? 将菜单模块放入中间栏,并设置对齐方式为“居中”
页脚重复? 检查 Elementor 与主题设置是否冲突,避免双重调用模板
响应式错位? 每个设备下都可单独调整布局,适配不同屏幕尺寸
结语
WoodMart 的 Header Builder 提供了灵活的编辑环境,配合 Elementor 模板与 WordPress 小工具,自定义出拥有强烈品牌特色的头部与尾部结构。动手尝试,用简单的操作为电商网站带来专业外观和清晰导航。