Brizy 教學：拖放式 WordPress 頁面編輯器 (超直覺、快速上手)

最後更新時間：2026-01-02，由 Dean 更新

在找能快速設計出質感網站的好用工具嗎？Brizy 是我操作起來覺得很直覺的一款頁面編輯器，介面乾淨、模板好套，適合不想碰程式、又想很快做出好看網站的人。

這篇文章會先講清楚 Brizy 的優缺點、誰適合用，再帶你一步步用模板做出首頁、彈出視窗和自動化表單。最後我也會補上和其他編輯器的比較，讓你看看哪一款工具最適合你。

Brizy 是什麼？優缺點有哪些？

Brizy 是一套視覺化操作的 WordPress 頁面編輯器，但主打的不是功能多，而是介面簡潔、上手快，還有不少設計感不錯的模板可直接套用，非常適合剛開始架站的人。

這個頁面編輯器是由 ThemeFuse 團隊開發的，他們希望讓沒學過寫程式的人，覺得設計網站是一件簡單有趣的事情。

使用 Brizy 架站優點有哪些？

• 操作直覺：簡化操作介面，好理解也好上手，適合新手。
• 功能與模板：內建約 50 個小工具、200 多個頁面模板和 200 多個區塊模板，可輕鬆打造看起來專業的網站。
• 整合完整：支援 Google Fonts、YouTube、Mailerlite 等常用的第三方服務。
• 內建彈窗與表單：Pro 版提供彈出視窗與完整表單功能，不需額外安裝外掛。
• 支援自訂 CSS：可選擇區塊，嵌入自訂 CSS。
• 內建動態內容：Brizy Pro 的動態資料可插入標題、日期、作者、精選圖片等，不用再安裝外掛，還可搭配 ACF 等動態管理外掛再優化。
• 響應式設計：可針對桌機、平板、手機各自調整樣式。
• 全域樣式：網站字體、按鈕、顏色可統一設定、全站套用。
• 可隱藏商標：Pro 版可隱藏 Brizy 商標，方便接案或品牌代理使用。
• 免費版好用：履歷、作品集或部落格網站即可免費使用，頁面上不會出現 Brizy 的 Logo。

使用 Brizy 架站缺點有哪些？

• 模板替換不便：想換整個頁面模板時，沒辦法一鍵重置或覆蓋，要一個個手動刪區塊。
• 細節設定較少：像欄寬、間距等，只能拖拉調整數值，不能直接輸入數字，對想精準排版的人來說有點卡。
• 客製化彈性較低：無法自訂 WooCommerce 的結帳頁、購物車頁與會員帳號頁，也缺少 Loop Builder 與篩選器功能，無法靈活設計商品分類頁與商品彙整頁。
• 不支援自訂 HTML：沒有「自訂 HTML」的小工具，只有插入短代碼的小工具，靈活度稍低。
• 無擴充外掛：官方未開發其他擴充外掛，也沒開放給第三方開發，生態系不如 Elementor 豐富。
• 更新較慢：與其他編輯器相比，新功能推出的速度稍慢一些。
• 結構較簡單：如果想做多層分類、大量內容或會員系統等結構較複雜的網站，就不太適用。
• 繁中資源較少：目前台灣使用者不多，遇到問題較難找到解答。

Brizy 適合哪些人？

• 剛開始架站、不想花太多時間學習的新手。
• 想快速完成作品集或個人品牌頁面，也想保持一定質感的工作者。
• 想在網站上製作多個表單或彈出視窗的行銷工作者。
• 想做 WooCommerce 商店但不打算客製太多的小型商家。
• 想提高交付效率的中小型網站設計師或工作室。

Brizy 免費版和 Pro 版差在哪？

在查詢的時候，可能會發現 Brizy 怎麼有免費版、有 Pro 版，還有一個叫 Brizy Cloud 的？

所以，這一段會先幫你釐清 Brizy Page Builder 裡，免費版跟付費版的功能差在哪，也會補充 Brizy Cloud 雲端版是做什麼的，讓你一次搞懂這些版本的差異。

Brizy VS. Brizy Pro：主要功能差異

Brizy 免費版提供基本的頁面設計功能，適合用來製作個人作品集、簡單介紹頁；如果你需要更多模板、串接表單、做彈出視窗或電商頁面，就需要升級到 Pro 版。

以下整理出免費與 Pro 版的主要差異：

功能項目	Brizy 免費版	Brizy Pro
模板數量	約 9 個免費頁面	200 多個頁面和 200 多個區塊模板
表單	不支援	可套版也可自訂樣式，並串接第三方服務，如Google Mail、 Kit 等
字型	可串接 Google Fonts	可串接 Google Fonts、Adobe Fonts 或自行上傳
全域樣式	支援字型和顏色管理	支援字型和顏色管理
彈出式視窗 (Popup)	無法使用	可建立多個彈窗並設定不同的觸發條件和顯示
動態內容 (Dynamic Content)	不支援	可使用內建的動態內容，如文章標題、精選圖片、作者等，若搭配 ACF、Toolset 可更客製化。
WooCommerce 支援	僅可編輯一般頁面	可自訂單一商品頁、彙整商品頁、分類頁等。
第三方整合	不支援	支援 15+ 平台：Mailchimp、Kit、Zapier、MailerLite 等
裝置樣式調整	可針對手機、平板調整樣式與顯示設定	可針對手機、平板調整樣式與顯示
白標功能	不支援	可移除 Brizy 標誌，自訂控制面板風格
技術支援	社群論壇為主	提供 VIP 客服與技術支援通道
年訂閱價格	0 元	59 美元 (一個網站) 起

如果你正在經營品牌、需要收集名單、做活動頁或自訂 WooCommerce 商品頁，Pro 版可省下不少時間與外掛費用；但如果只是做幾個頁面或一頁式網站，用免費版就能完成基本需求了。

Brizy Cloud 雲端版跟 WordPress 外掛版有什麼不一樣？

除了可以在 WordPress 上用 Brizy 外掛設計網頁，Brizy 也有推出自己的雲端建站平台，叫做 Brizy Cloud。

你可以把它想成是像 Wix 或 Squarespace 一樣的線上工具，像是租用主機、SSL 憑證、備份、CDN 等，Brizy 都幫你代管處理好，只要註冊帳號，就能開始拖拉設計網站。

不過因為是封閉式系統，無法安裝 WordPress 外掛，也無法像 WordPress 網站可擴充功能。

如果你希望有更多自訂空間，像是加裝表單工具、整合 SEO 外掛，還是會建議用 WordPress 版的 Brizy 會比較合適。

WordPress架站教學：15分鐘自己架起一個網站 (含主機75折)

Brizy 基礎教學：5 步驟快速設計網站頁面

Brizy 的一大特色，就是可以套用設計好的模板，讓你用最快的速度把網站搭建起來。

這篇教學會用 5 個簡單步驟，帶你從安裝啟用開始，到匯入模板、調整文字圖片、設定選單，再到最後的 SEO 設定，完整建立出你的網站首頁。

如果你還在猶豫要不要付費也沒關係，從步驟二開始的內容，都是免費版就能操作的功能，可以先體驗看看再決定。

步驟一：安裝 & 啟用 Brizy

step 1

先到 Brizy 官網訂閱方案：在上方導覽列點「Price」，選「Brizy WordPress」，接著挑一個適合自己的方案。

step 2

接著填寫購買資料：

1. 推薦用信用卡付款。
2. 如果你常用這張卡，可以勾選儲存資訊，之後付款比較快，也可以不勾選。
3. 填完卡片資料後，就點訂閱進下一步。

step 3

訂閱成功後會看到這個畫面，點「SET PASSWORD」設定你的帳號密碼。

step 4

這一頁是填基本資料：

• First Name：你的名字。
• Last Name：你的姓氏。
• Email Address：輸入常用的信箱 (登入用)。
• Confirm your Email address：再輸入一次信箱確認。
• New Password：設定密碼。
• Repeat New Password：再輸入一次密碼。

都填好之後，按下方的「Save Account Settings」就完成帳號設定啦！

step 5

等跳到下載畫面，往下滑找到「Brizy WordPress Plugin」，下載 2 個外掛檔案。

step 6

下載好之後，記得複製驗證碼 (License Key)：

1. 頁面往上拉，點上方的「WP Licenses」。
2. 跳到新頁面後，點「Full key」，在跳出的小視窗複製整段驗證碼就行了。

step 7

接下來登入你的 WordPress 後台，上傳剛剛下載的 2 個外掛檔案：

1. 左側選單點「外掛 > 安裝外掛」。
2. 跳轉後點上方的「上傳外掛」，會出現檔案上傳區。
3. 點「選擇檔案」，選好後按右邊的「立即安裝」。
4. 安裝完按「啟用外掛」。

step 8

最後輸入驗證碼，完成啟用步驟：

1. 啟用後會看到「Welcome to Brizy Pro」，點「Activate」。
2. 等跳轉到驗證畫面，貼上剛剛複製的 License Key，再按旁邊的「Activate」。

這樣就成功啟用 Brizy 啦！下一部分會進入 Brizy 編輯器，開始製作網站首頁。

步驟二：新增頁面 & 匯入模板

step 1

啟用外掛之後，我們先來新增一個頁面：

1. 左側選單點開「頁面」。
2. 在跳出選單上點「新增頁面」。

step 2

打開空白頁面後，會看到 WordPress 的預設編輯畫面：

1. 把頁面命名為「Home」(這會是你網站的首頁)。
2. 右上角點「儲存草稿」先存起來。
3. 存好後，點左上角的「Edit with Brizy」就能進入 Brizy 編輯器了。

step 3

進到 Brizy 編輯器後，點一下中間的「＋」開始設計。

step 4

Brizy 提供兩種模板：

• Layout (整組頁面)：整套設計好的版型，可最快套用。
• Block (單一區塊)：自己一塊塊組起來。

我選 Layout (整組模板) 來設計首頁，最快最省事：

1. 上方切到「Layout」。
2. 左邊挑一個風格分類，看一下有哪些模板可以選。

step 5

每一組 Layout 裡面的頁面數量不太一樣，有的只有首頁，有的會附好幾個內頁。

你可以先點進去看內容，確定喜歡再用：

• 要套用就按右下角的「Import This Layout」。
• 如果想換一組，就點左上「← Back to Layouts」返回重選。

套版完成後，就可以開始改文字、換圖片，打造自己的首頁啦！

步驟三：介面操作 & 內容調整

step 1

匯入模板後，會看到這樣的畫面：

• 編輯區：就是畫面中間的版型，你可以直接點想改的東西，像是區塊、文字或圖片，也可以從左邊拖小工具進來。
• 功能區：左側選單由上往下分別是小工具列表、區塊層、樣式管理、裝置切換、模板選擇和回到 WordPress 後台等等。
• 檢視區：右下角的功能則是教學影片、隱藏工具列、返回上一動作、另開預覽跟存檔等等。

在開始改內容前，先稍微認識一下 Brizy 裡的「區塊、網格、物件」是怎麼組成的，這樣比較不容易改錯位置：

名稱	用來做什麼	其他說明
1. 區塊 (Block)	就是一大塊內容區，像首頁主視覺、介紹段落、表單等。	．每段內容如：網頁主視覺、方案介紹、表單等，都是一個區塊。 ．點區塊下方的「＋」可新增區塊。 ．點右上黑色圓形圖示可刪除整個區塊。
2. 網格 (Column / Row)	排版用的格子，預設是左右排列，或把內容包在一起。	．新增區塊後，記得從左側小工具拉一個 Column 或 Row 才能排內容，預設都是左右兩欄。 ．想要 3 欄、5 欄，點一下網格，出現藍框後，按右上「＋」可多加格數，但只能左右新增。 ．Column 或 Row 沒有差異。一般用 Column。
3. 物件 (Elements)	就是文字、圖片、按鈕等可以拉進頁面做設計的元件。	．從左側工具列拖曳進網格中。 ．網格上下或左右都可以插入物件。

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

step 2

Brizy 有一個超實用的功能，叫「全域樣式設定」，可以一次設定網站的字型和顏色。這樣每次改字，不用再一個一個調字體、貼色碼，超省事。

我們先來串接 Google Fonts，可選用適合繁中的字型：

1. 點左側那個像掃把的圖示。
2. 側欄會跳出樣式設定視窗，這邊我點「Heading 1」來示範。
3. 在跳出小視窗點「Add New Font」新增字型。
4. 再在跳出視窗選「Google Fonts」。
5. 在「Font Name」輸入字型名稱，我填入 Noto Sans TC (思源黑體)。
6. 點「Continue」，剛填的字型就會加進選項了。

加好字型後，你就可以在標題和段落那邊選到這個字體。建議整個網站都用同一種，看起來會更統一、更有質感。

30款中文免費商用字體下載，不侵權也能提升設計風格【2025】

step 3

接著，把網站的顏色也一起設定起來，這樣之後套色不用每次都貼色碼。

1. 同一個側欄視窗往上拉，找到「Colors」，點顏色框就可以修改。
2. 選你想要的顏色，或直接貼上色碼就可以。

調色盤的個別設定如下：

調色盤 (由左至右)	用途說明
Color 1	主要品牌色 (不會直接套用，但改起來方便)。
Color 2	標題文字的顏色 (H1~H6)，可跟主要品牌色一樣。
Color 3	按鈕背景色 / icon 主色，可跟主要品牌色一樣
Color 4	次要背景色 (非主要背景色)，根據主要的背景色和品牌色做調整，可不填。
Color 5	副標文字色 (Subtile)，通常比主要品牌色淺一點。
Color 6	預設文字色 (Custom)，可設一個較亮的顏色突出段落中的重點。
Color 7	段落文字色 (Photograph)，跟主要背景有對比，看得清楚就好。
Color 8	有超連結的文字 / 按鈕上的文字，要設一個統一的。

至少先把 Color 2 (標題)、Color 3 (按鈕)、Color 7 (段落) 填好，版面才不會整片灰灰的。

除了基本的 3 個顏色，我自己還會多設 Color 5 和 8，讓整體看起來更有層次感。

配色網站推薦：11 款設計師必備色票工具，品牌視覺一秒升級

step 4

接下來，把頁面上的文字都改成自己要的：

1. 點一下文字區，改好內容。
2. 然後調整樣式，在功能列點「T」，打開文字樣式設定視窗。

下面是我平常的設定方式，給你參考一下：

• Typography：就是選這段文字是標題還是段落，如果是套版，用預設格式 (Custom) 就好。
• Size：標題設 32～24px，看起來比較有層次；段落設 16px 剛好，但別低於 14px，會太小。
• Weight：標題我設 Bold，段落用 Regular，看起來比較不吃力。
• Line Height (行高)：標題大約設 1.2～1.4、段落用 1.5～1.6 會比較順眼。
• Letter Spacing (字距)：我通常設 0，如果字型設計比較緊湊也可設 0.2～0.5px。

step 5

文字都改完後，來換一下首頁的背景圖：

1. 點一下主視覺的區塊。
2. 出現右上黑色圓形按鈕，點開後選圖片圖示。
3. 會跳出目前的背景圖，把它刪掉，再上傳你要用的圖片。

step 6

最後，把頁面上其他圖片也換成你自己的：

1. 點一下圖片 (會有灰色虛線框)。
2. 功能列出現後，點圖片圖示。
3. 按 x 刪掉，再點一下，就能上傳你的圖囉！

把主要畫面都搞定後，接下來就是設定頁首跟頁尾的部分了。

步驟四：建立選單 & 設定首頁 / 頁尾

step 1

先把目前的頁面存檔，我們要回到 WordPress 後台建立選單：

1. 右下角按「Update」儲存編輯內容。
2. 左下角點「門」的圖示。
3. 跳出選單後，點「Go to Dashboard」回到 WP 的後台畫面。

step 2

接著，新增幾個要放進選單的頁面：

1. 從左側選單點「頁面」進頁面列表。
2. 點右上「新增頁面」，把你網站會用到的頁面都先建起來 (內容之後再填)。
3. 建議至少要有這 2 個：
   • 關於我：簡單介紹你是誰、做什麼的。
   • 方案說明頁：如果你有產品、服務或課程，可以放這裡做說明。

step 3

頁面都準備好之後，我們來設定網站上方的導覽列選單：

1. 點左側「外觀」>「選單」。
2. 新增選單項目：
   • 點開「頁面」，勾選剛剛建立的幾個頁面後，點「新增至選單」。
   • 如果你網站未來會寫文章，可以加一個分類「所有文章」，方便讓讀者找到內容。
3. 選單結構：
   • 可以幫選單取個名字，像是「主選單」或「導覽列」，也可不改。
   • 選單項目可以點開箭頭，修改名稱，或用滑鼠上下拖曳順序。
   • 下方的選單位置設定，先保留預設值就好。
4. 最後，記得點「儲存選單」才會保留設定喔。

好了之後，從左側選單點回頁面列表，找到剛剛編輯的 Home 頁面，下方點「Edit with Brizy」。

step 4

進到 Brizy 編輯器後，我們先清掉原模板裡的頁首設計：

1. 點一下頁首的左側圖片。
2. 等功能列跳出後，點垃圾桶圖示刪除。

step 5

把原本內容都清空後，我們要加上新的 Logo 跟選單：

1. 左上角點「+」打開小工具清單。
2. 拖曳「Image」到左邊欄位。
3. 再拖曳「Menu」到右邊欄位。

step 6

接下來，我們來改一下頁首 Logo、選單跟社群 icon 的設定和加入圖片：

1. Logo 圖片：
   • 點一下圖片小工具，會跳出功能列，點圖片圖示就能上傳你自己的 Logo。
   • 建議用橫式的 Logo，寬度至少抓個 512px 以上比較不會糊。
2. 導覽列選單：
   • 雖然沒有即時預覽效果，但一樣可以叫出功能列來改。
   • 左邊 4 個功能是你最常會用到的：
     • 第一個是選擇要使用的選單，還能調整項目之間的間距。
     • 接下來三個就是改字型樣式、顏色、對齊方式，依照網站風格做調整。
3. 社群 icon：
   • 要點圖示本身，功能列才會出現正確的。
   • 功能列上較常用的設定，是 icon 圖案、顏色、位置或調整順序。
   • 建議先點超連結圖示，把社群連結加上去，並開啟下面 2 個選項：
     • 開啟新分頁：讀者點了才不會離開你的網站。
     • nofollow：給搜尋引擎看的，避免權重都跑到社群上了。

step 7

最後一步，把頁尾也簡單設計一下：

1. 把原本頁尾內容刪掉，拉一個文字元件進來，填上「你的網站名稱 © 2025」就好。
2. 右下角點「Update」存檔。
3. 點開新分頁的圖示，預覽一下成果。

這樣就完成一個簡單又有質感的網站首頁啦！

首頁設計完成，可以根據網站類型，進一步設計其他不同頁面。像是公司官網、個人網站、線上課程網站，所需頁面都不同，詳細請閱讀《網頁設計範例》。

步驟五：頁面 SEO 設定技巧

最後，我們來補上網站和頁面的基本設定，讓你的網站更容易被搜尋引擎找到，也能在社群分享時顯得更專業。

step 1

先回到 WordPress 的頁面編輯器：

1. 左下角點一下那個「開門」圖示。
2. 選「Go to Dashboard」回到 WordPress 的編輯畫面 (要記得先存檔)。

step 2

在 WordPress 編輯器裡，做一些頁面的基本 SEO 設定：

1. 精選圖片：上傳一張橫式圖片，這張圖會出現在社群分享的預覽畫面中。
2. 代稱：如果頁面標題是中文，WordPress 會自動轉換一個英文網址，或自行譯成簡單好記的。
3. 點右上角的「…」選單 → 點「設定為首頁」，就可以把這一頁設為網站首頁 (如果這頁不是首頁就跳過這步)
4. 全部都設好後，記得點右上角的「儲存」才會保留設定。

step 3

再來幫整個網站設定好基本資訊：

1. 在後台左側選單點「設定 > 一般」。
2. 網站標題：這是你的網站名稱，也會顯示在瀏覽器標籤與 Google 搜尋結果上，簡單好記就行。
3. 網站說明：建議寫 1 句話或列幾個關鍵詞，讓搜尋引擎快速知道你的網站主題。
4. 網站圖示 (favicon)：上傳一張正方形的 Logo，小圖會出現在瀏覽器分頁左上角，建議尺寸 512×512 px。

都設好後，拉到最下方按一下「儲存設定」，這樣網站的基本 SEO 就做好了。

之後就可以用一樣的方式繼續設計「關於我」、「教學方案」等內頁， 讓網站可以獲得好的曝光。

如果你想再優化一下 WordPress SEO，下面這兩類外掛有空時裝一下，會蠻有幫助的：
1. SEO 外掛：像是 Rank Math 或 Yoast，是專門幫你調整網站 SEO 用的工具，有 301 轉址、404 頁面監測等功能。
2. 監測外掛：推薦裝 Site Kit by Google，可以一次幫你串好 GA4、Google Search Console，追蹤網站流量、看單一頁面流量、關鍵字表現的時候會很方便。

更多 SEO 教學，請閱讀《WordPress SEO 全指南》。

Brizy 進階應用：彈出視窗 + 表單蒐集

一般而言，我們經營網站最大的目標，就是蒐集到潛在客戶的名單，所以「表單蒐集」就特別重要。

「彈出視窗」和「表單」等兩個功能都是 Brizy Pro (付費版) 才能用的進階設定，操作起來很直覺，適合用來做行銷活動、限時優惠、電子報名單收集等等，也不用再買相關外掛了。

接下來，會帶你一步步設計出可自動觸發的彈出視窗及自動化表單，不管是想提醒讀者有最新課程、還是想邀請他們下載免費資源 (Lead Magnet)，都能快速上手。

快速設計彈出視窗 (Popup)

step 1

我們先從 WordPress 後台新增一個彈出視窗開始：

1. 在左側選單點「Brizy > Popups」。
2. 點右上角的「Add New Popup」。
3. 幫這個彈窗取個名字，之後比較好管理。
4. 右邊先點一下「儲存草稿」。
5. 接著點「Edit with Brizy」進入編輯器。

step 2

進到編輯器後，按一下「+」開始編輯。

step 3

你可以選擇自己設計或直接套用 Brizy 現成的設計：

• 自訂：點「Create your own」從空白開始設計。
• 套版：點進你喜歡的模板，直接套用就好。目前 Brizy 提供約 60 種彈窗範本，樣式都不錯。

step 4

匯入模板後，如果你之前有設全域調色盤 (參考上述步驟 3-3)，顏色就會自動幫你套好，很方便。

我想在網站上做一個「最新課程開放報名」的彈窗：

1. 點一下文字框。
2. 在跳出的功能列中，點「T」開啟文字設定。
3. 設定字型為你統一的全域字型 (如果還沒設定可參考步驟 3-3)。
4. 視情況調整字體大小、字距。

step 5

接著設定按鈕的樣式與連結，如以下操作：

1. 點一下你要調整的按鈕。
2. 點功能列上的色框圖示，調整按鈕的背景色與樣式。
3. 點右側的「連結」圖示：
   • 填入按下按鈕後會跳轉的頁面網址。
   • 勾選「Open in New Tab」讓讀者跳到新分頁，不離開原站。
   • 如果是外部連結，記得勾選「Make it Nofollow」，避免網站 SEO 權重流失。

右方的第二個按鈕，我想讓讀者「關閉視窗」，這樣設定：

1. 點選要設定的按鈕。
2. 叫出功能列後，點連結圖示。
3. 選「Action」，開啟「Close Popup」，這樣點按鈕就能把彈窗關掉。

step 6

我還想幫彈窗加上框線，看起來更顯眼，也建議你可以加：

1. 點一下彈窗。
2. 左上角點一下灰色圖示，叫出樣式設定。
3. 選中間的方框圖示。
4. 選「Border」設定框線顏色與粗細 (我這邊設 1px)。

step 7

最後，我們來設定彈窗「在什麼時候跳出」跟「在哪些頁面跳出」：

1. 點一下彈窗外面空白處，右上角會跑出齒輪圖示，這是彈窗的控制功能列。
2. 按下齒輪圖示，等跳出功能列，選最左邊的圖示。
3. 接著會看到一個小視窗，點「Popup」進入彈窗設定。如果你希望彈窗跳出時，背景網頁還能繼續滑動，就開啟「Scroll Page Behind」。
4. 點「Display Condition」，進入彈窗的顯示邏輯設定頁。

接著會看到的是「觸發條件 (Triggers)」這頁，在這頁設定什麼時候要跳出彈窗：

1. 「Trigger Popup Only Once」：限制只顯示一次，避免讓回訪的客戶一直看到跳窗。但如果你是希望最大化曝光的話，可以考慮關閉，讓每次都會跳出。
2. 「On Page Load」：一載入頁面就跳出，我這裡設定延遲 1 秒後跳出 (下拉選單裡還有其他觸發條件，例如點某個按鈕 (On Click)、滑到某段內容、離開頁面之前等)。
3. 設好後，一定要按右下角的「Save」才會存起來。

上方切換到「Conditions」，設定這個彈窗要出現在網站的哪些頁面：

• 預設是「All」，也就是整站都會跳出。
• 如果你只想在特定的頁面或分類跳出彈窗，就點開下拉選單，選擇自訂條件 (可設多個)。
• 設好後也要記得按「Save」才會套用。

step 8

到這邊，就完成彈出視窗的基本設定了。

最後按右下角「Update」存檔，再回網站試看看有沒有順利跳出彈窗。

3 步驟建立自動化表單

這一段我們來示範怎麼在頁面插入自動化表單、調整外觀，並設定送出訊息與串接電子報平台。

step 1

先選好你要放表單的位置：

1. 點一下你要插入表單的區塊。
2. 再按一下「+」新增區塊。

等跳出視窗，在「Block」下點「Contact」分類，挑一個適合的表單樣式直接套用。

step 2

進來之後，先簡單整理一下圖片、欄位、按鈕這些表單內容：

修改圖片：

1. 點一下圖片所在的網格，右上角會出現「+」，點下去。
2. 選左側第一個圖示。
3. 在跳出的設定中把預設圖片刪掉 (按 x)，再上傳你自己的圖片。

也可用同樣的方式，調整左邊表單的背景。

修改文案：

1. 點一下文字框，把你寫好的文案填進去。
2. 按「T」圖示，簡單調整一下樣式，如字型、大小與間距。

欄位修改 (名字與 Email)：

最後，再把按鈕的外觀改一下，就完成了：

1. 點一下按鈕，把文字改成「我要索取」、「馬上下載」這種會引發動作的語氣。
2. 可以點開功能列的設定圖示，把按鈕寬度拉到 100%，會比較顯眼。
3. 接著再按一下功能列最左邊的圖示，調整一下樣式，並幫按鈕加個 icon (我加了個指向圖案)。
4. 外觀都改好後，按最右邊的「插頭圖示」到下一步來進行串接設定。

step 3

最後，我們會完成串接電子報平台，並設定送出訊息。

在上一步按下插頭圖示後，會跳出視窗：

1. 上方選單切換到「Apps」。
2. 選擇自己正在使用的電子報平台 (我選 Kit)。
3. 根據系統提示，填入兩組 API 金鑰 (從 Kit 帳戶複製貼上)，再點「Connect」就串好了。

接著，設定送出訊息，讓讀者知道已經完成：

1. 點一下按鈕，叫出功能列。
2. 按連結圖示。
3. 點「Message」，下方填上「送出成功」與「送出失敗」的訊息：
   • Success (成功)：像「我們已經收到囉！資料會寄到你的信箱」。
   • Error (錯誤)：如「好像有些欄位沒填？麻煩再檢查一下」。

最後，你還可以拉一個文字小工具放在表單上面，說明為什麼要填這份表單，提高讀者填寫的意願。

都設定好之後，記得按右下角「Update」存檔，就完成了。

以上，就是「彈窗 + 自動化表單」的設定，這動作對你在內容行銷漏斗的規劃上，會非常有幫助。

Brizy 和其他頁面編輯器有什麼不同？

WordPress 有不少頁面編輯器，像 Elementor、Divi、Slider Revolution 都很熱門。如果你想知道哪款比較適合你，這邊整理了幾個重點，幫你快速看出 Brizy 和其他編輯器的差異在哪裡。

Brizy 相關的其他問題