如何使用Bricks Builder搭建WordPress網站

即使你是初學者，建立 WordPress 網站也並非難事。只要有正確的工具和指導，你就能快速建立並執行一個美觀、功能齊全的網站。

本指南將向你展示如何使用 Bricks Builder 構建 WordPress 網站，這是一款功能強大的主題生成器，無需編寫任何程式碼即可提供廣泛的自定義功能。

Bricks Builder 概述

Bricks Builder 是一款視覺化網站生成器，允許使用者直接在 WordPress 環境中建立自定義的響應式網站。它與 WordPress 無縫整合，旨在增強使用者體驗，使初學者和有經驗的開發人員都能通過拖放介面視覺化地構建網站。

與 Elementor 和其他建站工具不同，Bricks 是一個主題，而不是外掛。它幾乎整合了所有功能，而其他建站工具需要使用額外的外掛。

它具有實時前端編輯體驗，這意味著你可以在調整設計元素和佈局時實時看到自己的變化。

Bricks 實時前端編輯介面

它提供了一個全面的工具包，包括預設計模板、大量設計元素和高階定製選項，可用於更詳細的網站開發。

此外，Bricks Builder 還支援動態資料，允許使用者輕鬆建立資料驅動型網站，並在模板中動態整合內容。

使用 WordPress Bricks 的好處

Bricks Builder 以其效能和靈活性脫穎而出。與其他生成器相比，它是一種更新但強大的替代方案，可提供以下功能：

• 速度 – Bricks 的速度快得令人難以置信，而且非常輕便。
• 易用性 – 介面直觀，初學者和專業人士都能輕鬆使用。
• 自定義 – Bricks 可通過自定義 CSS 和 JavaScript 提供廣泛的自定義功能，並與各種 WordPress 外掛相容。

開始使用 Bricks

Bricks 是一款需要付費訂閱的高階主題。要使用它，您需要購買其中一個計劃。付款後，您可以在儀表板上下載一個 zip 檔案，該檔案可以上傳到您的 WordPress 網站，同時還有一個許可證金鑰，可以在您的 WordPress 安裝中啟用 Bricks。

下載 Bricks 主題。

安裝 Bricks 主題後，WordPress 面板上會出現一個新的 Bricks 選單項。

要啟用許可證，請進入儀表板，點選 Activate license，輸入 Bricks 賬戶中的許可證金鑰，然後點選 Activate。這將啟用 Bricks 主題的全部功能。

配置 Bricks 主題許可證以啟用主題。

如果您想在購買前試用 Bricks，可以在 try.bricksbuilder.io 上建立試用賬戶。該平臺提供了一個安裝了 Bricks 的預配置 WordPress 網站，讓您可以免費探索其特性和功能。

歡迎來到 Bricks WordPress 儀表板介面。

如何啟動 Bricks 頁面生成器

要使用磚塊頁面生成器設計一個新頁面，請導航至頁面 > 新頁面或單擊現有頁面。點選 “Edit with Bricks“，即可啟動 Bricks 編輯器。

單擊 “Edit with Bricks” 啟動 Bricks 頁面生成器。

現在，你可以從 Elements panel（元素面板）拖動元素來設計頁面。

瞭解 Bricks 介面

Bricks 介面與 WordPress 環境無縫整合。

給 Bricks 介面貼上標籤，瞭解每個部分的含義。

以下是其核心介面的細分：

• Builder workspace（生成器工作區）– Bricks 的主要區域是生成器工作區，它是網站的視覺化呈現。在這裡，你可以直接與頁面互動，拖動元素到位、調整大小和重新排列元件。
• Toolbar（工具欄）– 在工作區的頂部，工具欄可以快速訪問基本功能，如儲存工作、預覽網站、訪問設定選單和響應控制元件。
• Elements panel（元素面板）– 在介面左側，元素面板是你的工具箱。它包含了你可以在網站上使用的所有構件，如文字框、圖片、按鈕等。你可以將這些元素直接從面板拖到頁面上。
• Structure view（結構檢視）– 結構檢視通常位於元素面板旁邊或作為元素面板內的一個切換項，它提供了頁面的層次輪廓。該檢視對於瞭解頁面元素的佈局和深度特別有用，可以讓你輕鬆選擇和編輯巢狀項。

在 Bricks 中使用自定義字型

Bricks 提供了令人興奮的功能，允許您將自定義字型上傳到 WordPress 網站。為此，請導航至 Bricks > Custom Fonts。

在 Bricks 中使用自定義字型。

本部分允許您上傳各種格式的字型檔案，包括 WOFF2、WOFF 或 TTF。您還可以上傳不同的字型變體，例如細體、半粗體、正常字型和粗體。

要新增自定義字型，請單擊 Add New。然後，在 Add title 欄位中輸入字型名稱。接著，選擇要上傳的字型變體，選擇字型樣式，然後單擊 Edit。

新增字型詳細資訊並上傳不同的字型變體。

將出現一個下拉選單，提供用於上傳字型檔案的欄位。選擇字型檔案並上傳。您可以通過單擊 Add a font variant 來重複此過程，以獲得儘可能多的變體。最後，單擊 “Publish“。

Bricks 自定義字型頁面。

要將新上傳的自定義字型應用到 WordPress 網站上的文字，請按照以下步驟操作：

1. 轉到要使用新字型的頁面，然後單擊 “Edit with Bricks“。
2. 單擊要更改的文字。
3. 所選文字的相關資訊將顯示在左側面板中。單擊樣式。
4. 展開 “TYPOGRAPHY” 下拉選單，檢視更多選項。
5. 在 Font family 欄位中，瀏覽可用字型，包括 Google 字型和自定義上傳字型。
6. 從列表中選擇自定義字型，立即更新文字。

現在，您的文字將使用自定義字型顯示，為您的頁面增添個性化氣息。

在 Bricks 介面中使用 Bricks 自定義字型。

在 Bricks 中使用模板

模板是 Bricks 中的一項基本功能，有多種型別，包括頁首、頁尾和部落格文章佈局。這些模板的範圍從單一部分（如網站頁首或英雄部分）到全頁面內容（如部落格文章佈局、存檔頁面、搜尋結果和錯誤頁面）。

建立模板

要建立建立模板：

1. 導航至儀表板中的 “Bricks“>”Templates“。
2. 選擇新增新模板或匯入現有模板。
3. 單擊Add New，選擇模板型別，然後選擇Edit with Bricks。如下圖所示：為您的 Bricks Builder 建立新模板。
   
    

應用模板

將模板應用到頁面：

1. 導航至要使用模板的頁面。
2. 單擊建立工具欄中的Templates （資料夾）圖示，開啟模板部分。如下圖所示：將模板應用到 Bricks 頁面。

   
    

3. 在這裡，您可以訪問自己建立的模板和社羣模板。
4. 選擇所需模板並預覽。如下圖所示：Bricks 模板商店 – 包含社羣、本地和遠端模板。
    
5. 最後點選 Insert 即可應用。如下圖所示：選擇並使用選定的社羣模板。  

遠端模板

Bricks 的模板具有其他建站工具所不具備的獨特功能。遠端模板是指你想在自己的網站中使用其他網站建立和使用的模板。

要允許其他網站使用你的 Bricks 模板，請進入 WordPress 面板中的 Bricks > Settings > Templates，然後啟用 My Templates Access 覈取方塊。

使用 Whitelist URLs 和 Password Protection，限制知道正確密碼的人員訪問模板。

允許其他網站使用你的 Bricks 模板作為遠端模板。

要使用其他網站的模板，請進入 Bricks > Settings > Templates，滾動到 Remote templates 部分，然後在 Remote template URL 欄位中貼上您要檢索模板的 Bricks 網站的 URL。

使用其他網站的遠端模板。

如果設定了密碼，必須確保將密碼寫在遠端模板 Password 下。然後單擊 Save Settings。

要使用這些模板，請導航到頁面生成器，然後像以前一樣單擊 Templates；將出現一個新的 Remote templates 部分，其中包含來自遠端站點的所有模板。

在 Bricks 中使用動態資料

Bricks 允許您在模板和頁面中加入動態資料，使其成為構建動態網站的多功能工具。

您可以加入各種動態元素，如特色圖片、文章標題、釋出日期、作者姓名、類別、標籤、網站標題和所有自定義欄位。

在 Bricks 中建立特定模板（如部落格文章模板或自定義文章型別模板，如單一房產列表）時，動態資料尤其有用。

要新增動態資料，請在畫布上開始鍵入 { 或單擊設定面板中大多數字段旁邊的 “螺栓” 圖示。

下面介紹如何使用 Bricks 動態資料建立單個文章模板：

1. 導航至 Bricks > Template，建立一個新模板。為模板指定標題，將其型別設為Single，然後Publish或Save as draft。
2. 單擊 “Edit with Bricks“，開始配置模板以使用動態資料。
3. 根據需要設計頁面樣式。通常情況下，你需要將文章標題、特色圖片、釋出日期、作者姓名和文章內容等元素全部設定為動態顯示。
4. 在空白頁面上，通過在 Heading 元素中插入 {post_title} 來新增標題和內容，在 Basic text 元素中插入 {post_content} 來新增標題和內容。如下圖所示：在 Bricks 中使用動態資料

    

要將此模板設定為所有帖子的預設模板，請：

1. 單擊工具欄中的設定圖示，轉到 Template Settings > Conditions，然後單擊 + ADD CONDITION 按鈕。
2. 選擇 Post type 並指定 Posts。如下圖所示：將模板設定為所有文章的預設設定。
    

   
    

3. 確保儲存並更新 WordPress 上的模板頁面。然後，導航到 “文章” 頁面，檢視每個文章的新模板格式，無需額外樣式。如下圖所示：模板用於所有文章。
    

    

為簡化該模板的樣式，請新增一個預設文章作為動態元素的參考：

1. 單擊工具欄上的設定圖示，轉到Template Settings > POPULATE CONTENT。
2. 選擇 Single post/page 作為內容型別，然後選擇一個特定的帖子作為模板內容。如果沒有出現，請確保搜尋一個，然後點選 APPLY PREVIEW。如下圖所示：新增預設文章作為動態元素的參考。
    

    

3. 現在您可以使用選定的模板文章輕鬆顯示文章標題和內容等元素。如下圖所示：使用動態資料定製頁面時，會顯示選定的預設文章。
    

此外，Bricks 還支援使用Advanced Custom Fields (ACF) 中的內容，從而增強了您建立詳細的定製頁面的能力。

使用 Bricks 處理表單提交

Bricks 1.9.2 引入了表單提交功能，允許您捕獲表單提交。這允許您在資料庫中建立一個名為 bricks_form_submissions 的自定義表（加上您的 WP 資料庫字首）。

您可以在 Bricks > Settings > General > Miscellaneous 下啟用新的 Save form submissions in database（在資料庫中儲存表單提交）設定。

使用 Bricks 處理表單提交。

然後點選 Save Settings。表單提交選項卡將出現（Bricks > Form Submissions），其中包含各種表單提交表。

收集表單提交

在 Bricks 中收集表單提交不需要額外的外掛。你只需使用 Form 元素建立一個表單，並正確設定欄位。

在 Bricks 頁面新增表單元素。

在設定面板中單擊 “Actions“，然後選擇 “Save Submission” 操作。

為 Bricks Form 元素設定儲存提交操作。

接下來，單擊 Save Submission 設定，為表單命名。該名稱將用於訪問表單中的資料。

為表單提交頁面設定描述性表單名稱。

現在，當你儲存並開啟頁面時。您可以完成表單，然後回到 Bricks > Form Submission 頁面檢視錶單資料。

Bricks Form Submission 頁面可訪問所有表單及其資料。

您還可以下載各種表單提交的 CSV 檔案。在您配置此功能的 Bricks > Settings > General > Miscellaneous 部分，您可以重置或刪除資料庫表。

重置或刪除表單資料庫表。

在 Bricks 中使用 WooCommerce

WooCommerce 是一款免費外掛，可增強 WordPress 網站的電子商務功能。它是全球公認的建立和管理網上商店的領先開源解決方案。

Bricks 可與 WooCommerce 無縫整合，提供一個強大的主題生成器，用於建立從商店主頁到單個產品頁面、產品檔案、購物車、結賬和賬戶頁面的整個商店。

Bricks 為 WooCommerce 提供專門的元素和模板，讓您可以設計店鋪佈局。

用於 WooCommerce 網站的 Bricks 產品元素。

要開始使用 Bricks 中的 WooCommerce 生成器，請安裝並啟用 WooCommerce 外掛。啟用後，您可以使用 Bricks 視覺化地設計和定製各種 WooCommerce 模板，就像管理單個文章佈局一樣。

建立一個簡單的商店頁面：

1. 導航至頁面並選擇 Shop 頁面。

2. 單擊 “Edit with Bricks“。元素面板包含各種產品元素。通過這些元素，您可以顯示產品、標題、描述、價格等，從而方便建立動態模板。

將 WooCommerce 與 Bricks Builder 結合使用。

使用這些元素，你可以根據需要安排和設計頁面樣式。

與建立單個文章模板一樣，您也可以建立單個產品模板，並設定其適用於所有產品的條件。

Bricks 中的查詢迴圈

查詢迴圈建立器可讓您根據查詢引數查詢資料庫，並在迴圈中顯示您希望顯示的查詢結果。它可用於容器、摺疊式和滑塊等佈局元素。

你可以查詢文章型別、分類術語和使用者。例如，你可以查詢部落格作者、社羣成員和團隊成員的列表。

要使用查詢迴圈，請在畫布上新增一個容器元素。啟用 “Use Query Loop” 設定，將容器變成迴圈項。

啟用 “Use Query Loop” 設定後，你會看到一個查詢控制元件（無窮大圖示）。單擊該圖示開啟查詢控制元件並設定查詢引數，以便從資料庫中檢索內容。

在用於文章的 Bricks 容器元素中使用查詢迴圈。

容器現在是你的重複項。只要有查詢結果，容器內的所有元素就會重複出現。本教學指南將解釋其工作原理。

Bricks 定價

Bricks 沒有免費計劃。他們只建立一個賬戶，讓你試用他們的主題，但除非你付費，否則不能在你的網站上使用。

Bricks 提供基本計劃和終身計劃。終身計劃提供無限許可權，但你可以決定自己想要什麼。

他們提供的便利是，在該平臺上幾乎可以提供你所需要的一切，有助於實現無縫、高效的工作流程，對於那些尋求強大、多功能網頁設計解決方案的人來說，這是一項值得投資的專案。

Bricks Builder 的定價結構。

Bricks 值得一試嗎？

與 Elementor 不同，Bricks 不提供免費版本，這是一個潛在的缺點。不過，Bricks Builder 憑藉其簡潔性和強大功能的完美結合，在業內備受關注。

2024 年，The Admin Bar 對 1,144 名 WordPress 專業人士進行了一項調查，結果顯示 “Bricks 是唯一一款使用人數比去年有所增加的頁面生成器，佔總數的 32%”，具體資料如下表所示：

顯示WordPress專業人員最常用的頁面生成器的統計資料。

這表明，儘管頁面生成器仍是市場上一個相對較新的產品，但有多少 WordPress 專業人士正在使用它。

Bricks 作為一個完整的主題執行。這意味著你不能將其他主題的功能與它的頁面生成器混搭使用。此外，就速度而言，作為一款專為高效能網站設計的較新頁面生成器，Bricks Builder 被認為比 Elementor Pro 更快。

僅使用專為速度而設計的頁面生成器並不能保證最佳效能。無論您要建立什麼型別的網站，您的託管服務提供商在網站效能方面都起著至關重要的作用。

小結

本文探討了 Bricks 生成器、其工作原理、部分功能以及使用方法。我們研究了它基於主題的綜合方法、定製功能和效能優勢。

雖然 Bricks 沒有像 Elementor 那樣的免費版本，但它的整合設計和頻繁更新可以為優化網站效能提供卓越的效率。

你對如何使用 WordPress Bricks 主題生成器有任何疑問嗎？請在下面的評論區告訴我們！