GenerateBlocks 模板样式自定义教程：字体、颜色、间距与结构统一设置

使用 GenerateBlocks 模板库构建页面后，很多用户希望对模块样式做统一调整，例如字体、颜色、间距与容器宽度等内容。本教程以实例展示页面样式的来源，以及修改按钮样式、标题颜色、段落间距和容器宽度的具体方法。

模板样式结构总览

页面中的样式来自三个层次：

• 主题样式：如字体族、H1-H2 标题格式、段落间距等
• 本地块样式（Local Block Style）：仅影响某个特定块的设置
• 全局样式（Global Style）：可复用于站内多个区域

字体设置演示

示例页面中，通过自定义器修改了以下字体：

• 正文字体：Rubik
• 标题字体（H1 与 H2）：Roboto Mono

所有使用 H1、H2 的模块自动继承字体与字重。比如打开模板库，选择 Hero 模块，H1 会呈现新的字体设置。

自定义按钮样式

页面中的按钮使用了名为 gbp-button-primary 的全局样式。修改方式如下：

• 选中按钮块，点击样式名 gbp-button-primary

• 进入背景设置，修改按钮颜色，例如改为调色板中的深色

• 页面中所有使用该样式的按钮同步更新，包括未来新插入的模板

调整按钮悬停颜色

• 点击按钮块，进入“hover 状态”

• 在背景设置中修改悬停颜色（例如浅色调）

• 保存后，悬停效果立即生效

标题颜色设置（以 H1 为例）

统一所有 H1 标题的颜色，可按以下步骤操作：

• 找到任一 H1 元素，点击其全局样式标签
• 修改字体颜色，例如选用红棕色或其他亮眼配色

• 再次插入 Hero 模块，标题颜色也已变化

这种方法适用于页面整体风格设定，不需要重复手动更改样式。

控制区块上下间距

大部分模板模块（除 Hero）使用名为 gbp-section 的全局样式，控制上下内边距与左右间距，例如：

• 上下间距：7rem
• 左右间距：40px

调整方式如下：

• 打开模块，如 Features、Gallery、Pricing 等
• 点击样式标签 gbp-section

• 修改上下间距为 3rem

• 所有引用该样式的模块同步更新，页面更紧凑清晰

容器最大宽度设置

GenerateBlocks 支持容器最大宽度设置。若当前主题为 GeneratePress，可在“布局 → 容器”中设置默认宽度（例如 1440px）。

设置步骤如下：

• 选中模块中的容器
• 启用“最大宽度”

• 选择使用主题或 GenerateBlocks 的最大宽度设置值

即使不是使用 GeneratePress，也能在 GenerateBlocks 设置中自行设定合适的宽度。

添加自定义全局样式

在现有模板结构中，也可以添加属于自己的全局样式。例如在团队模块中添加一个专属卡片类名（如 .card），设置样式后即可在多个页面中重复使用。

总结

本节内容展示了：

• 模板样式来自主题、本地块和全局样式三个层次
• 全局样式可统一字体、颜色、按钮、区块间距与宽度
• 调整一次，全站模块同步响应
• 可根据页面需求扩展自定义样式，便于后期统一管理

掌握这些样式方法，有助于构建结构清晰、风格一致的页面布局。欢迎继续学习更多 GenerateBlocks 教程内容。

最近更新

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