Bricks Builder 是一款專為開發者與進階用戶設計的 WordPress 視覺化頁面建構器，以乾淨程式碼輸出和原生效能著稱。這篇教學將帶你完成 Bricks 的安裝授權、介面操作、第一個頁面建立，以及 Custom CSS 與動態內容等進階功能。
什麼是 Bricks Builder？為什麼它值得 WordPress 用戶關注
Bricks Builder 是一款以「佈景主題」形式運作的 WordPress 視覺化網站建構器（Visual Site Builder）。和多數以外掛形式存在的頁面建構器不同，Bricks 直接取代你的佈景主題，從 Header 到 Footer 的每一個元素都能在視覺化編輯器中完成。
核心優勢在三個字：乾淨。 Bricks 產出的前端程式碼不會夾帶多餘的 shortcode 或框架殘留。當你停用 Bricks，你的內容仍然是標準的 HTML，不會變成一堆亂碼——這是許多從 Elementor 遷移過來的用戶最在意的一點。
Bricks 的定位很明確：它不是給「只想拖拖拉拉就好」的初學者，而是給想要掌控每一行 CSS、每一個動態標籤的建站者。如果你是自由接案設計師、WordPress 開發者，或是需要高度客製化的網站主，Bricks 會讓你覺得「終於有人懂我」。
另一個值得關注的原因是 Bricks 的社群驅動開發模式。功能路線圖完全公開，用戶可以投票決定下一個開發優先順序。這代表你遇到的痛點，很可能在下一個版本就被解決。
Bricks vs Elementor vs Divi：三大 WordPress 頁面建構器比較
選擇頁面建構器之前，你需要知道這三款工具各自的強項與限制。我們團隊實際測試了三款建構器在相同主機環境下的表現，以下是關鍵維度的比較。
| 比較項目 | Bricks Builder | Elementor | Divi |
|---|---|---|---|
| 價格 | 一次性 NT$2,990 起（無月費） | 免費版 + Pro 約 NT$2,900/年 | 訂閱制或終身約 NT$7,400 |
| 運作方式 | 佈景主題 | 外掛 | 佈景主題 + 外掛 |
| 程式碼輸出 | 極簡乾淨，無 shortcode | 較冗餘，含框架標記 | 中等，含 shortcode |
| LCP 表現 | 優秀（< 1.5s） | 中等（2-3s） | 較慢（2.5-4s） |
| 學習曲線 | 中高（需理解 Container 邏輯） | 低（拖放直覺） | 低中 |
| 動態內容 | 原生支援 ACF/Meta Box | 需 Pro 版 | 有限支援 |
| WooCommerce | 原生 WooCommerce Builder | Pro 版支援 | 內建模組 |
| 無障礙設計 | 原生 ARIA 標籤支援 | 需額外設定 | 有限 |
真實案例：從 Elementor 遷移到 Bricks 的效能提升
一位台灣接案設計師將客戶的企業形象網站從 Elementor 遷移至 Bricks，在相同雲端主機環境下，Google PageSpeed Insights 分數從 62 分提升至 91 分。主要原因是 Bricks 產出的 DOM 節點數量大幅減少，前端不再載入 Elementor 的框架 CSS 與 JavaScript。
你適合哪一款？
- 選 Bricks：你重視效能與程式碼品質，願意花時間學習 Container 佈局邏輯，或是需要深度整合 ACF/Meta Box 動態內容
- 選 Elementor：你是 WordPress 新手，需要最大的外掛生態系與社群資源，或是團隊中有非技術成員需要操作
- 選 Divi：你偏好視覺化設計風格，需要大量預建模板快速交付，且對效能要求不高
Bricks Builder 授權方案與購買指南
Bricks 提供三種一次性付費授權，沒有月費或年費續約的壓力：
| 方案 | 可用網站數 | 適合對象 | 價格（NT$） |
|---|---|---|---|
| Hobby | 1 個網站 | 個人網站主 | 約 NT$2,990 |
| Freelancer | 無限網站（個人使用） | 自由接案設計師 | 約 NT$5,980 |
| Agency | 無限網站（含客戶網站） | 設計公司/代理商 | 約 NT$8,970 |
以上價格依官網匯率為準，實際金額可能因匯率波動略有差異。
免費體驗：Bricks Playground
如果你還沒決定是否購買，Bricks 官方提供 Playground 免費體驗環境。你不需要安裝任何東西，直接在瀏覽器中操作完整的 Bricks 編輯器，感受 Container 佈局、元素拖放、響應式設計等核心功能。這是降低決策門檻最好的方式——花 10 分鐘玩一下，比看任何評測都有用。
購買後，你會在帳戶頁面取得 License Key，這組金鑰將在安裝後用來啟用授權。
Bricks Builder 安裝與授權啟用步驟
安裝 Bricks 的流程和一般 WordPress 佈景主題類似，但有幾個關鍵細節需要注意。
前置需求
- WordPress 6.0 以上
- PHP 8.0 以上（建議 8.1+）
- 記憶體限制至少 256MB
- 有效的 SSL 憑證
Step 1：下載安裝檔
登入 Bricks 官網帳戶，下載 bricks.zip 佈景主題檔案。注意：Bricks 是佈景主題，不是外掛，所以不要在「外掛」頁面安裝。
Step 2：上傳至 WordPress
進入 WordPress 後台 → 外觀 → 佈景主題 → 新增佈景主題 → 上傳佈景主題，選擇剛才下載的 bricks.zip，點擊「立即安裝」。
Step 3：啟用佈景主題並輸入 License Key
安裝完成後，點擊「啟用」，你的網站佈景主題會切換為 Bricks。接著進入 WordPress 後台 → Bricks → License，貼上你在官網取得的 License Key，點擊「Activate License」。看到綠色勾勾就代表啟用成功。
常見錯誤排除
如果授權無法啟用，通常是以下原因：
- 伺服器防火牆阻擋：部分主機的 WAF 會阻擋外部 API 請求，需聯繫主機商開放 Bricks 的驗證端點
- SSL 問題：確保你的網站已安裝有效的 SSL 憑證，Bricks 的授權驗證需要 HTTPS 連線
- PHP 版本過舊：Bricks 需要 PHP 8.0 以上，在主機後台確認 PHP 版本
我們團隊在 Kinsta 主機上安裝 Bricks 時，整個流程特別順暢。Kinsta 預設提供 PHP 8.x 環境、一鍵 WordPress 安裝，加上 Google Cloud Platform 的基礎架構，從上傳到啟用授權不到 5 分鐘就完成了。
Bricks 編輯器介面 5 大區塊解析
進入 Bricks 編輯器的方式很簡單：在 WordPress 後台的頁面列表中，將滑鼠移到任一頁面上，點擊「Edit with Bricks」即可。
Bricks 的編輯器介面分為 5 大區塊，理解它們的功能是高效操作的基礎。
1. 頂部工具列
包含儲存、預覽、響應式裝置切換（桌面/平板/手機）、復原/重做、以及全域設定入口。你會最常用到的是響應式切換——Bricks 讓你在三種裝置視圖間即時切換，確認每個斷點的排版效果。
2. 左側元素面板
這裡列出所有可拖曳的 Elements：文字（Heading、Rich Text）、圖片、按鈕、影片、Icon、Container、Slider 等。Bricks 也內建了 Menu Builder，讓你直接在編輯器中建立和設計導覽選單——這是 Elementor 免費版做不到的功能。
3. 畫布區（Canvas）
中央的所見即所得編輯區域。你可以直接在畫布上點選元素進行編輯，也可以從左側面板拖曳元素到畫布上的指定位置。
4. 右側設定面板
選取任何元素後，右側會顯示該元素的完整設定：Content（內容）、Style（樣式）、Conditions（條件顯示）。Style 分頁中可以設定字型、顏色、間距、背景等所有 CSS 屬性，而且支援直接輸入 CSS 值，不只是拖拉調整。
5. 結構面板（Structure Panel）
類似瀏覽器 DevTools 的 DOM 樹，以層級方式顯示頁面中所有元素的父子關係。當你的頁面結構變得複雜時，結構面板是快速定位和重新排列元素的救星。
關鍵觀念：Container 佈局
Bricks 以 Container 為佈局基礎，而非 Elementor 的 Section → Column 模式。一個 Container 可以設定為 Flex 或 Grid 排列，巢狀 Container 可以實現任何複雜的版面配置。這是 Bricks 與 Elementor 最大的操作差異——一旦你理解 Flexbox 的邏輯，Bricks 的佈局能力會遠超傳統的欄位系統。
實戰教學：用 Bricks Builder 建立你的第一個頁面
接下來，我們用 Bricks 從零建立一個「服務介紹頁」，這是台灣中小企業最常見的頁面需求。
Step 1：新增頁面並進入編輯器
在 WordPress 後台 → 頁面 → 新增頁面，輸入頁面標題（例如「我們的服務」），然後點擊「Edit with Bricks」進入編輯器。
你可以選擇從空白開始，或是從 Bricks 的模板庫（Template Library）匯入預建模板。模板庫中有數十種分類（Landing Page、About、Services 等），點擊預覽後一鍵匯入，再根據需求修改內容。對新手來說，從模板開始是最快的方式。
Step 2：建立基本版型結構
如果從空白開始，先拖入一個 Container 作為 Hero Section。在 Container 的 Style 中設定：
- Layout：Flex、方向 Column、置中對齊
- Padding：上下 80px、左右 20px
- Min Height：60vh（讓 Hero 區域佔螢幕 60% 高度）
接著在 Hero Container 內拖入 Heading 和 Rich Text 元素，輸入你的標題與副標題。
Step 3：設定全域顏色與字型
進入頂部工具列的 Settings → Theme Styles，在這裡設定 Global Colors 和 Global Typography。例如：
- 主色：
#2563EB（藍色系） - 輔色：
#1E293B（深灰） - 標題字型：Noto Sans TC Bold
- 內文字型：Noto Sans TC Regular
設定好全域樣式後，所有新增的元素都會自動套用，不需要逐一調整。如果你需要更多中文字體選擇，可以透過 Google Fonts 或自行上傳字型檔。
Step 4：加入圖片與響應式設定
拖入 Image 元素，上傳或選擇媒體庫中的圖片。在 Style 中設定：
- Width：100%
- Object Fit：Cover
- Border Radius：8px（圓角效果）
切換到平板和手機視圖，調整圖片在小螢幕上的顯示方式。Bricks 允許你在不同斷點設定不同的樣式值——例如手機版隱藏裝飾性圖片，只保留核心內容。
Step 5：設定 Section 背景與完成頁面
為服務區塊的 Container 設定背景：
- 純色背景：
#F8FAFC（淺灰，區隔不同區塊） - 或漸層背景：從
#EFF6FF到#FFFFFF - 或圖片背景：上傳圖片後加上半透明覆蓋層
重複以上步驟，建立 3-4 個服務項目的卡片式排列（使用 Container + Grid 佈局），最後加入 CTA 按鈕。
Step 6：預覽與發布
點擊頂部工具列的「Preview」在新分頁中查看前台效果，確認桌面、平板、手機三種裝置的排版都沒問題後，點擊「Publish」發布頁面。
Bricks 進階功能：Custom CSS、自訂程式碼與動態內容
當你掌握了基本操作，Bricks 的進階功能才是它真正拉開與其他建構器差距的地方。
Custom CSS 與 CSS 變數
Bricks 允許你在每個元素的 Style 面板中直接撰寫 Custom CSS。更強大的是，你可以使用 CSS 變數（Custom Properties） 統一管理設計 Token。
例如，在 Theme Styles 中定義：
:root {
--primary-color: #2563EB;
--text-color: #1E293B;
--spacing-lg: 48px;
}
之後在任何元素的 Custom CSS 中直接引用 var(--primary-color)，當你需要全站換色時，只要改一個地方。
自訂程式碼（Custom Code）
需要嵌入第三方追蹤碼或自訂 JavaScript？Bricks 提供兩種方式：
- 全域層級：在 Bricks → Settings → Custom Code 中加入 Header/Footer 腳本（適合 Google Analytics、Facebook Pixel）
- 元素層級：拖入 Code 元素，直接在頁面中嵌入 HTML/CSS/JavaScript
注意：避免在每個頁面都用 Code 元素載入相同的全域腳本，這會造成重複載入影響效能。全域腳本一律放在 Settings 中。
動態內容（Dynamic Data）
動態內容是 Bricks 最強大的功能之一。透過 Dynamic Tags，你可以在任何文字或圖片欄位中插入動態資料：
{post_title}：自動帶入文章標題{post_author}：顯示作者名稱{acf_field_name}：讀取 ACF 自訂欄位的值{meta_box_field}：讀取 Meta Box 欄位
Query Loop Builder
Query Loop 是建立動態列表的核心工具。你可以用它建立：
- 部落格文章列表（依分類、標籤篩選）
- WooCommerce 產品列表（依價格、庫存狀態排序）
- 自訂文章類型的內容展示
操作方式：在 Container 上啟用「Use Query Loop」，設定 Post Type、篩選條件、排序方式，Container 內的元素就會自動重複渲染每一筆資料。
一個實際案例：台灣電商網站用 Query Loop + WooCommerce 建立動態產品頁，每個產品卡片自動帶入商品圖片、名稱、價格和「加入購物車」按鈕，當後台新增商品時前台自動更新，不需要手動編輯頁面。
條件顯示（Conditional Display）
在任何元素的 Conditions 分頁中，你可以設定顯示條件：
- 只有登入用戶才看到特定內容
- 根據用戶角色顯示不同的 CTA
- 依據日期或時間控制促銷區塊的顯示
這對需要會員制內容或分眾行銷的網站來說非常實用。
Bricks Builder 推薦主機：為什麼選 Kinsta
Bricks 產出的乾淨程式碼需要搭配高效能主機才能發揮最大優勢。如果你的主機回應時間慢，再乾淨的前端程式碼也救不了 TTFB（Time to First Byte）。
我們團隊測試過多家主機搭配 Bricks 的表現，Kinsta 是我們目前最推薦的選擇，原因如下：
效能架構：Kinsta 使用 Google Cloud Platform 的 C2 高效能虛擬機，搭配 Nginx + Redis 物件快取。Bricks 的精簡 HTML 輸出加上 Kinsta 的伺服器端快取，我們實測的 TTFB 穩定在 200ms 以下。
開發友善：每個網站都有獨立的暫存環境（Staging），你可以在 Staging 上測試 Bricks 的新版型，確認沒問題後一鍵推送到正式環境。對接案設計師來說，這個功能省下大量來回溝通的時間。
安全與維護：每個網站獨立容器隔離、自動每日備份、內建 Cloudflare 整合提供企業級 DDoS 防護和 CDN 加速。
PHP 環境：預設 PHP 8.x，記憶體限制 256MB 以上，完全符合 Bricks 的運行需求，不需要額外調整 php.ini。
| 方案 | 月費（USD） | 月費（NT$，依匯率估算） | WordPress 網站數 | 儲存空間 | 適合對象 |
|---|---|---|---|---|---|
| Starter | $35 | 約 NT$1,120 | 1 | 10GB | 個人網站 |
| Business 1 | $115 | 約 NT$3,680 | 5 | 30GB | 接案設計師 |
| Business 2 | $225 | 約 NT$7,200 | 10 | 40GB | 設計公司 |
以上台幣價格以 1 USD ≈ 32 TWD 估算，實際金額依 Kinsta 官網結帳匯率為準。
（推薦試試 Kinsta 的入門方案，我們團隊實際使用後，Bricks 網站的載入速度與穩定度都明顯提升。）
想了解更多 Kinsta 的功能細節，可以參考我們的 Kinsta 完整評測。
Bricks Builder 學習資源與社群
Bricks 的官方文件相當完整，但如果你偏好影片教學或中文資源，以下是我們推薦的學習管道：
- Bricks 官方文件（Academy）：涵蓋從基礎到進階的所有功能說明，搭配截圖與範例程式碼
- Bricks 官方 Facebook 社群：超過萬名成員的活躍社群，提問通常在幾小時內就有回覆
- YouTube 教學頻道：搜尋「Bricks Builder tutorial」可以找到大量英文教學，部分台灣創作者也有繁體中文教學影片
- Bricks Playground：隨時可以開一個免費的測試環境練習，不怕搞壞正式網站
如果你想同時提升網頁設計的 UX 基礎，Coursera 的 UX 設計課程是不錯的起點，能幫助你在使用 Bricks 建站時做出更好的設計決策。
結論
Bricks Builder 是目前 WordPress 生態系中效能最好、程式碼最乾淨的視覺化頁面建構器。它不適合所有人，但如果你是追求品質的建站者，它會是你的最佳選擇。
回顧本文重點：
- Bricks 的核心優勢是乾淨程式碼輸出、原生效能和高度客製化能力，適合開發者與進階用戶
- 與 Elementor/Divi 的差異在於 Container 佈局邏輯、無 shortcode 殘留、以及原生動態內容支援
- 安裝流程只需 3 個步驟：下載 → 上傳佈景主題 → 啟用並輸入 License Key
- 編輯器 5 大區塊（工具列、元素面板、畫布、設定面板、結構面板）掌握後即可高效操作
- 進階功能包含 Custom CSS 變數、Query Loop 動態列表、條件顯示，能滿足複雜的商業網站需求
下一步行動建議：先到 Bricks Playground 免費體驗編輯器，確認操作邏輯符合你的工作習慣。如果決定購買，搭配 Kinsta 主機能讓 Bricks 的效能優勢發揮到最大——從安裝到上線，整個流程不到 30 分鐘。
Bricks Builder 常見問題
Bricks Builder 有免費版嗎？
Bricks 沒有免費版，但提供 Playground 免費體驗環境，讓你在瀏覽器中直接操作完整編輯器。正式使用需購買授權，最低方案約 NT$2,990（一次性付費，無月費）。
Bricks 可以和 Elementor 同時安裝嗎？
技術上可以，但強烈不建議。兩者會載入各自的 CSS 和 JavaScript 框架，嚴重影響網站效能。如果你要從 Elementor 遷移，建議先在暫存環境中逐頁重建，完成後再停用 Elementor。
Bricks 支援繁體中文介面嗎？
Bricks 的編輯器介面目前以英文為主，但 WordPress 後台的 Bricks 設定頁面有部分中文翻譯。元素名稱和設定選項大多是通用的 CSS/HTML 術語（如 Padding、Margin、Flex），對有基礎網頁知識的用戶來說不會造成障礙。
Bricks 的模板可以匯入匯出嗎？
可以。Bricks 支援將整個頁面或單一 Section 匯出為 JSON 檔案，也可以從 JSON 匯入。這對接案設計師來說非常方便——你可以建立自己的模板庫，在不同客戶專案間重複使用。
Bricks 適合 WooCommerce 電商網站嗎？
非常適合。Bricks 內建 WooCommerce Builder，你可以用視覺化方式設計商品頁、購物車頁、結帳頁的每一個細節。搭配 Query Loop 和動態標籤，還能建立自訂的產品列表和篩選功能。如果你正在規劃 WordPress 購物車網站，Bricks 是目前設計自由度最高的選擇。
從 Elementor 遷移到 Bricks 困難嗎？
遷移需要手動重建頁面，因為兩者的資料結構完全不同（Elementor 用 shortcode，Bricks 用原生 HTML）。好消息是，Bricks 社群有開發者製作了遷移輔助工具，可以自動轉換部分基礎元素。對於複雜頁面，建議預留每頁 30-60 分鐘的重建時間。遷移後的效能提升通常非常明顯，值得投入這個時間。
