Bricks 编辑器入门与基础操作

创建模板

进 Bricks 编辑器前，先搞清楚“模板”的概念。Bricks 里有两类常用画布：

• 页面/文章：直接编辑某个具体页面
• 模板（Template）：在「Bricks → Templates」里建，可分配给一类页面（如所有博客详情页共用一个页眉/页脚/结构）

新手建议：先拿一个普通页面练手，熟悉后再用模板做全站统一结构。

编辑器界面介绍

进入编辑器后，界面大致分三块：

• 左侧结构树（Structure）：当前页面的元素层级，点选元素、拖拽排序都在这
• 中间画布：可视化编辑区，所见即所得
• 右侧设置面板：选中元素后，在这里改它的各类参数

顶部还有工具栏：撤销/重做、响应式预览（桌面/平板/手机）、保存等。

布局元素（排版）

Bricks 的布局靠“容器（Container）“层层嵌套实现，核心元素：

• Container（容器）：布局骨架，用 Flexbox/Grid 控制内部排列
• Section（区块）：常见的整宽内容段
• Block（块）：预设好的一套组合元素
• 文字/标题/按钮/图片 等基础组件

排版铁律：先放容器定布局，再往里塞内容元素。别上来就堆文字，否则响应式时会散架。

基础操作：添加元素

1. 在画布或结构树里选中一个容器
2. 点「+」或拖拽，从元素面板把组件加进去
3. 用结构树调整顺序、缩进（拖成嵌套）

三类参数：元素 / 内容 / 样式

选中任意元素，右侧面板通常分三栏：

绝大多数调整都在「样式」里完成；「元素/内容」管功能与文案。

保存模板复用

调好一个常用结构（如带页眉的落地页骨架）后：

1. 在结构树选中顶层元素
2. 点「另存为模板（Save as template）」
3. 下次新建页面时直接「从模板插入」，省去重复搭骨架

进阶：配合 Theme Style（主题样式）和全局 CSS 变量，模板里的视觉也能做到“改一处全站变”。

小结

Bricks 的日常操作就三件事：搭容器定布局、加元素填内容、在右侧三栏参数里调样式。模板功能把常用结构存下来复用，配合设计体系变量，越用越省事。先在一个页面练熟这套动作，再谈效率优化。

选题参考自 oyouoo 站的《BricksBuilder编辑器入门介绍和基础操作教程》思路，操作步骤与结构为本站重写整理。

站长

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.

获取报价 →浏览全部教程