Bricks Builder 入门教程：30 分钟搭建你的第一个 WordPress 网页

如果你听说过 WordPress，但一直觉得“建站 = 写代码”，
那 Bricks Builder 这种可视化页面构建器，很可能会刷新你的认知。

Bricks Builder 的核心逻辑很简单：

• 想要一个标题？拖一个标题元素上去
• 想换一张图片？点图片换文件
• 想改颜色、改字号？在左边面板选一选，右边页面立刻显示效果

你不用记任何编程语法，只要会用鼠标和一点点耐心，
就能把一个空白页面，搭成一个看得过去的首页区块。

这篇教程会带你在大约 30 分钟内，完成这几件事：

• 打开 Bricks 编辑器
• 理解它的基本结构（Section / Container / Element）
• 做出一个有标题、副标题、按钮和图片的 Hero 区域
• 调整电脑端和手机端的显示效果
• 保存、预览并发布这个页面

我尽量用“老板能听懂”的方式来讲，你可以跟着一步步点。

一、开始之前：你需要先准备好什么？

为了能顺利跟着操作，你需要先有两个前提条件：

1. 一个已经能正常访问的 WordPress 网站
   • 也就是：域名 + 服务器 + WordPress 程序都准备好了
2. Bricks Builder 主题已经安装并激活
   • 在 WordPress 后台 → 外观 → 主题 里，能看到 Bricks 处于“已启用”状态

如果你现在还没有这些，只是想了解一下 Bricks 是怎么用的，可以先把这篇文章当作“体验预览”。真正要上手的时候，可以考虑找专业的人先帮你搭好 WordPress + Bricks 的基础环境。

二、第一步：进入 Bricks Builder 编辑器

Bricks 是嵌在 WordPress 里的，但编辑页面的方式和原生编辑器不太一样。

操作流程如下：

1. 登录 WordPress 后台
   • 一般地址是：你的域名/wp-admin
2. 左侧菜单点击「页面（Pages）」 → 「新建页面（Add New）」
3. 在“新建页面”界面，为这个页面起个名字
   • 比如：“首页草稿” 或 “测试页面”
4. 在编辑器上方，你会看到一个单独的按钮：
   • 「用 Bricks 编辑（Edit with Bricks）」
5. 点击这个按钮，页面会刷新，进入 Bricks 的编辑界面

如果你看不到“用 Bricks 编辑”这个按钮，很可能是：

• Bricks 主题没有成功激活
• 或者当前页面使用的不是 Bricks 主题

确认 Bricks 已经启用，再试一次。

进入编辑器后，你会看到一个典型布局：

• 左边是一块大的设置面板
• 右边是一个空白页面区域（画布），用来实时预览你所做的改动

三、先搞清楚：Bricks 的 3 个核心结构

在开始拖东西之前，先认识一下 Bricks 的“骨架结构”。
理解这三个概念，会让你后面搭页面顺畅很多。

可以把一个页面想象成一栋楼：

• Section（区块） 是一层一层的“楼层”
• Container（容器） 是楼层里的“房间”
• Element（元素） 是房间里的家具（标题、文字、图片、按钮等）

用一个简单的结构表示，就是：

Section（一个完整区域，比如首页大图区域）
└─ Container（里面摆东西的容器）
├─ Heading（标题）
├─ Text（正文文字）
├─ Button（按钮）
└─ Image（图片）

大致可以这么理解：

• Section：负责一块区域的“背景”和整体视觉（比如整块深色背景）
• Container：负责这一块里内容的宽度和对齐方式（居中/居左等）
• Element：负责具体内容长什么样（什么字、多大字号、什么颜色）

即使以后做一个复杂页面，本质上也是：

• 多个 Section 从上到下排好
• 每个 Section 里放一些 Container
• Container 里塞各种 Element

明白这点之后，你就知道“该往哪儿拖东西”了。

四、搭一个简单的 Hero 区域：背景 + 标题 + 副标题 + 按钮 + 图片

下面我们正式开始动手，做一个常见的首页顶部区域（Hero 区）。

1）添加第一个 Section

1. 在左侧面板顶部，点击「+ 添加（Add）」
2. 在弹出的元素列表中，找到并点击「Section」
3. 右侧画布上出现一块横向的区域，这就是一个新的 Section

这时你已经有了一个“楼层”。
默认情况下，这个 Section 里会自动带一个 Container。

可以先给这个区域加一个背景色，让它更像“首页大图区”：

1. 在右侧画布中点击这块 Section（四周会出现蓝色边框表示选中）
2. 看左侧面板，切到 Background（背景） 设置
3. 点击颜色选择器，选一个深一点的颜色作为背景

2）选中和切换元素的小技巧

在 Bricks 里，改任何东西之前，都必须先选中对应的那一层（Section / Container / Element）。

• 页面底部会有一个“面包屑导航”（Breadcrumbs）
  • 显示类似：Section > Container > Heading
• 如果发现改错地方了，可以在这个面包屑里点击上一级，快速切换

比如：

• 想改整个区域的背景：选 Section
• 想只改中间内容的宽度和对齐：选 Container
• 想改文字内容和样式：选具体的 Heading / Text 元素

五、加文字：主标题和副标题

现在我们开始往这个 Section 里填内容。

1）添加一个标题（Heading）

1. 在画布中点击 Section 里面的 Container（可以点中间区域，或用面包屑选择）
2. 在左侧点击「+ 添加」，选择「Heading」
3. 一个默认的标题会被放进 Container 里

然后修改内容和样式：

1. 选中这个 Heading
2. 在左侧的 Content（内容） 选项卡里，把默认文字改成：
   • 比如：“用可视化建站，做出你自己的企业网站”
3. 切换到 Style（样式） 选项卡：
   • Font Size（字号）：调到 42–48px 左右，做成主标题
   • Text Color（文字颜色）：如果背景是深色，文字改成白色
   • Text Align（对齐）：选择“居中”

2）添加一个副标题（Text）

1. 仍然在同一个 Container 中，点击「+ 添加」，选择「Text」
2. 把默认文本改成一段简短说明，例如：

“Bricks Builder 拖拽搭建，所见即所得。网站搭好之后，你自己就能在后台改文字、换图片，不用每次为一点小改动再找开发。”

1. 在 Style 里稍微调整一下：
   • 字号调小（比如 16–18px）
   • 颜色选偏浅的灰色，与主标题拉开层次
   • 文本对齐同样选“居中”

到这里，一个简单的“文案区”已经成型了。

六、加一个行动按钮（CTA）

一个完整的 Hero 区，通常还会有一个“下一步动作”的按钮，比如“了解更多”或“联系咨询”。

1. 选中 Container
2. 点击「+ 添加」，选择「Button（按钮）」
3. 选中按钮，在 Content 中：
   • 改文案为“了解建站方案 →”或类似的行动语
   • 在 Link（链接）里填上你想跳转的目标页，比如“/pricing/”或“/contact/”

接着设置样式：

1. 切换到 Style 选项卡
2. 将 Background Color（背景色）改成你的品牌主色
3. 文字颜色改成白色
4. 调整 Padding（内边距），比如：
   • 上下 10–14px
   • 左右 24–32px
5. 设置 Border Radius（圆角）为 4–8px，让按钮看起来更友好

你会看到按钮的样式在右侧页面立即发生变化，这就是可视化的好处。

七、加一张图片，让这个区域更有“画面感”

文字 + 按钮已经可以用了，但配一张图片往往更有说服力。

1. 再次选中 Container
2. 点击「+ 添加」，选择「Image」
3. 上传一张与你业务相关的图片，或从媒体库中选择已有图片

给图片一点呼吸空间：

1. 在 Style 里调整 Width（宽度），比如设置为 70–80%，避免填满整个宽度
2. 给它加一个上边距（Margin Top），比如 24–32px，把它和上面的按钮拉开一点距离

现在，这个 Hero 区域已经有了：

• 一个背景
• 一句主 Slogan
• 一段补充说明
• 一个行动按钮
• 一张对应的配图

这已经是一个合格的首页头屏结构了。

八、保存、预览，不用担心“还没做好就被人看到”

做到这里，记得先保存一下成果：

1. 按下键盘上的 Cmd+S（Mac）或 Ctrl+S（Windows）
2. 或者点击右上角的 Save（保存）按钮

Bricks 会以“草稿”的形式保存你的改动。
只有当你点击 Publish（发布）时，这个页面才会对访客可见。

预览方法：

1. 点击编辑器右上角的 Preview（预览）
2. 浏览器会打开一个新标签，展示当前页面实际访问时的样子

看完觉得哪里不满意，再回到 Bricks 界面继续调整就好。

九、多加几个 Section，把页面充实起来

一个真实的网站不会只有顶部一块区域。你可以按同样的逻辑继续往下搭：

• 新增 Section，用来做“你能提供什么”的功能/服务介绍
• 再加一个 Section，讲“你是谁”“为什么值得信任”（关于我们）
• 再加一个 Section，放客户案例或合作品牌 Logo
• 最后一个 Section，做一个简单的“联系我们”或“获取方案”引导

每一个 Section 内部，都还是那套组合：

• 一个标题（Heading）
• 几段文字说明（Text）
• 若干图片或图标（Image / Icon）
• 必要时加个按钮（Button）

你不需要一次性把所有内容写完。
可以先搭骨架，把主要区域都占好位置，再慢慢给每一块补文案和图片。

十、别忘了手机端：切换断点做响应式调整

现在大部分访客都是用手机看网站。
如果只在电脑宽度下调好了效果，手机上很可能会：

• 标题太大，换行怪异
• 按钮太宽、太挤
• 图片占满一屏，看不到文字

Bricks Builder 提供了很方便的“设备切换”功能：

1. 在编辑器顶部，找到设备图标（Desktop / Tablet / Mobile）
2. 切换到 Mobile（手机）视图

此时画布会缩窄，模拟手机屏幕宽度。

接下来可以有针对性地调整：

• 选中标题，把手机端的字体尺寸单独调小
• 检查按钮的宽度和间距，避免太挤或太小
• 检查图片高度，必要时在手机端隐藏某些不重要的装饰图

Bricks 会区分不同设备的设置：

• 你在 Mobile 视图里改的字号，只对手机端生效
• 不会影响电脑端的样式

这样，你可以给不同设备做稍微不同的优化，而不需要为每个设备单独做一套页面。

十一、满意之后，正式发布你的第一个 Bricks 页面

当你在桌面和手机视图下都看着顺眼了，就可以让这个页面“对外开放”：

1. 点击右上角的 Publish（发布）
2. 系统会提示你确认，点确认即可

发布后，你可以：

• 在后台“页面”列表里看到这个页面
• 把它设为站点首页（在“设置 → 阅读”里选择）
• 或者把它作为某个栏目页、着陆页使用

之后如果想改内容，只需：

• 回到 WordPress 后台
• 找到这个页面
• 再次点击“用 Bricks 编辑”
• 在可视化界面里改完，保存更新即可

十二、下一步你可以怎么玩得更高级一点？

当你完成了第一个页面，已经具备继续扩展的基础。接下来可以尝试：

• 把做好的 Section 保存为模板，在其他页面一键复用
• 在 Bricks 里设置全局颜色和全局字体，保证全站风格统一
• 了解像 Automatic.css 这类配合 Bricks 使用的类名框架，用更快的方式控制间距和排版
• 试试 Bricks 内置的弹窗（Popup）功能，做一些简单的询盘弹窗或提示

如果你已经用 Bricks 搭了第一个页面，也开始感受到了“改东西不求人”的自由，
那你已经迈出了从“只能仰赖仿站”走向“自己能掌控网站”的重要一步。

真正的可视化建站，不是让你变成程序员，而是让你用更直观的方式去表达你的业务和想法。
剩下的结构规划、性能优化和技术细节，可以交给熟悉 Bricks 和 WordPress 的人来搞定——而你，专心做好内容和产品就行。