Bricks 编辑界面与基础操作：新手的第一课

Bricks 编辑界面三区一览

Bricks 的编辑界面和 Elementor 很像，分三大块：

• 左侧（小部件面板）：Bricks 内置的「element（小部件）」列表，和古腾堡的 block 一样都是开箱即用的功能模块。单击或拖到中间画布、右侧结构区即可完成布置，画布里实时预览。
• 中间（画布 Canvas）：可视化显示区。对参数的任何修改都会实时反映在这里。
• 右侧（结构面板）：已放入画布的小部件的层级结构，类似 PS 的图层，但表示的是 x/y 轴顺序。图层名可像 PS 一样自由重命名，方便区分。

顶部栏左侧有伪类编辑、页面切换、历史记录、全局设置、添加小部件等按钮；中间是不同分辨率（断点）切换区，默认桌面端（≥992px）、平板端（768–991px）、手机横屏（479–767px）、手机纵屏（≤478px），也可增改；右侧是前进后退、结构区开关、预览、保存等。

brickswiki 视角：把建站想成盖房子——左侧是材料堆放区，中间是施工区，右侧是结构图。照着 Figma 或草图「施工」就行。

顶部栏：断点、历史、保存

选中小部件后，左侧面板会变成它的参数设置面板，只有两个选项卡：

• Content：与内容直接相关的参数。
• Style：与样式相关的参数。

几个好用的小细节：

• 参数被改过之后，前面会出现一个粉红圆点，方便你一眼看出哪些被自定义过；鼠标移上去变成 ×，点一下就清空该项自定义。
• 带 ⚡ 符号的输入框表示支持 Dynamic Data（动态数据），完美兼容 ACF、Meta Box 等主流插件。
• 1.5.4 版本起，每个小部件都带条件显示功能，可对不同条件的访客展示不同内容。

添加与复制/删除小部件

• 添加：可视化拖拽，单击也能加。要放到正确结构里，需从左侧拖到画布或右侧层级面板中对应位置。
• 复制/删除：鼠标移到结构面板的小部件上，右侧会出现按钮，也支持快捷键（删除是 Ctrl+Delete），或右键操作。
• Copy Style：只复制样式，再粘贴到另一个小部件，类似全局 class 的轻量版。

单位、样式继承与自定义 CSS

单位：布局设置里默认单位是 px，面板不显示。Margin 右边距只填 10 即代表 10px（也能量完整写 10px）；用其他单位直接打符号，如 20vh、30%。Bricks 还支持 var()、clamp() 这类计算写法。

样式继承：默认从大分辨率断点向小分辨率继承——桌面端设了某按钮的颜色/字号，平板、手机没改就保持一致；若在平板改了，手机就继承平板的。面板里浅色数字代表继承值，深色数字代表本断点自定义值。打开 Setting > General 的 Custom breakpoints 后，可把手机端设为 Base breakpoint，继承顺序反转。

自定义 CSS：不同断点下可针对同一 class 写不同分辨率 CSS，免写 @media。用 root { } 可直接选中包装器，不用自己加 class 名。

/* 在不同断点下针对同一 class 写样式，免写 @media */
root {
  --brand: #2b6ef2;
}

动态数据与条件显示初识

• ⚡ 动态数据：大多数小部件都带，能做「同一套版式、不同内容」的模板（如博客详情页）。
• 条件显示：给小部件加条件后，只有符合条件才输出——它基于 PHP，不符合时连 HTML 都不渲染，比 CSS 隐藏（仍加载代码）更干净。

小结

Bricks 编辑器三区（小部件面板 / 画布 / 结构面板）加上顶部断点与保存，构成了日常操作骨架。记住单位默认 px、样式从大断点往小断点继承、自定义 CSS 用 root {}，再认识 ⚡ 动态数据和条件显示，新手就能顺利开工。

内容说明（整理稿）：本文选题与步骤框架参考自竞对站 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.

获取报价 →浏览全部教程