在 Woodmart 主题中使用 HTML Block 构建专业页脚的完整教程

Woodmart 内置的 HTML Block 编辑能力能满足多种设计场景，其中自定义页脚是最常见的用途之一。借助 Page Builder，可以灵活组合 Logo、社交图标、菜单列表、订阅表单与支付信息，使页面整体结构更统一。本教程整理了从建立 HTML Block 到在主题中启用页脚的完整过程。

创建 Footer 专用的 HTML Block

进入后台建立新 Block

进入仪表盘，选择 HTML Blocks，点击新增，为区块设定标题。随后打开 Page Builder 编辑界面开始搭建结构。

制作页脚顶部：Logo 与社交图标

添加容器并插入 Logo

在页面中加入一个 Container，作为页脚的第一行结构。
在元素列表中选择图片组件，插入 Logo 文件。
在“高级”设置中设定宽度，单位设为 px，便于控制视觉比例。

加入社交图标模块

在同一容器中插入 Social Buttons：

• 输入标签文本
• 选择合适类型
• 将图标样式切换为彩色
• 图标尺寸设为 Small
• 在 Style 中将标签设为 Inline，让图标与文字同排显示

调整布局与间距

为了让 Logo 与图标排列整齐，可修改：

• Justify Content：Space Between
• Align Items：Center

并在高级设置加入顶部外边距与底部内边距，使整体更协调。

构建页脚主体区域：菜单与订阅区

建立主容器结构

新增一个 Container 作为页脚第二部分，将其分成左右两列。
左侧用于放置多组菜单，右侧用于展示标题、订阅表单及支付方式信息。

左侧：折叠菜单结构（Toggle + Extra Menu List）

加入 Toggle 元素并设置菜单

在左侧列加入一个小容器，插入 Toggle 元素。
设定标题后，在内部加入 Extra Menu List。
将默认标题移除，菜单项可编辑链接、文本或图标。

设定桌面端常显

在 Toggle 中将状态设为“始终展开”，这样桌面环境下可直接显示菜单项。

复制生成三组菜单

将整个菜单容器复制两次，更改每组标题内容，使三列菜单分类更清晰。

调整排列方式

编辑主容器，将方向设为水平排列：

• Direction：Horizontal
• Align：Center

菜单会在同一行展示。

右侧：标题区、Mailchimp 表单与支付信息

加入文字标题区

插入 Section Title，只启用标题与文本字段。
在 Style 中设为左对齐，并设置配色。

设置背景容器样式

为此区域加入：

• 背景色
• 约 20px 内边距
• 圆角

让整体视觉更集中。

加入 Mailchimp 表单

在背景容器内部添加 Mailchimp Form，方向改为水平排列，让表单输入框与按钮排成一行：

• Direction：Row
• Justify Content：Space Between
• Align Items：Center

加入支付方式图示与信息框

在表单下方加入一张支付方式图示，再加入一个 Info Box，启用标题与内容字段即可。
图标宽高可自订，使其更匹配布局。

适配平板与手机端

调整容器宽度与堆叠方式

在平板与手机模式下，将容器宽设为 100%，让栏目自动换行。
主容器方向改为垂直，使栏目上下排列。

加入适当的留白

为菜单容器加入底部外边距，让内容更易阅读。

在 Woodmart 主题中启用自定义 Footer

选择 HTML Block 作为页脚输出内容

进入主题设置，找到 Woodmart 的 Footer 页面，在 Footer content 区域选择刚才建立的 HTML Block。
保存后刷新前台，页脚就会按设定呈现。

完成后的整体检查

最后查看页面在桌面、平板及手机端的呈现方式，确认菜单切换、图标位置、表单显示、间距是否符合预期。
经过以上步骤，一个功能丰富、结构清晰、视觉统一的页脚就已构建完成。