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 教程内容。

最近更新

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注