如何使用 Bricks Builder 建立 WordPress 網站

Mohamed Nohassi 2
Mohamed Nohassi

即使您是初學者,創建 WordPress 網站也不一定令人畏懼,借助 Bricks Builder 正確的工具和指導,您可以快速啟動並運行一個時尚、功能齊全的網站。

本教學向您展示如何使用 Bricks Builder 建立 WordPress 網站,Bricks Builder 是一個功能強大的主題編輯器,無需編寫任何程式碼即可提供廣泛的自訂功能。

Bricks Builder 編輯器

Bricks Builder 是一個視覺化網站編輯器,可讓使用者 直接在 WordPress 環境中建立自訂的響應式網站,它旨在增強用戶體驗,因為它與 WordPress 無縫整合,使初學者和經驗豐富的開發人員能夠透過拖放介面直觀地建立網站。

與 Elementor 和其他網站編輯器不同 ,Bricks 是一個佈景主題,而不是外掛程式,它幾乎包含了所有功能,而其他網站編輯器會使用額外的外掛。

它具有即時前端編輯體驗,這意味著您可以在調整設計元素和佈局時即時看到所做的更改。

Bricks Editing Interface 1

它提供了一個全面的工具包,其中包括預先設計的範本、大量的設計元素以及用於更詳細的 Web 開發的高級自訂選項。

此外,Bricks Builder 支援動態數據,讓使用者可以輕鬆建立數據驅動的網站並跨範本動態整合內容。

使用 Bricks for WordPress 的好處

Bricks Builder 因其性能和靈活性而脫穎而出,它是其他建構器的更新但強大的替代方案,提供:

  • 速度:Bricks 速度快得令人難以置信,而且重量輕。
  • 易於使用:介面直觀,適合初學者和專業人士使用。
  • 自訂性:Bricks 透過自訂 CSS 和 JavaScript 提供廣泛的可自訂性,並與各種 WordPress 外掛程式相容。

開始使用 Bricks

Bricks 是一個需要付費訂閱的高級佈景主題,要使用它,您需要購買他們的計劃之一,付款後,您可以在儀表板上下載一個可上傳到您的 WordPress 網站的 zip 文件,以及用於在您的 WordPress 安裝中啟動 Bricks 的許可證金鑰。

Bricks Dashboard

安裝 Bricks 佈景主題後,您的 WordPress 儀表板中會出現一個新的Bricks 選單項目。

若要啟動您的許可證,請前往儀表板,按一下啟動許可證,輸入 Bricks 帳戶中的許可證金鑰,然後按一下啟動。這將啟用 Bricks 佈景主題的全部功能。

Bricks License 1

如果您想在購買前試用 Bricks,您可以在 try.bricksbuilder.io 上設定試用帳戶,該平台提供對安裝了 Bricks 的預先配置 WordPress 網站的訪問,讓您無需初始成本即可探索其特性和功能。

Welcome Bricks 1

如何啟用 Bricks 頁面編輯器

若要使用 Bricks 頁面編輯器設計新頁面,請導覽至頁面 >新增 頁面或按一下現有頁面,您可以透過點擊「使用 Bricks Builder」來啟用 Bricks 編輯器。

Launch Bricks

現在您可以從「元素」面板中拖曳元素來設計頁面。

了解 Bricks 介面

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

Bricks Interface Label

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

  • 建構器工作區:Bricks 的主要區域是編輯器工作區,它是網站的視覺化表示。在這裡,您可以直接與頁面交互,將元素拖曳到位、調整大小和重新排列元件。
  • 工具列:工具列位於工作區頂部,可快速存取基本功能,例如:儲存工作、預覽網站以及存取設定選單和響應式控制項。
  • 元素面板:在介面的左側,元素面板是您的工具箱,它包含您可以在網站上使用的所有建置區塊,例如:文字方塊、圖像、按鈕等,您可以將這些元素從面板直接拖曳到頁面上。
  • 結構視圖:結構視圖通常位於元素面板旁邊或作為元素面板內的切換按鈕,提供頁面的層次結構輪廓,此視圖對於了解頁面元素的佈局和深度特別有用,讓您可以輕鬆選擇和編輯巢狀項目。

在 Bricks 中使用自訂字型

Bricks 提供了令人興奮的功能,可讓您將自訂字型上傳到 WordPress 網站,為此,請導覽至「程式區塊」  > 「自訂字型」。

Custom Font Bricks

此部分可讓您上傳各種格式的字型文件,包括 WOFF2、WOFF 或 TTF,您也可以上傳不同的字體變體,例如:細字體、半粗體、普通字體和粗體。

若要新增自訂字型,請按一下新增字型,然後,在「新增標題」欄位中輸​​入字型名稱,接下來,選擇您要上傳的字型變體,選擇字型樣式,然後按一下「編輯」

Add Font 1

將出現一個下拉式選單,提供用於上傳字型檔案的欄位,選擇您的字型檔案並上傳,您可以透過點擊新增字型變體來重複此過程 以獲取盡可能多的變體,最後,點擊發布

Fonts Page 1

若要將新上傳的自訂字型套用到 WordPress 網站上的文章,請按照以下步驟操作:

  1. 前往要使用新字型的頁面,然後按一下「使用 Bricks 編輯」
  2. 按一下您要變更的文字。
  3. 有關所選文字的資訊將顯示在左側面板中。按一下「風格」。
  4. 展開「排版」 下拉清單以查看更多選項。
  5. 字型系列 欄位中,瀏覽可用字型,包括 Google 字型和您上傳的自訂字型。
  6. 從清單中選擇您的自訂字型以立即更新您的文字。

現在,您的文字將使用您的自訂字型顯示,為您的頁面帶來個人化的感覺。

Use Custom Font 1

在 Bricks 中使用範本

範本是 Bricks 的一項基本功能,有多種類型,包括頁首、頁尾和部落格文章佈局,這些範本的範圍可以從單一部分,如網站標題或主要說明部分,到整頁內容,如部落格文章版面、存檔頁面、搜尋結果和錯誤頁面。

建立範本

建立範本:

  1. 導覽至 儀表板中的「程式區塊」  > 「範本」。
  2. 選擇新增範本或匯入現有範本。
  3. 按一下「新增」,選擇範本類型,然後選擇「使用程式區塊編輯」
New Template

應用程式範本

若要將範本套用到頁面:

– 1. 導航到您要使用範本的頁面。

– 2. 按一下建構器工具列中的範本 (資料夾) 圖示以開啟範本部分。

Apply Template

– 3. 在這裡,您可以存取您創建的範本和社區範本

– 4. 選擇所需的範本並預覽。

Templates Store

– 5. 最後您可以點擊「插入」 來應用它。

Use Template From Community

遠端範本

Bricks 的範本提供了其他網站編輯器所沒有的獨特功能,遠端範本是指您希望在您的網站中使用的在其他網站中建立和使用的範本。

若要允許其他網站使用您的 Bricks 範本,請前往 WordPress 儀表板中的「Bricks」  > 「設定」  > 「範本」,然後啟用「我的範本存取」複選框。

使用白名單 URL 和密碼保護將範本存取限制為知道正確密碼的人員。

Remote Templates

若要使用其他網站的範本,請前往 Bricks  > 設定 > 範本,捲動至遠端範本部分,然後將要從中擷取範本的 Bricks 網站的 URL 貼上到遠端模板 URL 欄位中。

Use Remote Templates 1

如果您設定密碼,則必須確保將其寫入遠端模板密碼下,然後點選「儲存設定」

要使用這些範本,請導航至頁面建立器並像以前一樣點擊範本;將出現遠端範本的新部分, 其中包含遠端站點的所有範本。

在 Bricks 使用動態數據

Bricks 讓您可以將動態資料合併到範本和頁面中,使其成為建立動態網站的多功能工具。

您可以包含各種動態元素,例如:特色圖片、文章標題、發佈日期、作者姓名、類別、標籤、網站標題和所有自訂欄位。

在 Bricks 中建立特定範本,例如:部落格文章範本或自訂文章類型的範本,例如:單一屬性清單時,動態資料特別有用。

若要新增動態數據,請開始 { 在畫布上鍵入或按一下設定面板中大多數欄位旁的「螺栓」圖示。

以下是如何使用 Bricks 的動態資料建立單一貼文範本:

  1. 導覽至「程式區塊」  > 「範本」以建立新範本,為範本指派標題,將其類型設為Single,然後發佈 或另存為草稿。
  2. 按一下「使用 Bricks 編輯」 開始配置範本以使用動態資料。
  3. 根據需要設定頁面樣式,通常,您需要將文章標題、特色圖片、發佈日期、作者姓名和文章內容等元素全部設定為動態顯示。
  4. {post_title}在空白畫布上,透過插入標題元素和基本文字{post_content}元素來新增標題和內容 。
Dynamic Data 1

將此範本設定為所有帖子的預設範本:

– 1. 點擊工具列中的設定圖標,前往範本設定 >條件,然後點擊+ 新增條件 按鈕。

– 2. 選擇文章類型並指定文章。

Default Post Template 1

– 3. 確保已儲存並更新 WordPress 上的範本頁面,然後,導航到「文章」 頁面,查看使用新範本格式化的每篇文章,無需額外的樣式。

Post Template

若要簡化此範本的樣式,請新增預設文章以用作動態元素的參考:

– 1. 點擊工具列中的設定圖標,然後轉到範本設定 >填充內容。

– 2. 選擇單一文章 / 頁面 作為內容類型,然後選擇特定文章作為範本內容,如果沒有出現,請確保搜尋一個,然後按一下「套用預覽」。

Defualt Post 1

– 3. 現在您可以使用選定的範本文章輕鬆顯示文章標題和內容等元素。

Customize Dynamic Page 1

此外,Bricks 支援使用進階自訂欄位 (ACF) 中的內容,從而增強您建立詳細的自訂頁面的能力。

使用 Bricks 處理表單提交

Bricks 1.9.2 中引入了表單提交功能,可讓您擷取表單提交,這允許您建立一個bricks_form_submissions在資料庫中命名的自訂表,加上您的 WP 資料庫前綴。

您可以在 Bricks  > Settings  > General  > Miscellaneous 下啟用新的在資料庫 設定中儲存表單提交。

Form Submissions Bricks

然後點選「儲存設定」,將出現「表單提交」標籤 (「程式區塊」  > 「表單提交」),其中包含各種表單提交表。

收集表單提交

在 Bricks 中收集表單提交不需要額外的外掛程式,您只需使用 Form 元素建立表單並正確設定欄位即可。

Form Element

在設定面板中,按一下操作,然後選擇儲存提交 操作。

Save Submission Action

接下來,按一下「儲存提交 設定」為表單指定描述性名稱,該名稱將用於存取表單中的資料。

Form Name 1

現在,當您儲存並開啟頁面時,您可以填寫表單,然後導覽回「程式區塊」  > 「表單提交」 以查看表單資料。

Bricks Form Submission Page

您也可以下載各種表單提交的 CSV 檔案,在配置此功能的「程式區塊」  > 「設定」  > 「常規」  > 「雜項」部分中 ,您可以重設或刪除資料庫表。

Reset Delete Database Table

將 WooCommerce 與 Brick 結合使用

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

Bricks 與 WooCommerce 無縫整合,提供強大的佈景主題編輯器,用於打造整個商店,從主商店頁面到單一產品頁面、產品檔案、購物車、結帳和帳戶頁面。

Bricks 專門為 WooCommerce 提供專門的元素和範本,讓您可以設計商店的佈局。

Product Elements

若要開始在 Bricks 中使用 WooCommerce Builder,請安裝並啟用 WooCommerce 外掛程式,啟動後,您可以使用 Bricks 直覺地設計和自訂各種 WooCommerce 範本,類似於管理單一貼文佈局的方式。

要建立一個簡單的商店頁面:

  1. 導航至頁面 並選擇商店 頁面。
  2. 點擊以使用 Bricks 進行編輯,元素面板包含各種產品元素,這些可讓您顯示產品、標題、描述、價格等,從而促進動態範本建立。
Bricks Wocommerce

使用這些元素,您可以根據需要排列頁面並設定頁面樣式。

    與建立單一文章範本一樣,您可以建立單一產品範本並設定其條件以適用於所有產品。

    Bricks 中的查詢循環 loops

    查詢循環建構器可讓您根據查詢參數查詢資料庫,並呈現您想要在循環內顯示的查詢結果,它可用於容器、手風琴和滑塊等佈局元素。

    您可以查詢文章類型、分類術語和使用者,例如:您可以查詢部落客、社群成員和團隊成員的清單。

    若要使用查詢循環,請將容器元素新增至畫布,啟用「使用查詢循環」 設定可將容器變成循環項目。

    啟用「使用查詢循環」 設定後,您將看到一個查詢控制項 (無限大圖示),按一下該圖示可開啟查詢控制項並設定查詢參數以從資料庫中檢索內容。

    Query Loops 1

    該容器現在用作您的中繼器項目,該容器內的所有元素都會依照查詢結果的頻率重複出現,本 Bricks 指南解釋了它的工作原理。

    Bricks 定價

    Bricks 沒有免費方案。他們只是建立一個帳戶 來讓您嘗試他們的主題,但除非您付費,否則您不能將其用於您的網站。

    Bricks 提供基本計劃和終身計劃,終身計劃提供無限的特權,但您可以決定您想要什麼。

    它們提供了便利,讓您在平台中擁有幾乎所需的一切,有助於實現無縫且高效的工作流程,並使其成為尋求強大且多功能的網頁設計解決方案的人的一項值得的投資。

    Biricks Pricing 1

    Bricks 評論:值得一試嗎 ?

    與 Elementor 不同,Bricks 的一個潛在缺點是不提供免費版本,然而,Bricks Builder 以其簡單性和強大功能的結合而贏得了業界的關注。

    The Admin Bar 在 2024 年對 1,144 名 WordPress 專業人士進行的一項調查 顯示:

    Bricks 是唯一一個比去年增加數量的頁面構建器,佔總數的 32%

    如下表所示:

    Admin Bar Page Builder Statistics 1

    這表明有多少 WordPress 專業人士正在擁抱它,儘管它仍然是市場上相對較新的進入者。

    磚塊作為一個完整的主題運作,這意味著您無法將其他佈景主題的功能與其頁面編輯器混合和匹配,另外,在速度方面,作為專為高效能網站設計的新型頁面編輯器,Bricks Builder 據稱比 Elementor Pro 更快。

    使用僅為速度而設計的頁面編輯器並不能保證最佳效能,無論您建立的網站類型如何,您的主機提供商對其效能都起著至關重要的作用。

    我們推薦 Kinsta,他們以提供具有數十種高級功能的高級 WordPress 託管而聞名。

    Kinsta 在完全容器化的架構上運行,該架構完全由 Google Premium Tier 網路上的Google Cloud Platform提供支援,這使 Kinsta 能夠為您提供大量最快的資料伺服器、令人難以置信的效能、伺服器級快取、專用資源和增強的安全性。

    結論

    本文深入討論了 Bricks Builder 其運作方式、部分功能以及如何使用它們,我們檢查了其全面的基於主題的方法、自訂功能和性能優勢。

    雖然 Bricks 缺乏像 Elementor 這樣的免費版本,但其整合設計和頻繁更新可能會為最佳化其網站效能提供卓越的效率。

    Please rate Stellar
    0 / 5 5 Votes 3

    Your page rank:

    Your Mastodon Instance