Bricks 新手教學指南：佈景主題 + 頁面編輯器【2026】

最後更新時間：2025-12-23，由 Dean 更新

Bricks Builder 近年在圈內討論度越來越高，不只是速度快、功能靈活，連開發者都開始轉向它。不過，這工具真的適合每個人嗎？有什麼優缺點，又該怎麼上手，才不會踩雷？

這篇 Bricks 教學，會帶你從基礎介紹到實戰操作，包括首頁設計、全域樣式設定，甚至整合 WooCommerce 的實用技巧，讓你少走很多冤枉路。

Bricks Builder 是什麼？

Bricks Builder 是一款內建有頁面編輯器的 WordPress 佈景主題，於 2021 年推出。

它的定位滿特別的，以往 WordPress 佈景主題 & 頁面編輯器會是兩個獨立的套件，像是「Astra + Elementor」。但 Bricks Builder 創新的結合設計，一款佈景主題就搞定「網站設定 + 頁面設計」。

Bricks Builder 優點

• 編輯器 + 佈景主題：安裝 Bricks 就像一次裝好「網站外觀」和「設計工具」，不用再額外安裝頁面編輯器，速度快、對主機負擔也比較小。
• 全站風格集中管理：不只顏色和字體，連常用的版型組合（像是按鈕群組、區塊設計）都可以先設定好，之後要改風格，整站一起更新。
• 動態內容自動載入：元件、區塊和內嵌內容皆可開啟自動抓取最新資料，就不用手動更新。
• 指定顯示條件：有些內容只讓會員看到，或僅在手機顯示，甚至限定從特定網址點進來的訪客才會看到，這些都能透過條件設定自由控制顯示方式。
• 內容區塊有更多互動效果：可折疊的區塊、標籤頁、輪播圖都能放圖片、影片或其他內容，讓版面更有變化，也不用額外裝外掛。
• 網站速度優化：它只載入用到的程式碼、圖片影片會延遲加載，還用比較快的框架 (Vue.js) 取代 jQuery，整體速度表現比很多 builder 好很多。
• 行動版響應式設計：你可以自己決定「哪幾種裝置」要特別調整版面，而且只要改其中一個裝置，其他會自動跟著調整，省去重複操作。
• 內建動態欄位功能：像是文章標題、發文日期、作者名稱這些動態資料，都可以直接插入設計中，不用一個個設定，速度更快，頁面也比較乾淨。
• 對開發者很友善：如果你會寫程式，Bricks 讓你隨時插入 HTML、CSS、JS、PHP，也能整合 API 或自己開發元件，還能設定哪個人有權限改什麼東西。

Bricks Builder 缺點

• 入門門檻高：雖然可以用拖拉方式設計畫面，但要玩得更靈活（像是動態資料、條件顯示等），還是需要一點 HTML、CSS 的基礎，對新手來說可能需要時間摸索。
• 預設範本不多：相較於其他編輯器，如：Elementor (數百個範本)、Divi (完整的網站模組)，預設範本較少，不方便快速架站。
• 小工具選項較少：跟 Elementor 比起來，提供的內建小工具較少，需要依賴第三方擴充外掛來增加功能。
• 外掛整合不夠全面：比如課程平台、電子報訂閱、CRM 等工具，目前的整合性還不夠完整，有些功能得靠其他外掛來補齊。
• 生態圈還在成長中：Bricks 是 2021 年才推出的，算是比較新的工具，第三方擴充、設計資源、教學社群都還沒有像 Elementor、Divi 那麼多。
• 介面未中文化：官方尚未提供正式的繁體中文介面，對台灣用戶來說較不方便。

Bricks Builder 方案有哪些？

項目	Starter	Business 149	Agency	Ultimate Lifetime
授權網站數量	1	3	無限	終身
年訂閱價格(USD)	79	149	249	599

所有方案均包含：

• 110+ 小工具
• Query Loop Builder (查詢循環建構器)
• Menu Builder (選單建構器)
• Popup Builder (彈窗建構器)
• WooCommerce 建構器
• 條件式顯示與互動功能
• 免費範本庫

要注意的是，Bricks 無法在 WordPress 後台直接下載，要先跟官方購買後才能下載安裝檔。

並且，安裝檔上傳的位置不是「外掛」，而是「佈景主題」，這點要特別注意。

Bricks Builder 值得購買嗎？

若你很依賴網站模板和小工具、不太懂程式碼，會建議使用其他頁面編輯器，如 Elementor、Brizy，能較快架出網站。

不過，如果你是「重視網站速度」和「想自訂程式碼」的設計師和開發者，我會更推薦 Bricks Builder。

其他好用的 WordPress 頁面編輯器

4 種 Bricks Builder 全域管理功能介紹

Bricks Builder 有四個我在設計上很常會使用到的功能：

• 全域樣式 (Global Styles)
• 組件 (Components)
• 自訂字體
• 類別 (Classes) & 變數 (Variables) & 自訂程式碼 (Custom Code)

以下詳細介紹，並教你怎麼設定。

全域樣式 (Global Styles)

Bricks 提供一套「樣式設定系統」，你可以先設定好網站的主色、字型、按鈕樣式、彈窗外觀、連結樣式等等常用元素。未來只要修改這份樣式表，整個網站就會一起更新，不用一頁頁重改，大幅節省時間。

和其他 WordPress 主題做法不同，Bricks 採用「指定樣式表」的方式，你可以自由決定哪一份樣式要套用在哪裡：

• 為整個網站套用預設樣式表。
• 為首頁、部落格、作品集等特定頁面指定不同樣式。
• 管理多份樣式表，自由切換、複製或修改。

如果你是第一次使用這類功能，會建議全域管理樣式表要設定以下 4 大項，幫網站設好基本的樣子：

• 一般設定 (General)：設定版面結構，例如網站寬度、背景、陰影效果等。
• 顏色配色 (Colors)：主色、輔色、深淺色等基本配色，可參考配色教學。
• 字體樣式 (Typography)：標題與內文的字體、字重、行高等。
• 按鈕樣式 (Buttons)：全站按鈕的外觀統一設計。

現在，先介紹如何從編輯器中進入並建立樣式表。

step 1

進 Bricks 編輯器的方式有 2 種：

• 新增一個頁面，打上標題，接著點「Edit with Bricks」。
• 在現有頁面下點「Edit with Bricks」。

step 2

進入編輯器後，先設定一份給全站使用的樣式表：

1. 上方點開設定圖示。
2. 跳出選單後，選「THEME STYLES」。
3. 填入樣式表名稱，方便管理 (我填全域管理)。
4. 按「CREATE」建立樣式表。

step 3

接著，幫這份樣式表設好顯示條件：

1. 在下方選單點「CONDITION」。
2. 等跳出按鈕，點「+ADD CONDITION」。
3. 接下來會跳出選擇顯示位置的欄位，點「Select」下拉選單。
4. 在選單中點「Entire website」，這個樣式表就會套用全站了。
5. 最後到右上角按儲存鈕存檔。

這樣你的「指定樣式表」就完成了，以後按上方設定圖示就可進入樣式表。

接下來我們會按照順序先設定最重要的 5 個項目：General、Colors、Typography、Links、Button。

到這邊，基本的全域樣式就設定完了，不要忘記右上角按儲存鈕存檔，以免資料消失不見。

組件 (Components)

在設計網站的時候，經常會遇到「樣式重複出現，但內容不一樣」的區塊，像是：

• 文章區塊：不同文章，但外觀一致，例如：最新文章、相關文章。
• FAQ 問答區：每頁的問題不同，但排版一樣，如：服務頁 & 商品頁的 FAQ 不同。
• 商品展示欄：推薦商品清單、特色賣點，像是：不同分類的商品清單不同。

這些情境就很適合用 Bricks 的「組件（Components）」來處理，好處是：

• 不用每次都重新設計，只要插入頁面就好。
• 結構與樣式會同步更新，但內容可以不一樣 (如同個樣式的按鈕可有不同文字)。
• 能大幅加快架站流程，也方便後續維護。

接下來，我會簡單示範怎麼把一組 FAQ 存成 Component，並在其他頁面快速重用。

step 1

先將區塊存成組件：

1. 在要存為組件的區塊上點右鍵。
2. 選擇「Save as Component」。
3. 會跳出一個視窗，取名後按「Create」。

step 2

在另一個頁面上點好要匯入組件的區塊：

1. 左上按「+」，切換到小工具列表。
2. 頁籤切換到「COMPONENTS」。
3. 點選要匯入的組件，就會直接插入頁面。

step 3

在組件上點右鍵：

1. 選擇「Edit Component」。
2. 左邊的設定介面就會跳出可編輯的內容了。

存成組件後，不會影響到你在另一個頁面設計的樣式和格式，內容還可以不一樣，對內容豐富又需要統一風格的網站來說，這樣真的輕鬆多了。

自訂字體

如果你有上傳字體的需求，如：

• 品牌有專屬字體，希望整體設計一致。
• Google Fonts 中文字體選擇較少，想手動上傳其他中文字型。

在 WordPress 後台「Bricks > Cutom Fonts」可上傳 WOFF、WOFF 和 TTF 等字型檔，上傳後可在全域樣式中設定字體組合，在整個網站套用。

類別 (Classes) & 變數 (Variables) & 自訂程式碼 (Custom Code)

Bricks 提供三個進階功能，可以讓你更有系統地管理整個網站的樣式，特別是在後續維護、交接給別人，或整體改版時，會非常方便。

舉個例子：你希望所有按鈕、卡片、表單的邊角都統一使用 15px 的圓角，但又不想每個元件都手動設定一次。

這時可以這樣做：

1. 使用「變數」儲存這個數值（就像一張寫著 15px 的便利貼）。
2. 在「類別」裡幫這個變數取個名字，例如 .rounded-corner。
3. 在「自訂程式碼」中寫一條 CSS 規則，讓這個類別使用剛剛的變數。
4. 最後，在你想要加上圓角的元件上套用這個類別，就完成了。

未來你想把圓角從 15px 改成 10px，只要回去修改變數，整個網站有用到這類別的地方都會自動更新，非常省事。

以下教你怎麼利用 Bricks 的變數、類別、自訂程式碼，快速設定一個可隨時套用的「圓角」樣式。

如果你沒有這種需求，這段可以先跳過，等未來需要時再回來看就好。

step 1

新增一個變數來記錄圓角數值 (15px)，再幫這個變數取個名稱 (rounded-corner)：

1. 在 Bricks 編輯器上方叫出「Classes & Variables」視窗。
2. 切換為「Variables」。
3. 新增「global-radius」，加上數值「15px」，按 Create (右邊的黃色鈕)。
4. 上面切換成「Classes」。
5. 取名為「rounded-corner」，按 Create (右邊的黃色鈕)。

step 2

接著寫入程式碼，把變數加進類別裡：

回 WordPress 後台選單，點「Bricks > Settings > Custom Code」：

切換到「Custom Code」頁，拉到下面的「Custom Code」欄位，輸入值，意思是「這個類別會使用剛剛設定的圓角變數」。

step 3

到頁面上，點一下要套用的工具元件：

1. 進入設定，切到 STYLE，下方點開 CSS。在「CSS classes」欄位中輸入在 Classes 取的名稱「rounded-corner」。
2. 右上角點一下存檔，就完成了。

不過，要在右上角點「View on frontend」，才會看到樣式喔！

通常這是前端工程師才會用的做法，Bricks 把它設計得比較好用，讓一般人也能簡單管理樣式。

如何用 Bricks Builder 設計網站首頁？

網站首頁是最重要的，所以接下來我想要簡單來示範，怎麼樣用 Bricks Builder 做出基本首頁。

這一部分開始前，記得先在 WordPress 後台的「外觀 > 選單」裡先設好選單項目，才能開始設定。如果不知道怎麼設定的人，可以先閱讀在 WordPress 後台建立選單的方法。

接下來，我們會一步步完成：

1. 頁首
2. 頁尾
3. 頁面主體

建議你先參考《網頁設計範例》找到自己想要的網頁風格，再依照下方的教學操作。

設計頁首 (Header)

頁首是網頁最上方的區塊，通常會稱「Header」，最基本的頁首會放網站的 Logo 和導覽列選單，讓瀏覽的人連到網站的分類和重要頁面。

接下來，我會示範如何用 Bricks Builder 設計一個基本的頁首。

step 1

首先，要從 WordPress 後台新增模板，才能進編輯器。

到「Bricks > Template」點「Add New Template」新增一個模板：

1. 右上點開下拉選單，選「Header」。
2. 模板名稱改成「頁首選單」(或頁首)。
3. 在中間按「EDIT WITH BRICKS」進入編輯器。

step 2

進入編輯器後，你會看到 3 個主要區塊，分別是：

• 設定 / 工具區：位於左側，從這邊把小工具加到頁面上，並做小工具的相關設定。
• 編輯區：位於中間，馬上顯示你做的設定。
• 結構區：位於右側，顯示頁面上所有的排版工具與小工具，方便你釐清上下關係。

最上面是快速按鈕，分左中右介紹：

1. 跟設定有關：如全域管理 (設定圖示)、切換小工具列表 (+)、打開模板庫 (資料夾圖示) 等按鈕。
2. 跟顯示有關：如重新載入、裝置切換鈕、寬度與高度、比例等按鈕。
3. 跟檢視有關：如回復上一步、修訂紀錄、結構、回 WP 後台、開新分頁檢視、隱藏工具列檢視和儲存按鈕等。

step 3

接著，先了解 Bricks 最核心的 4 個排版工具：

排版工具	是什麼	做什麼用的	實際應用
Section	頁面上最大的區塊，用來幫頁面分區	劃分頁面主要區域	區塊的最外圍
Container	用來放所有內容的區塊，通常在這裡設定背景顏色和照片、排版數值等	控制內容寬度、內邊距	內容的最外圍
Block	放入單一小工具或小工具組合	水平排列：欄 (Column) 垂直排列：列 (Row)	放在 Container 裡排列放入的小工具
Div	最小的排版單位，沒有固定格式，熟悉程式碼的話，可替代 Block	在視覺化介面中較少使用，主要是用來滿足高度客製化自訂的需求	自訂區塊

同時，也建議你先閱讀以下文章，了解有哪些常見的排版方式，後面正式設計頁面時會比較不會卡。

14 種網頁排版技巧：製作頁面必學！更直覺、更有信任感

step 4

正式開始設計網頁，來加入區塊：

1. 先按上方的「+」號，切換到小工具列表。
2. 點一下新增 Section，新增的 Section 中會自動包含一個 Container。
3. Container 的藍框上有幾個快速選項，在欄位圖示上按一下，就會跳出預設的欄位選單。
4. 在想要的選項上點一下，我選比例約 3 比 7 的雙欄格式來排版。

step 5

加入 2 欄 (Column) 後，要在左欄加入一個圖片，放入網站的 Logo：

1. 在結構區上的 Column 上點一下 (可在顯示區點選，但建議在結構區點選)。
2. 左側設定區找到「Image」工具，點一下會自動加入。
3. 加入 Image 後，左側會跳出工具的設定，在上面點「SELECT IMAGE」上傳圖片。

step 6

接著，在右側加入選單：

1. 在要加入的欄位上點一下。
2. 左側工具列往下拉，找到 WordPress，點一下「Nav Menu」，就會自動抓取你在 WordPress 後台設定的主要選單。
3. 如果 Nav Menu 沒抓到你要的選單，在這裡點開下拉選單，重新選擇。
4. 點開 SUB MENU，設定子選單。

step 7

調整連結項目 (ITEM) 的樣式，包括：

• Justify Content (對齊)：居中對齊。
• Padding (內距)：在上方或下方設定間距，我設 10px，建議數值大概 5 ~ 10px。
• Backgorung (背景色)：可設背景色，建議填入設好的全域顏色，我使用預設的黑色。
• Border (框線)：可設定上下左右的框線和圓角框，我設下方框線，並調為白色。
• Typography (字型樣式)：可調整字型、顏色和尺寸大小。

設定裡若有裝置圖示，直接切換做調整，可儲存不同裝置的數值。

step 8

設定好子選單樣式後，往下拉找到「MOBILE MENU」，設定行動版選單。這邊的設定分為「MOBILE MENU」、「TOP LEVEL」、「SUB MENU」和「HAMBURGER TOGGLE」 4 個部分。

我把必做設定的項目打勾，其他的依喜好做調整：

• MOBILE MENU (行動版選單的顯示時機與位置)：
• Show at breakpoint：指的是在什麼裝置的尺寸以下，都要顯示行動版選單，建議選 Tablet portrait，在平板上就會切換成行動版選單。
• Position：行動版選單在左側或右側顯示。我的選單在右側，所以選 Right。
• Text Align：文字對齊方式，按喜好選就可以。
• TOP LEVEL (行動版選單的主選單連結)：
• Typography：字型樣式，建議點裝置切換鈕調整一下尺寸，其餘依喜好設定 (下面的 Active 是設定點擊時連結中的樣式，時間太短所以效果不大，可省略)。
• SUB MENU (行動版選單的子選單連結)：
• Typography：同上。
• HAMBURGER TOGGLE (行動版選單開啟按鈕)：
• Toggle Width：開啟鈕的尺寸大小，因出現在行動裝置上，設 40~50 px 就好。
• Color：設定開啟鈕的顏色。
• Hide Close：建議把關閉鈕隱藏，因為預設是按選單外會自動關閉，使用上較直觀。

step 9

最後，幫頁首選單排版：

1. 在結構裡，點一下 Container，確保選對內容。
2. 在 Content 的 Display：選 grid。
3. Grid template columns：填入「30% 70%」(空白格也要)。
4. Align Item：我選對齊下方，但可按你的圖片和選單自行做調整。
5. 按一下右上方的儲存鍵儲存，就完成頁首的選單了。

*記得要切換裝置鈕改一下數值，確保頁面不會跑版。

設計頁尾 (Footer)

頁尾是網頁的最底部，通常稱作「Footer」，最基本的頁尾會有版權聲明、隱私權政策等，如果還想放入更多內容，還可放聯絡資訊、訂閱表單、社群圖示和網站地圖。

接下來，我會示範如何設計基本版的頁尾。

step 1

在編輯頁首的介面上方按資料夾圖示，可直接打開模板庫。

*如果是從 WordPress 後台進入，點「Bricks > Template > Add New Template」新增一個頁尾模板 (Footer) 即可。

step 2

在模板庫快速新增一個頁尾模板：

1. 等跳出模板庫的視窗右上角按「+」。
2. 幫模板取個名稱，例如「頁尾」。
3. 點開下拉選單，選「Footer」就會全站顯示在頁尾。
4. 按「CREATE TEMPLATE」建立頁尾模板。
5. 等頁尾模板建立後，按下面的編輯圖示進編輯模式。

step 3

左側點一下「Section」，在頁尾加入區塊。

step 4

接著，在頁尾加入內容：

1. 在右邊點一下 Container，確保將內容加入容器裡。
2. 左上按「+」切換成工具列表。
3. 將工具列的 Basic Text (文字) 和 Text Link (文字連結) 加入頁面，我加入 2 個 Text Link。

step 5

編輯 Basic Text 的內容：

1. 在右側結構區點一下「Basic Text」。
2. 等左側跳出設定介面，在 Content 右上角點一下動態標籤，選「{site_title} 」，再加入「版權所有」，是最簡潔的方式；還可再加上「如有疑問，可洽 [聯絡信箱]」。

step 6

將另外 2 個 Text Link 分別加入內容：

1. 點一下右邊的 Text Link。
2. 等左邊跳出設定，填寫連結的文字，如「隱私權政策」和「著作權聲明」。為了方便排版，我有另外加入「│」隔開。
3. 「Link to」下方點開選單，選「Internal post/page」，會再跳出一個空白欄位，點開選擇自己已經寫好的頁面 (如果還沒做好就空白，之後再補上)。
4. 開啟「Open in new tab」，讓連結開啟新分頁。

step 7

最後，調整頁尾內容的位置：

1. 右方點一下「Container」。
2. 等左邊跳出設定，Direction 選 Horizontal (Row)，讓內容水平排列。
3. 下方 Align main axis 選 Center，把內容置中。

step 8

進一步調整樣式：

1. 上方點「Style」切換設定介面。
2. LAYOUT：設定 Padding (內距)，我設上下方各拉開 20 px。
3. BACKGROUND：點開 Background color 旁的圓形按鈕，叫出顏色選擇器，填入色碼或選擇顏色 (全域管理設定的顏色也會出現在這裡)。
4. 都設定好後，按右上方儲存鈕儲存，就完成基本的頁尾設計了。

*如果想調整文字大小，就點開「TYPOGRAPHY」設定。

設計頁面主體 (body)

最後，我們要來設計頁首及頁尾間的「頁面主體」區域。我會以三個區塊為例，示範設計流程，分別是「首頁大圖」、「Icon 說明」、「最新文章」，用的是最基礎的排版方式和幾個常見元件組合。

step 1

編輯之前，先按照「頁首設計」或「頁尾設計」的步驟 1 進入模板庫：

1. 右上按「+」新增模板。
2. 幫模板取名。
3. 模板類型選「Single」。
4. 點「CREATE TEMPLATE」建立模板。
5. 點新模板上的編輯圖示進編輯器。

step 2

先拉出一個三欄區塊，分別放大圖、介紹和幻燈片。

我自己會習慣先用空白內容把版面拉出來，再視覺化調整配色和圖像，這樣比較不容易被元件干擾視覺節奏。

step 3

等等會在 3 個區塊分別加入以下工具，增加內容：

• 第一個區塊：背景圖片 + 2 個 Heading (標題)，用來放大圖和網站主題的描述。

• 第二個區塊：3 個 Icon Box，放網站的主題說明。

• 第三個區塊：1 個 Heading 和 1 個 Slider (Nestable)，等等會開啟查詢循環，自動抓取最新文章。

全部加好之後，先查看右邊結構區對照，看看結構對不對，接下來都用這邊點選要編輯的物件，會比較準。

step 4

先設定第一個區塊的背景圖片和標題：

一、設定背景：

1. 在右側點選要編輯的 Container 內容區塊。
2. 左側上方點「STYLE」切換設定介面。
3. 下方找到「BACKGROUND」點開：
   • Background color (背景顏色)：點一下圓圈，點開色彩選擇器。選黑色，把透明度 (Transparency) 調低，讓這層顏色蓋在圖片上，讓圖片變暗、文字更清晰。
   • Background Image ：點開下方方框，選擇或上傳你想使用的背景圖片。
   • Background blend mode：背景混合模式，點開選 Overlay (覆蓋)，會把你選的顏色覆蓋在照片上，透明度較高或較低會有不同效果。
   • Background attachment：背景圖是否跟著一起頁面往下滑動，預設選 Scroll (跟著滑動)，維持預設即可。
   • Background position：圖片對準的位置，建議選 Center Center，確保裝置切換時圖片不被裁切太多。
   • Background repeat：背景圖片是否重複，因為我們上傳的是照片，選 No repeat (不重複)。
   • Background size：背景圖尺寸，網站大圖建議選 Cover，讓圖片完全覆蓋整個區域。

二、設定標題：

1. 在右側依序點選 Heading。
2. 到左側 Content 設定。
3. 下方建議填入：
   • 標題文字。
   • HTML Tag：建議選 h1；副標題則建議選 h2 或 h3。
   • Style：選擇在全域管理設定的顏色。

step 5

接著，設定第二個區塊：

一、改成並排：

1. 右側點選第二個 Container。
2. 左側跳出設定，在 Direction 選 Horizontal (Row)，把 Icon Box 水平排列。

二、Icon 設定：

1. 分別點開 Icon Box 的設定，。
2. 建議在左側設定區填入下列項目：
   • Icon：點開可選 Font Awesome、Themify 和 Ionicons 的 icon 圖示。
   • Align：對齊方式，建議選置中，適合水平排列的情況。
   • Color：修改 Icon 的顏色。

三、文字內容：

1. 左側視窗繼續往下滑，找到 Content 點開，在文字編輯器中填入你網站的核心主題，並將 HTML 層級設定成 h2。
2. 點開 Heading typography 和 Body typography 的字型樣式視窗。
3. 主要修改項目：
   • Color：修改方框中文字的顏色，通常選網站主色。
   • Font Size：修改方框中文字的尺寸，約 24~32 px，依網站設計為準。
   • Text align：文字的對齊方式，我選置中，符合一般圖示方塊的形式。

step 6

最後，設定第三個區塊的標題和幻燈片：

一、設定標題：

1. 右側點要編輯的 Heading。
2. 在設定區中填入：
   • 標題文字：我填「最新文章」，這樣一看就知道是什麼內容。
   • HTML Tag：因是區塊的標題，建議設為 h2。
   • Style：點開選擇預設的顏色。

二、設定 Slider (Nestable)：

1. 右側結構區點「Slider (Nestable)」。
2. 跳出設定，有預設 3 張幻燈片，先按右下角刪除圖示刪除 2 張 (需要按 2 次)。
3. 等等會詳列有關 OPTIONS (一般選項)、ARROWS (左右切換箭頭)、PAGINATION (下方切換圓點) 的細項設定。

step 7

接續上一步驟可內嵌幻燈片的設定，同一視窗點開 OPTIONS、ARROWS、PAGINATION：

1. OPTIONS：一般項目，下面列出建議設定的部分。
   • Options type：選 Default，選 Bricks 官方已經設好的格式，比較不容易出錯。
   • Type：選 Slide，以切換幻燈片的方式瀏覽，較符合一般人的操作習慣。
   • AUTOPLAY：建議開啟，在頁面上自動輪播，會讓人知道這個幻燈片可切換圖片。
2. ARROWS：設定左右兩邊切換圖片的箭頭，以下是建議設定的項目。
   • Show：建議開啟，讓瀏覽的人可以手動切換。
   • Color：設定箭頭的顏色，建議選一個顯眼但搭配網站設計的顏色。
   • DISABLED：沒有可切換的圖片時，那一邊的箭頭的顏色，建議選一個較暗的顏色。
3. PAGINATION：這是幻燈片下面的圓點，點 Show 開啟即可，其他項目如顏色、樣式等，不需要設定。

step 8

設定完 Slider (Nestable) 後，接下來要開啟 Slider 的 Query loop (查詢循環)，讓幻燈片自動抓取網站上的最新文章。

1. 右側點一下「Slide」。
2. 等左側跳出設定，打開 CONTENT 下的 Query loop。
3. 點開 Query 旁的無限循環圖示，叫出下面的選單：
   • Type：現在要設定自動抓取文章，所以選 Posts (文章)。
   • Post types：一樣選 Posts。
   • Order by：根據什麼規則排序。我選 modified，會從最新更新的文章開始排序。當然，你也可以選 Published (最新發布)。
4. STYLE > BACKGROUND：我在這裡主要設定的是背景圖片的動態，因為我要抓取文章的精選圖片作為幻燈片的背景，以下是建議設定的項目。
   • Background color：和第一個區塊的背景圖片一樣，我選一個深色並調低透明度來覆蓋圖片。
   • Background image：點開欄位旁的閃電圖示，選 {featured_image}，下面選 Full，指的是原尺寸顯示精選圖片，不一定要選這項，可按需求選別的尺寸。
   • Background blend mode：混合選項，選 overlay，把剛選的暗色覆蓋上去。
   • Background position：選 Center center，讓圖片不容易跑版或被裁切。
   • Background repeat：No repeat，不重覆顯示圖片。
   • Background size：背景圖的大小，我選 Cover，這樣圖片就會覆蓋住全區，不會有空白或圖片縮得太小的情況。

step 9

要完成查詢循環，最後還要設定動態資料，這樣才會知道在哪些地方要顯示這些動態。

我在幻燈片上的「標題」和「按鈕」設定動態資料，標題就會自動抓取文章的標題，點擊按鈕則會連到這篇文章，以下是建議設定項目：

一、設定標題：

1. 右側點單張幻燈片下的「Slider1 > Heading」。
2. CONTENT：
   • 動態欄位旁圖示點開，選 {post_title}。
   • HTML Tag：建議選 h3，層級比「最新文章」低，在結構上較清楚。
   • Style：選一個搭配幻燈片的預設顏色。
   • Link to：點開下拉選單，選「Dynamic Data」，等下方跳出欄位，再按閃電圖示，選 post_link 會套用 {post_url} 動態標籤，自動抓取文章的連結。
   • Open in new tab：點連結會開啟新分頁，建議開啟，增加讀者在網站上停留的時間。

二、設定按鈕：

1. 在右側點一下「Button」切換設定。
2. CONTENT：
   • 空白欄位填入按鈕上顯示的文字。
   • Size：要放在正中央，選 Large 較顯眼。
   • Style：同標題的 Style。
   • Link to：同上面標題的連結設定 (Dynamic Data + post_link)。
   • Open in new tab：開啟，原因和上面一樣。

step 10

目前，設定都完成了，接下來幫各區塊的內容調整位置：

一、第一個區塊：

1. 先到右側結構區點選，切換到第一個 Container 的設定。
2. 左側設定切換到「STYLE」。
3. 在下方「SPACING > Padding」的上下輸入「5~10%」，左側輸入「2~5%」，依比例做調整，內容較不會因切換裝置而跑掉。

二、第二個區塊：

1. 右側點選第二個 Container。
2. 先在左邊 CONTENT 下的 Align main axis 選 center，讓排列的內容置中。
3. 上面再切換到 STYLE，在「SPACING > Padding」上下方輸入「2~5%」拉開 3 個 Icon Box 與上下區塊的距離。

三、第三個區塊 (Container + Heading)：

1. 右邊點第三個 Container 切換設定。
2. 左邊「CONTENT > Align main axis」選 center，讓內容置中。
3. 上面切換到 STYLE。
4. 先在「STYLE > Layout > Padding」的上下填入「2~8%」的距離 (我填 5%)，把內容和邊緣的距離拉開，看起來較舒適。
5. 接著，在「STYLE > Background」選一個適合的背景色，讓第三個區塊和其他內容區隔開來。
6. 最後切換到「Heading」。
7. 到「STYLE > Layout > Padding」，在下方填入「2~4%」的距離 (我填 2%)，讓標題和幻燈片拉開一點距離。

step 11

現在，基本的網站首頁已設計完成，接下來要把這頁設為網站首頁。

1. 左上角點開設定圖示。
2. 等跳出選單，點「TEMPLATE SETTINGS」。
3. 再跳出選單，點「CONDITIONS」。
4. 在「CONDITIONS」下按「+ ADD CONDITIONS」。
5. 在選單上點「Front page」。
6. 最後，在右上角按儲存鈕，設計好的頁面就設為網站首頁了。

設計好的頁面像是下圖 (文案需要再填入)：

Bricks Builder 雖然門檻有點高，但照著步驟走，想完成一個基本的網站首頁，也沒那麼難，對吧？

WooCommerce 小工具介紹

Bricks Builder 整合了 WooCommerce 外掛，並提供 30+ 的 WooCommerce 小工具，只要在新增模板時選好頁面類型，能設計「單一商品頁」、「商品彙整頁」、「購物車頁」等。

而像商品列表 (Products)、結帳項目 (Cart Items) 等工具也都是已經預設好的，使用起來蠻直觀的。

下面我整理了一些實際會用到的功能，給你參考。

單一商品頁 (Single Product)

Bricks 提供的單一商品頁工具，大大降低了 WooCommerce 商品頁的設計難度。只要把它拖進編輯畫面，稍微調整一下版型，再在容器中開啟 Query 循環，整個商品頁就能快速建立完成。

實際用起來，最有感的功能是「商品列表（Products）」這個元件 —— 只要拖進頁面，商品就會自動顯示，包含圖片、價格、購物按鈕等 WooCommerce 預設的資訊。如果不需要進一步微調，幾乎是拉進來就能直接上線使用。

像這一頁就是我自己排的單一商品頁：圖片放左邊，右側是商品名稱、價格與操作按鈕，下方則是商品介紹與相關推薦，全程不到 10 分鐘就完成，非常直覺。

頁面上有使用的工具是：

• Product gallery：顯示商品主圖，放左欄，可設多圖版型。
• Product title、Product short description、Product price：右欄按順序是標題、摘要與價格。
• Add to cart：加入購物車按鈕。
• Product tabs：商品描述和商品評論用標籤切換。
• Related products：自動列出後台設定的相關推薦商品。

如果你有不同需求，Bricks 還提供以下這些單一商品頁可以使用的工具：

• Product content：放完整描述用，適合單頁的排版。
• Product meta：顯示商品分類、標籤或 SKU 編號等資訊。
• Product stock：顯示目前庫存狀態。
• Product rating、Product reviews：顯示評分與評論。
• Product additional information：展示商品屬性，例如尺寸、成分等，有設定的話建議要放。

商品彙整頁 (Product Archives)

Bricks 在商品彙整也提供了預設工具，如 Products、Products filter 等。

我覺得最方便的是 Mini Cart，可自己決定要放在頁面的哪個位置，也已經做好參數，只要微調樣式和版型，就能快速組出一個功能完整且好維護的商品彙整頁。

這頁使用到的工具有：

• Products：主要的商品清單，會自動所有商品排成格狀，可設定每列幾個商品、每頁顯示數量，及商品卡片的樣式 (圖片、名稱、價格、按鈕等)。
• Products filter：商品篩選器，能依分類、標籤、屬性等條件過濾商品。
• Products orderby：排序選單，可依 WooCommerce 預設的選項，按價格、最新、評價等條件重新排列商品。
• Mini cart：迷你購物車按鈕，點開可在原本頁面跳出視窗，即時顯示商品數量與總價，讓消費者快速結帳。可設定位置、樣式與文字內容。
• Breadcrumbs：麵包屑導覽列，顯示目前瀏覽的頁面是在哪個分類，也可自訂分隔符與樣式。

另外，Bricks 還提供了以下商品彙整頁工具，你再視需求做搭配：

• Products pagination：加上這個就能顯示「上一頁／下一頁」或頁碼，商品數量多就一定要加。
• Products total results：顯示篩選結果共有幾項商品，例如「共 12 項商品」，讓使用體驗更直觀。
• Products archive description：用來顯示分類或標籤頁面的描述文字，內容來自 WooCommerce 的分類設定，可加強 SEO 或做簡介。

購物車頁 (Cart)

想在 Bricks 裡製作 WooCommerce 購物車頁面，只要把幾個指定的工具拉進來就好，例如：

• Cart items：已套好邏輯參數，會自動帶出加入購物車的商品，包含圖片、標題、價格、數量、刪除等欄位，還能調整欄位順序、樣式和按鈕。
• Cart totals：會自動列出小計與總金額，也可選擇是否顯示稅額或運費 (自動帶入的優惠碼欄位可選擇隱藏)。

Bricks 幫 WooCommerce 做了完整的整合，如果你在建置電商網站，可一邊參考官方教學，一邊排排看，實作過就知道哪裡能客製、哪些功能，省下擴充的外掛。

Bricks Builder 有哪些免費擴充外掛？

最後，推薦一些 Bricks 官方推薦的免費外掛，不論你是要加快排版速度、強化設計、還是幫網站加幾個小互動功能，都能派上用場。

功能擴充

• Bricks Navigator：在 WordPress 管理欄中添加快速連結，可導航至 Bricks 的設定頁面，且有繁體中文的介面。
• Easy Bricks Navigation：簡化 Bricks Builder 內部導航，提高工作效率。
• Yabe Bricksbender ：提供「Plain classes」和「HTML to Bricks」等編碼功能。
• Yabe Ukiyo：為 Bricks 設計師和開發者打造的遠端模板管理器，有付費版。

小工具

• Bricksable：提供更多小工具，包括圖片懸浮效果和滑鼠覆蓋翻轉效果等。
• Click & Copy Element：「點擊複製」小部件，可放在促銷碼欄位旁。

設計

• Bricks Design Set：免費的模板區塊庫，所有區塊都免費，並可上傳自己的設計。
• Bricks Sections：提供可複製貼上的區段、小工具和範本。
• Renmoe Library：精心設計的套組，可快速創建網站。
• Max Addons：包含多種元素的完整套件，幫助打造理想網站，有付費版。
• Core Framework：簡單、現代且易於使用的模組化網站框架，有付費版。
• UiChemy Figma to Bricks Convertor：將 Figma 設計轉換為可編輯的 Bricks Builder 網站，但需使用 UiChemy 工具，有付費版。
• Bricks Templates：提供更多 Bricks Builder 模板，以 HTML 結構為主，有免費版也有付費版。

Bricks Builder 其他相關問題