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

如果你听说过 WordPress，但觉得建站一定要写代码——那 Bricks Builder 就是来打破这个认知的。

Bricks Builder 是一个 WordPress 页面构建器（Page Builder）。它的核心逻辑是：你想让某个元素出现在哪里，拖过去就行。你想改什么颜色的文字，点一下就能选。所有操作都在页面上实时预览，你看到的就是最终效果。

这个教程会让你在 30 分钟内从零完成一个完整的 WordPress 页面。我会用最直白的语言描述每一步操作——就像坐在你旁边教一样。

开始之前，确保你已经做好了两件事：

• 一个已经安装好 WordPress 的网站（服务器+域名+WordPress 程序已就绪）
• Bricks Builder 主题已激活（在 WordPress 后台 → 外观 → 主题中激活）

💡 如果你还没有 WordPress 环境

这篇教程假设你已经有了运行中的 WordPress。如果你是从零开始、还没有服务器和域名，可以先看看我们的建站套餐——不管是基础搭建还是完整建站，我都会帮你把环境和网站一起搞定。

第一步：进入 Bricks Builder 编辑器

Bricks Builder 的编辑器和 WordPress 原生的页面编辑方式不一样，但它嵌入在 WordPress 后台里，入口很好找。

1. 登录你的 WordPress 后台（通常是 你的域名/wp-admin）。
2. 在左侧菜单找到 页面（Pages） → 点击 新建页面（Add New）。
3. 在新建页面中，给你的页面取个标题（比如”首页”或”测试页”），然后点击 用 Bricks 编辑（Edit with Bricks） 按钮。
   注意：这个按钮在 WordPress 原生编辑器的上方，是一个单独的蓝色按钮。如果你看不到它，说明 Bricks Builder 主题没有激活成功。
4. 页面刷新后，你会进入 Bricks Builder 的完整编辑界面。左边是面板，右边是实时页面预览。默认情况下，你看到的是一个空白画布。

💡 第一次进入时的建议

Bricks Builder 的界面乍看可能有点”东西太多”。别慌——你只需要用 20% 的功能就能做出 80% 的效果。这个教程也只教你那 20%。

第二步：理解 Bricks 的三大核心结构

在开始拖拽之前，你需要知道 Bricks Builder 的三个核心概念。理解了它们，后面的操作就顺理成章了：

• 区块（Section） — 页面上一个完整的内容区域。比如”首页的Hero大图区”是一个 Section、”产品介绍区”是另一个 Section。Section 是最高级别的容器。
• 行（Container） — Section 里面的内容容器，控制内容的宽度和对齐方式。每个 Section 里至少有一个 Container。
• 元素（Element） — 页面上的具体内容。可以是文字标题、段落、图片、按钮、列表等。这些元素拖到 Container 里就排列好了。

可以这么理解这个结构：

// 一个典型的页面结构
Section（区域）
  └─ Container（容器）
      ├─ Heading（标题元素）
      ├─ Text（文字元素）
      ├─ Image（图片元素）
      └─ Button（按钮元素）
每一个 Section 都可以单独设置背景颜色或图片。每一个 Container 都可以控制内容居左、居中还是居右。每一个元素都可以独立调整字体、颜色、间距。
这种嵌套结构是 Bricks 的核心。哪怕你要做一个很复杂的页面，本质上也只是把多个 Section 拼在一起，每个 Section 里面放合适的元素。
第三步：添加你的第一个 Section
现在我们来动手。在空白画布上开始搭建：

在左边面板的顶部，点击 + 添加（Add） 按钮。
从弹出的元素列表中，选择 Section。它会立即出现在右侧的页面预览中——一个横跨整个页面的灰色区域，中间包含一个 Container。
这个 Section 默认是灰色的。我们来改一下：点击 Section 区域（左右两侧会显示蓝色的边框选中标记），然后在左边面板中找到 Background（背景） 设置，点击颜色块，选择一个你喜欢的颜色。我建议选一个深色作为 Hero 区域的背景。


💡 选中技巧
在 Bricks Builder 中，要修改某个元素，一定要先在页面上点击选中它。你可以在页面底部看到面包屑导航（Breadcrumbs），它会显示你当前选中的是 Section 还是 Container 还是具体元素。选错了？在面包屑里点上一级即可。

第四步：添加标题和副标题
现在你的 Section 有一个背景色了，开始往里面加内容。

选中 Section 内部的 Container（点击 Container 区域，或者通过底部的面包屑选择它）。
点击 + 添加，选择 Heading（标题）。这会自动添加到 Container 中。
选中刚添加的 Heading，左边面板会显示它的设置选项。在 Content（内容） 标签下，把默认文字改成你的标题。比如：”用可视化建站，做出你自己的网站”。
切换到 Style（样式） 标签，你可以：

修改 字体大小（Font Size）——比如设为 48px
修改 文字颜色（Text Color）——如果你的背景是深色，文字选白色
修改 文字对齐（Text Align）——选择居中


同样操作，再添加一个 Text（文本） 元素到 Container 中，写一段副标题文字。比如：”Bricks Builder 拖拽操作，所见即所得。建完你自己就能改，不用再找人。”

然后把这个文本的字体大小调小一些（比如 18px），颜色调灰一些，跟主标题形成层次感。


🔑 关键习惯
每次添加一个元素后，养成立刻给它命名的习惯。在左边面板顶部有一个 CSS Class（CSS 类名） 输入框（或者元素标题栏），给这个标题输入一个名字比如 “hero-title”。这在你后期管理多个元素时会非常有用。

第五步：添加按钮
现在我们的 Hero 区域有了背景色、标题和副标题，还差一个行动按钮（CTA），让访客点击去了解详情。

再次选中 Container，点击 + 添加，选择 Button（按钮）。
选中按钮，在左边面板的 Content 标签下：

修改按钮文字为 “了解更多 →”
在 Link（链接） 设置中，填入你要跳转的页面 URL


切换到 Style 标签，调整按钮样式：

将 Background Color（背景色） 设为你的品牌色——比如我这里用的是 #c4783a 这个暖橙色
修改 Text Color 为白色
设置 Padding（内边距） 为 12px 上下、30px 左右，让按钮看起来更饱满
将 Border Radius（圆角） 设为 6px，让按钮边缘柔和一些




💡 实时预览的优势
以上每一步调整，你在左边面板操作时，右边的页面预览都会实时变化。你不需要保存再刷新才能看效果——这就是”可视化”的核心体验。你改间距、调颜色、换字体，瞬间看到结果。

第六步：添加图片
一个只有文字的 Hero 区域有些单调。我们来加一张配图。

再次选中 Container，点击 + 添加，选择 Image（图片）。
默认情况下，Bricks 会让你从 WordPress 媒体库中选择图片。你可以上传一张你电脑上的图片，或者使用一张示例图片。
在 Style 标签中，你可以设置图片的宽度（Width），比如设为 80% 让它不占满整个 Container。设置 Margin Top（上边距） 为 30px，让图片和按钮之间有空隙。

现在你的 Hero 区域已经有一个完整的结构了：背景色 + 标题 + 副标题 + 按钮 + 图片。从顶部到底部层次分明。这就是一个页面 Section 的基础构成。
第七步：保存和预览
做了这么多，别忘了保存。

按下 Cmd + S（Mac）或 Ctrl + S（Windows）—— Bricks Builder 会自动保存草稿。
在编辑器右上角，你会看到一个 Save（保存） 下拉按钮。点击它：

Save Draft（保存草稿）——仅保存，不发布
Publish（发布）——保存并发布页面，访客可以看到


点击 Preview（预览） 按钮，可以新开一个窗口查看页面的真实效果。
点击 × 关闭 按钮退出编辑器，回到 WordPress 后台页面列表。你会看到刚才创建的页面已经在列表中了。


📌 关于发布
别担心”做好之前就被看到了”。除非你点击 Publish，否则访客看不到你的页面。草稿只有你自己能看到。你完全可以反复修改到满意再发布。

第八步：添加更多 Section 丰富页面
一个真实的网站不可能只有一个 Section。现在你已经知道怎么创建一个 Hero 区域了，重复这个过程来搭建其他部分：
添加”功能介绍”区域

再加一个新的 Section（不需要背景色，保持白色）
在里面加一个 Heading，写”为什么选择可视化建站”
加三个 Text 元素，分别写三个优势：所见即所得、自己就能改、代码干净速度快
分别调整间距和对齐，让三个优势均匀排列

添加”关于我们”区域

再加一个 Section，设置浅灰色背景
左侧放一张图片，右侧放介绍文字和按钮
使用 Flex 布局——在 Bricks 中选择 Container 的 Display: Flex，然后设置方向为 Row，两个子元素就会左右排列

添加”联系我们”区域

最后一个 Section，深色背景
居中标题 + 一段文字 + 微信二维码或联系方式


💡 持续搭建的技巧
你不需要一次性做完所有 Section。建站是一个迭代的过程——先搭框架，再逐步填充和优化。很多客户一开始只确定了首页的大致结构，后面随着思路清晰逐步完善。

第九步：为不同设备调整显示效果
网站在不同设备上（电脑、平板、手机）的显示效果需要分别调整。Bricks Builder 提供了一个很方便的功能来做这个。

在编辑器顶部工具栏中，你会看到一个 设备切换按钮——图标是一个电脑屏幕或手机。点击它可以选择查看：Desktop（桌面）、Tablet（平板）、Mobile（手机）。
切换到 Mobile，你会看到页面以手机宽度显示。这时候很可能会发现：

标题太大了，手机上显示不下——选中标题，在 Style 标签中调整字体大小为手机端单独设置一个值
按钮太宽了——调整按钮宽度为自动或 100%
间距太大或太小——调整 Padding 和 Margin


Bricks Builder 会自动记住你在不同设备下的设置。你设了手机端的字体大小为 28px，它不会影响电脑端的 48px——两者是独立的。


📱 为什么要做响应式？
2026 年，超过 60% 的网站流量来自手机端。如果手机上看你的网站字太小、按钮点不到、布局乱掉——访客会在 3 秒内关掉。Bricks Builder 的独立断点编辑让这件事变得简单。

第十步：发布并测试
当你对页面的电脑端和手机端效果都满意了：

点击 Publish（发布）——你的第一个 Bricks Builder 页面就正式上线了
在浏览器中打开这个页面的链接，从头到尾看一遍
用手机打开同样的链接，检查手机端效果
如果发现哪里不对，回到 Bricks 编辑器中修改，再更新

这就是用 Bricks Builder 建站的核心流程。从创建 Section → 添加元素 → 调整样式 → 响应式适配 → 发布。任何一个页面都跑不出这个流程。
进阶提示：接下来可以尝试什么？
当你完成了第一个页面，可以尝试以下几个方向来继续学习：

模板（Templates） — Bricks Builder 允许你把做好的 Section 保存为模板，以后任何页面都可以直接复用。这样你就不用每次都从头搭建了。
全局颜色（Global Colors） — 在 Bricks Builder 的设置中定义好品牌色和字体，之后所有页面都可以一键调用，保持风格统一。
ACSS 框架（Automatic.css） — 一个基于 CSS 类的框架，配合 Bricks Builder 使用可以极大提升建站效率。它能帮你通过类名就搞定间距、颜色、排版，不用手动设置每个元素的样式。
弹窗（Popup） — Bricks Builder 内置了弹窗功能，可以用来做优惠弹窗、表单弹出等。
条件显示（Conditions） — 你可以设置在什么条件下显示什么内容（比如”只在手机端显示这个按钮”），非常灵活。

常见问题
Bricks Builder 和 Elementor 哪个好？
Elementor 用户多、模板丰富，对纯新手来说上手门槛更低。但 Elementor 的代码比较重，生成的页面经常有多余的 div 嵌套。Bricks Builder 代码更干净，页面加载速度更快，对 SEO 更友好。如果你在意网站性能和代码质量，Bricks 是更好的选择。
Bricks Builder 免费吗？
Bricks Builder 是付费主题，一次性授权约 $79（约 550 人民币）。相比 Elementor Pro 每年 $59 的订阅制，Bricks 是一次付费终身使用，长期来看更划算。而且用我帮您建站的话，这个费用已包含在套餐中。
用 Bricks Builder 做的网站，以后能换成别的主题吗？
换主题会影响页面样式，因为不同主题的 HTML 结构和 CSS 类名不同。所以建议：确定用 Bricks Builder 就持续用它。Bricks Builder 本身也是长期更新维护的成熟产品，不存在”被迫换主题”的情况。
Bricks Builder 支持中文排版吗？
完全支持。字体设置中可以自由选用中文字体。配合 Google Fonts 里的 Noto Sans SC（思源黑体），中英文混合排版效果很好。