本文由 Puneet Sahalot 撰写。
如果你想自己搭建网站，着陆页是一个不错的起点。使用 WordPress，你有很多选择。我们之前也列出过一些方法（这里）。但从那以后，我们看到了构建插件和无代码网站搭建领域的很多发展。今天让我们来探索其中的一些。
你即将阅读的是一篇关于如何用 Beaver Builder + 我们的 Hestia 主题 + 名为 Beaver Builder PowerPack 插件构建一个漂亮的着陆页的实践教程，这些都是免费产品（我们使用的是"Lite"版本）。
正如许多人所说，最好的部分是你不需要任何编码知识就能完成这个任务。
以下是 Puneet Sahalot 讲解的整个过程：
如何使用 WordPress 和 Beaver Builder 免费搭建着陆页
搭建一个着陆页甚至搭建整个网站 在当今时代并不困难。Beaver Builder 就是这样一个非常强大的工具。这个拖放式工具易于使用，即使是初学者也能在几分钟内创建一个完整的着陆页。
然而，虽然 Beaver Builder 确实有一些优秀的功能，但其中很多功能在免费版本中是有限制的。因此，为了弥补这一点，我们将使用一个额外的插件——Beaver Builder PowerPack 插件。这个工具通过添加更多模块和页面模板来增强 Beaver Builder 的功能。
此外，我们将在本文中使用 Hestia 主题来用 WordPress 搭建着陆页。
这是一个设计精美的主题，提供很好的自定义功能，特别是在头部和网站导航区域——这将在后面非常有用。
到本文结束时：
- 你将对 Beaver Builder 有很好的了解，
- 你将知道如何将它与 Hestia 主题以及任何其他你可能使用的主题结合使用，
- 你将能够创建一个极具吸引力的着陆页，
- 你将了解诸如 Beaver Builder PowerPack 插件之类的新强大工具。
现在，对于这个关于如何使用 WordPress 搭建着陆页的教程，我将使用所有三个产品（Hestia、Beaver Builder 和 Beaver Builder PowerPack 插件）的免费版本。
我们具体要搭建什么
在开始之前，让我们先确认一下我们要用 Beaver Builder 创建的是什么，确保我们在同一认知上。
我们的主要目标是创建一个与 WPBeaverAddons.com 尽可能相似的网站——这是 Beaver Builder PowerPack 插件的主页，我是其中的一员。我相信这个设计是通用的，它有足够的独立元素来教育我们如何有效地使用 Beaver Builder。当然，我们正在搭建的设计是通用的，所以你可以继续将其用于任何类型的产品或服务。
以下是最终结果：
如果你愿意的话，可以轻松地更改页面，而且最棒的是你不需要修改任何代码。
需要的工具及获取途径
我们将使用以下工具来制作这个着陆页：
我们或许可以使用上述三款专业版本来创建更丰富的着陆页。但是，我想让你在这些工具的强大功能被强制要求花钱才能使用之前先掌握它们，所以我觉得使用免费版本会是最佳选择。
了解 Beaver Builder
在我们开始制作页面之前，先来了解一些基础知识。以下是 Beaver Builder 如何组织页面内容的方式：
a) 行
行用于构建页面的布局。每个行可以分成多个列，然后可以在这些列中添加不同的元素（模块）。
如何添加和修改行：
- 第一步： 点击 添加内容 按钮，然后点击 行布局 按钮。
- 第二步： 将行拖放到页面上。
- 第三步： 完成后，点击角落处的小扳手图标。这将允许你编辑行的设置，如宽度、高度、响应式设计、背景等。
b) 模块
模块是页面本身的构建块。它们是你拖放到页面上的元素。它们可以是任何东西，包括标题、文本、图片、轮播图、计时器等等。
如何添加和修改模块：
- 第一步： 点击 添加内容 按钮，然后点击模块选项。
- 第二步： 将模块拖放到页面上。
- 第三步： 完成后，模块设置会出现。这将允许你编辑给定模块的设置。设置窗口因模块而异。
这就是使用 Beaver Builder 的基本操作。很简单，对吧？
准备工作
由于我们要用 WordPress 和 Beaver Builder 来构建一个着陆页，而且假设这是你第一次使用后者，让我们来学习如何启动 Beaver Builder 并启用全宽模板。
首先，从仪表盘点击 添加新页面：
现在，给你的页面起一个名字，然后在 页面属性 下，选择 Page Builder Full Width 作为模板。然后，点击 Page Builder 按钮来激活 Beaver：
我们选择 Page Builder Full Width 作为模板的原因是，全宽通常是标准着陆页的最佳布局类型。侧边栏往往会分散用户对主要内容的注意力，我们不希望在我们的着陆页上发生这种情况。
让我们开始吧！
在这里，我将一步步向你展示如何完整地使用 WordPress 和 Beaver Builder 构建一个着陆页，如果结合 PowerPack 使用效果更佳。不过，如果你更愿意从预先设计好的着陆页开始，你可以使用 Beaver Builder 专业版来获取一个。这样可能会节省你一些时间。
为了获取更多页面模板，你还可以购买 Beaver Builder PowerPack Addon Pro。其中有超过 250 个模板。如果你感兴趣的话，查看完整列表。
第一步：首屏区域
首先，我们需要在页面顶部放置一个单列行。
只需拖放列即可开始。
我已将布局改为 全宽（我们将对所有行都这样做）。
现在介绍背景；将背景选项从 none 改为 gradient 并选择您的颜色。点击 save 保存更改：
接下来，我们需要一个标题。为此，请从 PowerPack 模块中添加一个 Smart Heading Module。请在相应的字段中输入标题和副标题。根据您的意愿更改排版。完成后点击 save：
现在，我们需要按钮。让我们通过 Dual Buttons Module 来获取它们。请添加它们。在此期间，更改按钮上的标签，然后在文本后添加所需的图标。对两个按钮都要这样做。
现在，进入 Style 选项卡，更改两个按钮的 Background color、Hover color 和 Border color。
我为按钮设置了不同的颜色，以便第一个按钮能吸引更多注意力。如果需要，您可以进入 Typography 选项卡更改字体。
每个 伟大的英雄区域都需要一张图片，为此，添加 Picture Module 并从图库中选择一张图片。调整边距，使图片底部正好位于行布局的顶部。完成后，点击 save：
这是结果 – 我们的顶部英雄区域：
您可能也有兴趣：
- 15+ Best Programming Fonts for Coding and Development in 2025 (Free!)
- JavaScript Modules (ES6 Modules) Explained: Tutorial for Beginners
- Beginner's Guide to CSS Variables (aka CSS Custom Properties)
Step 2: 功能区域
对于功能区域，我们将使用 Info Box Module。但在此之前，我们需要先创建行布局。
添加 3×4 行布局矩阵
选择 3 column row layout 并将其拖放到英雄区域下方。将宽度更改为 full width，就像我们之前做的那样，然后点击 save。
现在，您有一个 3×1 矩阵。要使其成为 3×4 矩阵，请点击复制图标（位于扳手图标的左侧）三次。这将复制具有相同属性的行，并创建一个 3×4 矩阵。就像这个：
现在，在每列中添加 Info Box Module。当设置显示时，为该框提供合适的标题和描述。此外，如果您发现在标题顶部想要一个图标，您可以直接从列表中选择一个图标。可选地，进入排版选项卡并更改标题文本的颜色。完成更改后，点击 save 按钮：
只需对所有其他列重复这些步骤，并相应更改详细信息。这就是功能区域完成后的样子：
第三步：评价部分
对于评价部分，用相同的方法添加另一行，并将这一行也设为全宽。
在行中添加一个图片模块，选择所需的图片。点击裁剪选项，从列表中选择圆形选项。将图片居中对齐，并调整到缩略图大小。完成后，点击保存：
现在添加评价：
- 在图片下方添加一个文本编辑器模块，
- 添加评价星级图片，
- 添加评论内容，
- 将所有内容居中对齐。
完成后，点击保存按钮：
接下来，在文本编辑器下方添加一个双列布局的行。
- 在第一列中，添加一个文本编辑器，输入一些关于/来自客户的文字。
- 在第二列中，添加一个图片模块，放入您最知名客户的标志。相应地调整列宽：
这是最终效果——我们的客户评价部分：
第四步：模板部分
这与之前我们制作的英雄区域基本相同。它包含一个智能标题、双按钮和底部的图片。行的背景也设置为渐变——与前面的一样。
因此，为了简化操作，我们可以复制英雄区域，然后只需更改文本、图片和按钮属性即可。
这是最终效果：
第五步：FAQ 部分
首先添加另一个行布局，并将宽度改为全宽。
在行顶部添加一个智能标题模块，相应地更改标题和副标题：
对于常见问题，折叠模块本是最佳选择，但由于免费版中没有这个模块，我们将使用信息框模块来代替。
在标题下方拖放一个双列布局，并将其也设为全宽。通过点击复制按钮多次复制它。
在列中添加一个信息框，在描述框中输入单个 FAQ 项的问题和答案：
将对齐方式改为左对齐，您就拥有了一个完美的 FAQ 框。对所有列重复这些步骤。
这是最终效果：
第六步：行动号召面板
对于最后的行动号召部分，首先插入另一个双列行，并将其设置为全宽。
在第一列中，添加一个智能标题模块，输入您的文本。对排版进行必要的更改，完成后点击保存：
添加另一个双按钮模块，根据需要更改按钮的标题和样式。完成后，点击保存按钮：
接下来，在右侧列中添加一个图片模块。在设置菜单中，选择图片并更改边距和填充值，使其与该行完美契合。完成后，点击保存：
这是我们的行动号召模块的效果：
最后一步：在 Hestia 中更改头部图片和菜单
此时，还剩一个任务需要完成，那就是自定义 Hestia 中的默认头部。请按照以下步骤操作：
- 打开主题自定义器并进入站点标识部分。
- 进入菜单部分，选择你希望在头部显示的菜单。
然后……就完成了！
恭喜，你刚刚为你的 WordPress 网站构建了一个功能完整的着陆页，没有编写一行代码！
我们最终完成的着陆页是这样的：
你的着陆页怎么样？在下方评论中分享你构建的设计！我希望你喜欢这个关于如何用 WordPress 构建着陆页的教程，并从中有所收获。
关于作者：Puneet Sahalot 是 PowerPack Beaver Addons 的创始人兼 IdeaBox Creations 的首席执行官。他喜欢与 WordPress 合作，喜欢与他的团队一起构建有趣的 WordPress 插件 和网站。
布局和展示由 Karol K. 完成。
