如何保护你的 WordPress 管理员登录
lyc054211使用 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 教程内容。
最近更新
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章 暂无评论... |
|---|
