Bricks 优化设计流程：主题样式、全局 class 与全局小部件

全局样式：Theme Styles 主题样式

动手前一般会先定好风格类型、整体色彩、布局草图，然后按图施工。如果能在前期给常用小部件设好符合设计风格的默认样式，拖到画布就是想要的样子，不用再逐个调参，岂不美哉？Bricks 就能做到。

路径：编辑界面左上方 Settings → THEME STYLES。

可以看到，Bricks 能为大部分小部件设默认样式；还能新建多套配置，配合 Conditions 应用条件，为不同类型页面设不同默认风格（点 + 号即可）。

brickswiki 视角：主题样式像「游戏皮肤」——同一页面可备多套皮肤，也能把这套皮肤装备到其他页面。两个典型场景：①节日（圣诞、万圣）用特殊风格；②首页用一套、产品页用另一套。当前风格里改了参数，已布置且未改默认参数的小部件会跟着变，已自定义的参数不受影响。

全局 class 的使用

主题样式虽好，但默认设置项可能仍不够——比如 Icon Box 的渐变色在全局里设不了。这时用 class 类 就能让所有 Icon Box 都拥有渐变色。

1. 添加 class：点小部件的 ID 编辑框，在弹出的下拉里输入 class 名，点右侧保存。
2. 编辑 class 样式：当 class 名变粉红色，就可以像平时改样式一样操作，这些样式会被记到 class 里。在 STYLE > CSS 框里加的自定义代码也会应用到 class。
3. 停止编辑：点掉粉红色 class 输入框右侧的 ×，退出 class 编辑模式。
4. 应用 class：选中后续小部件，在 ID 编辑框下拉里选刚编辑好的 class，样式就完整套上。

brickswiki 视角：class 的灰色图标代表当前小部件应用的所有 class；想去掉某个 class，鼠标移上去点 × 即可。

设置全局小部件（Global Elements）

全局小部件和古腾堡的「可复用 block」类似：把排好版、设好参的小部件存进 global elements，下次直接用。右键小部件选最底下的 save as global element 即可；全局小部件显示在左侧面板底部。

但要注意一个坑：Bricks 只能把单个小部件存为全局小部件。比如一个 Block 容器里含标题、图片两个子部件，把 Block 存为全局时，标题和图片并不会成为它的一部分——只存了容器本身。

brickswiki 视角：想把一个「容器 + 子元素」做成一个可复用区块，只能存为模板：右键容器 → save as template，保存为 Section 模板，调用时用 Template 小部件或 Shortcode 小部件。这条链路稍繁琐，但能解决整块复用。

全局小部件的关联与取消关联

全局小部件是相关联的：在新页面加了全局小部件后，若改了它的内容或样式，原页面上的同一小部件也会跟着变。所以改动前先想清楚两点：①是不是所有页面都要同步变更？②若只改当前页，是否已经取消关联？

取消关联：点左上角的 🔗 图标，或右键小部件选 unlink global element。之后当前页怎么改都不影响其他页面。

小结

优化 Bricks 设计流程三板斧：Theme Styles 固化全站默认风格、全局 class 解决主题样式覆盖不到的样式、全局小部件复用单模块（整块复用走模板）。前期多花十分钟设好，后面每个页面都省事。

内容说明（整理稿）：本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程（源多为截图驱动教程，正文极薄），内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理，非原文逐字翻译，也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准，实操前建议对照官方文档核对。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程