如果我跟你说，从零开始搭建一个像样的企业官网首页只要 30 分钟，而且全程不用写代码——你可能会怀疑。
但只要你有一个装好 WordPress 的网站，再加上 Bricks Builder，这件事真的就是“拖拖拽拽 + 改字换图”。
这篇文章会带你一步一步，用 Bricks Builder 在 WordPress 上搭出一套标准企业首页框架。
做完之后，你可以根据自己公司情况把文案和图片替换进去，一个可用的官网首页就有了。
前提：你已经有一个安装了 WordPress 的网站，并且 Bricks Builder 已经激活。
如果还没有，可以先看一遍我之前写的 Bricks Builder 入门教程，先把环境搭好。
准备工作：先把“首页要说什么”想清楚（约 5 分钟）
在打开编辑器之前，先别急着拖元素。
一个标准的企业首页，大概会包含这些模块：
- 顶部导航（Logo + 菜单）
- Hero 区域（大标题 + 副标题 + 行动按钮）
- 服务 / 产品介绍（3 个核心业务卡片）
- 为什么选择我们（突出优势和信任元素）
- 关于我们简版（加一个联系/了解更多按钮）
- 页脚（联系方式 + 版权信息）
先准备好这些素材，会让你后面搭建快很多：
- 公司 Logo（建议 PNG 或 SVG）
- 3–5 张和业务相关的图片（提前压缩好）
- 一段 200–300 字的公司核心介绍文案
- 联系方式（电话、邮箱、微信、地址等）
有了这些，你等于是先把“要说什么”想好了，后面只是“怎么排版”的问题。
第一步：新建页面并打开 Bricks 编辑器（约 2 分钟）
- 登录 WordPress 后台
- 左侧菜单点击「页面」→「新建页面」
- 给这个页面起一个标题，比如“首页”
- 在编辑界面上方，点击蓝色按钮「用 Bricks 编辑」
页面刷新后，你会进入 Bricks 的可视化编辑界面：
- 左侧是设置面板（添加元素、改样式都在这里）
- 右侧是实时预览（你看到的就是访客看到的页面）
第二步：搭一个有气势的 Hero 区域（约 8 分钟）
Hero 区就是首页打开后第一屏的大图区，是给访客的第一印象。
1）添加 Section 做背景
- 在左侧面板顶部点击「+ 添加」
- 从元素列表中选择「Section」
- 你会在右侧看到一个横向区域，这就是一个 Section
设置一下风格：
- 点击这个 Section，在左侧找到 Background（背景）
- 选一个深色背景，比如深蓝或深灰
- 在 Size（尺寸）里，把最小高度（Min-Height）设为
100vh，让它占满一屏高度
2）添加标题、说明文字和按钮
- 点击 Section 里的 Container（中间那块内容区域）
- 点击「+ 添加」，依次加入：
- 一个 Heading（标题）
- 一个 Text（文本）
- 一个 Button（按钮）
内容示例：
- 标题可以写：
“专业的企业网站，从可视化建站开始” - 副标题可以写：
“Bricks Builder 拖拽操作，所见即所得。不需要代码，建完你自己就能改。” - 按钮文字可以写：
“了解建站套餐”
链接指向你的价格页，例如/pricing/
样式建议：
- 把标题、文字和按钮都居中对齐
- 颜色统一设成白色或浅色，与深色背景形成对比
- 标题字号适当放大（比如 36–48px），副标题略小
做到这一步，你已经有了一个完整的一屏 Hero 区：
大标题 + 简短说明 + 一个明确的行动按钮。
第三步：添加“我们的服务”模块（约 6 分钟）
Hero 区下面，通常是“你能帮客户做什么”。
- 在 Hero Section 下方，再添加一个新的 Section
- 选中这个新 Section 里的 Container
- 添加一个 Heading：
- 文案可以写：“我们的服务” 或 “我们可以帮你做什么”
接着，用卡片形式列出 3 项核心服务：
- 在同一个 Container 里，添加一个支持多列布局的元素（比如 Bricks 的 List 或自己用三个子 Container 平铺）
- 设置为 3 列布局
- 在每一列里放：
- 一个小标题（例如“企业官网建设”“外贸网站搭建”“着陆页搭建”）
- 一段简短描述（1–3 句，说明解决什么问题）
调整一下：
- 控制每个卡片之间的间距，让它们视觉上均匀排布
- 如果有图标，也可以在每个小标题前加一个 Icon，让区块更有辨识度
第四步：添加“为什么选择我们”+ 行动按钮（约 5 分钟）
这一块是用来回答潜在客户心里的问题：
“为什么要选你，而不是别人？”
- 再添加一个新的 Section
- 设置一个很浅的灰色背景，让这块区域和上面内容区分开
- 在 Container 里添加一个 Heading：
- 比如写：“为什么选择我们”
下面可以放 2–3 个关键点，可以是：
- 服务过的企业数量、行业经验
- 价格透明 / 可视化建站 / 自己可维护等优势
- 客户评价或核心卖点
写法示例：
- “服务 20+ 行业中小企业，熟悉 B2B 官网需求”
- “¥1999 起，一次性价格，后续你自己就能改”
- “用 Bricks 可视化建站，代码干净、加载快速、对 SEO 友好”
在区域底部，再加一个按钮，做一个“行动引导”：
- 按钮文字可以写：“发参考站聊聊” 或 “获取建站方案”
- 链接指向你的联系页面，比如
/contact/
这一块的目标是：
看完后，访客至少觉得——“这家公司有自己的方法论，值得聊聊。”
第五步：保存、预览、发布（约 4 分钟）
做到这里，一个基本的企业首页骨架已经搭好了。
现在把这半小时的成果整理一下：
- 在 Bricks 编辑器里点击左上角“保存”，或按
Ctrl+S/Cmd+S - 点击预览按钮，在新标签页中打开页面
- 检查：
- 标题和文字有没有错别字？
- 按钮点击是否跳转到正确页面？
- 在手机宽度下，排版会不会挤在一起？
如果手机端有问题，可以在 Bricks 顶部切换到 Mobile 视图，把：
- 标题字号单独调小一点
- 按钮宽度和间距微调一下
确认没问题以后，回到编辑器，点击「发布」。
到这里，一个从零开始的企业官网首页，就在大约 30 分钟内完成上线了。
后面你可以怎么继续完善？
这 30 分钟搭出来的是一个“框架版”的首页。接下来，可以按优先级一点点加内容：
- 补充“关于我们”简短介绍区，再加一个“查看更多”按钮跳到独立的关于页面
- 添加客户案例或 Logo 展示区，增强信任感
- 在页脚补全联系方式、公司信息、备案号等内容
- 配合表单插件加上“获取报价 / 留言咨询”入口
好处是：
- 骨架已经有了，后面所有调整都是“在现有结构上加东西”，不会推倒重来
- 你随时都可以回到 Bricks 编辑器里，点着文字、图片直接改
真的不用写代码吗？
是的，上面所有步骤都只涉及：
- 拖 Section / Container / 元素
- 在左侧面板里改文字、改样式
- 点几下保存和发布
你不需要：
- 写 HTML / CSS / JS
- 配置复杂的模板文件
这也是为什么我一直强调：
对大多数企业官网需求来说，可视化建站已经完全够用。
如果你愿意自己动手，这套流程就是一个你可以反复使用的模板；
如果你不想自己搭框架，也可以把这篇文章当成一个“验收清单”，
看看帮你做站的人，是否至少帮你把这些首页核心模块搭扎实了。
学会这 30 分钟的流程之后，你会发现：
做网站这件事，其实没有你想象中那么神秘。真正花时间的往往不是“搭页面”，而是想清楚“你要在这个页面上说什么”。