我们的 Beaver Builder 插件可帮助您使用模板和模块构建完整的网站。 但是，有时您可能想进一步自定义您的网站。 使用 Beaver Builder 短代码，您可以在模块、页眉、页脚和侧边栏中添加额外的内容。

在这篇文章中，我们将介绍 Beaver Builder 短代码并向您展示如何将它们插入到您的内容中。 我们还将探讨一些可以增强您网站设计的示例。 让我们跳进去！

Beaver Builder 简码简介

如果您以前使用过 WordPress 网站，您可能已经熟悉短代码。 这些是向您的网站添加功能的小段代码。

无需使用代码编辑器在 HTML 中编写所有内容，您只需将短代码插入页面即可。 这将具有对应于 Beaver Builder 元素（如模块、行或列）的 slug 或 ID。 您还可以为帖子、页面或布局模板使用简码。

在此示例中，我们将保存的行添加到 HTML 模块：

当我们点击Save时，Beaver Builder 会自动将短代码转换为它对应的已保存行：

稍后在帖子中，我们将向您展示如何在编辑器中添加短代码。 现在，让我们讨论使用 Beaver Builder 短代码的好处。

简码可以方便地将视觉元素添加到基于文本的区域。 例如，您可以创建定价模块并使用简码添加产品照片。 这样，您将不需要使用两个单独的模块（定价和照片），因为它们将被合并：

短代码还使您能够在使用 WordPress 块编辑器时将 Beaver Builder 元素插入到您的内容中。 这意味着您无需切换到 Beaver Builder 编辑器即可添加模块、行或列。

您可以将简码添加到任何带有文本字段的 Beaver Builder 模块，包括：

• HTML
• 文本
• 标题
• 大喊
• 图标
• 标签

但是，添加太多短代码可能并不明智。 这可能会增加加载时间，因为服务器必须为每个短代码请求 CSS 和 Javascript 文件。 我们建议每页最多使用两个。

5 个有用的 Beaver Builder 简码示例

Beaver Builder 短代码有很多用例。 让我们看一些有用的例子。

1. 定价表中的号召性用语按钮

假设您在登录页面或销售页面上有一个包含多个产品选项的定价表。 您可以只列出价格，然后引导客户使用页面底部的按钮结帐。 但是，用户需要进一步向下滚动，这可能会损害用户体验 (UX)。

相反，您可以创建一个号召性用语 (CTA) 按钮来提示客户购买产品。 这将直接链接到结帐页面，因此客户无需进一步导航。 然后，您可以使用简码将此按钮添加到定价表中：

请记住自定义 CTA 按钮以匹配您的视觉品牌。

2.选项卡中的联系表

如果您有一个商业网站，您可以在“关于”部分添加一些标签。 这样，用户无需向下滚动页面即可了解有关您公司的更多信息。

假设您还希望潜在客户在完成阅读后立即就您的服务与您联系。 用户已经花时间在您的标签之间切换。 将他们引导到别处可以给他们额外的几秒钟时间来重新考虑他们伸出援手的决定。

相反，您可以使用简码将联系表单添加到您的选项卡之一：

就这么容易！ 现在客户无需离开页面即可与您联系。

3. 文本框中的图像

在构建页面时，您可能更喜欢将图像和文本添加到单个模块中。 虽然您可以使用两个单独的模块，但内容会被拆分，您将无法将图片放在文本中间。

结合文本和图像是在您的在线商店中展示产品的有效方式。 例如，您可以在定价框模块中添加图片以展示不同的产品功能：

从理论上讲，您可以将相同的布局与不同的模块堆叠在一起。 但是，使用图像简码可以加快设计过程。

4.块编辑器中的任何模块

使用块编辑器时，您还可以使用 Beaver Builder 短代码。 如果您正在撰写博客文章并希望在文章中添加交互式元素，这可能会特别方便。

您可以轻松地将 Beaver Builder 模块拖放到页面中，而无需离开块编辑器。 只需插入一个简码块并将您的代码粘贴到其中：

发布帖子后，短代码将在前端显示内容：

例如，您可以插入联系表单模块。 您还可以添加将客户引导至您的商店的号召性用语，或添加商店位置的嵌入式地图。

5. 日期（仅限 Beaver Builder 主题）

我们的 Beaver Builder 主题带有自定义日期短代码。 这会在页面的任何部分显示当前日期，包括页眉、页脚和侧边栏：

如果您运行新闻网站，此短代码可能会很方便。 您可以使用以下任何简码添加日期：

您可能还想在页脚的版权信息旁边使用此短代码。 这样，您可以确保它始终是最新的。

如何使用 Beaver Builder 添加简码（分 2 步）

我们刚刚介绍了 Beaver Builder 短代码可以加快和简化您的设计过程的几种情况。 现在，让我们看看如何将它们添加到您的站点：

第 1 步：创建您的简码

您的网站上没有简码。 您首先需要保存 Beaver Builder 元素，然后才能将它们作为简码插入。 这些要素可能包括：

• 模块
• 行
• 列
• 模板

例如，假设您要设计一个自定义联系表单模块。 您可以通过导航到Beaver Builder > Saved Modules > Add New来做到这一点：

然后系统会提示您命名模块并选择其类型：

单击添加保存的模块。 在下一页上，选择Launch Beaver Builder以访问编辑器。 在这里，您可以根据自己的喜好自定义联系表格：

准备好后，请确保发布您的模块。 它现在将显示在您的已保存模块页面上。 如果您使用的是最新版本的 Beaver Builder，您将能够看到自动生成的简码：

如果看不到ShortCode列，则需要手动创建代码。 为此，您需要模块的 slug。

如果单击模块下方的编辑按钮，您应该能够查看其 slug。 如果看不到它，请打开Screen Options菜单并勾选Slug旁边的框：

现在您可以使用以下代码为此模块创建一个简码：

 [fl_builder_insert_layout slug="my-post-slug"]

请记住将“my-post-slug”替换为 Beaver Builder 模块的 slug。 在我们的示例中，它将如下所示：

 [fl_builder_insert_layout slug="contact-form"]

就是这样——您现在知道如何为 Beaver Builder 模块创建简码。

第 2 步：将简码插入您的页面

最后一步是将短代码添加到您的页面。 在大多数情况下，此过程将涉及将代码段粘贴到模块的文本字段中。

这是我们之前的定价表示例。 如您所见，我们在功能 5文本框中添加了 CTA 按钮的简码：

由于 Beaver Builder 使用前端编辑器，您将能够立即看到您保存的模块。 在某些情况下（例如使用 HTML 模块时），您可能需要在短代码转换为可视元素之前保存更改。

结论

Beaver Builder 短代码使您能够将保存的模块、行、列或布局快速添加到页面的不同部分。 您可以使用它们来加快设计过程并创建漂亮的 WordPress 页面。

回顾一下，您可以按照以下简单步骤使用 Beaver Builder 短代码：

1. 保存一个元素（模块、行、列或布局）并查找它的简码或 slug。
2. 将简码插入 Beaver Builder 模块中的文本字段或块编辑器中的简码块。

您准备好开始为您的网站创建令人惊叹的页面了吗？ 查看 Beaver Builder 用户友好功能的完整列表！

相关问题

Beaver Builder 是否使用简码？

Beaver Builder 为已保存的元素（如模块、行、列和模板）提供简码。 然后，您可以将这些片段添加到基于文本的字段和模块中。 这在 Beaver Builder 前端编辑器和 WordPress 块编辑器中都是可能的。 此外，短代码使您可以将其他喜欢的插件与 Beaver Builder 一起使用。

您需要 Beaver Builder 主题来使用简码吗？

您不需要官方 Beaver Builder 主题即可使用简码。 您可以使用页面构建器插件构建页面并添加具有大多数主题的短代码。 但是，某些简码（例如 Date 简码）仅适用于 Beaver Builder 主题。

Beaver Builder 和 Beaver Themer 有什么区别？

Beaver Builder 是一种页面构建工具，可让您使用模块和模板编辑页面和帖子的内容区域。 相比之下，Beaver Themer 是一个附加插件，可让您编辑站点中通常由主题控制的区域，例如页眉、页脚和侧边栏。 此内容包括主题模板、模板部分和帖子网格。