我們的 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 是一個附加插件，可讓您編輯站點中通常由主題控制的區域，例如頁眉、頁腳和側邊欄。 此內容包括主題模板、模板部分和帖子網格。