Divi 教學：一套搞定設計、架站與行銷【高 CP 值 WP 佈景主題】

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

WordPress 佈景主題有很多款，Divi 是一款「拉一拉、改一改」就能建站的佈景主題，對新手非常友善。

這篇文章會帶你從安裝開始，教你如何套用模板、修改內容、設計首頁，甚至做到表單設計與 A/B 測試，就算不懂程式碼，也可以快速架出自己的 WordPress 網站。

Divi Theme 是什麼 ？

Divi 是一套將「佈景主題 + 頁面編輯器 + 行銷工具」整合在一起的 WordPress 佈景主題，提供多種現成模板，並可用視覺化介面拖曳編輯，對不習慣 WordPress 區塊編輯器的新手特別友善。

Divi Theme 費用

Divi 提供兩種方案等級，每一種都有年費訂閱與一次買斷可選，兩者差別只在使用期限，功能與更新內容完全相同，且都不限安裝網站數量。

	年訂閱 (USD)	一次買斷 (USD)
Divi 基本方案	$89元	$249元 (買斷)
Divi Pro 方案	$220 首年 (之後每年 $150)	$888 元 (僅買斷基本功能，除首年外，Pro 服務須每年續費 $150)

兩種方案的主要差異在於是否包含 Pro 功能，Pro 功能需每年付費續訂，包括：

• Divi AI：無限生成佈局、文字、圖片與程式碼的 AI 工具。
• Divi Cloud：無限雲端空間，可跨站儲存與重複使用設計資產。
• Divi Teams：可邀請 4 位團隊成員共同管理網站。
• Divi VIP 支援：30 分鐘內回應的優先客服服務。
• Divi Marketplace 折扣：可享 10% 的市場擴充模組購買折扣。

大部分站主，買斷基本方案就夠用；但如果你有團隊協作需求、常做客製化網站，可以考慮升級到 Pro，但買斷仍然要注意第二年以後 Pro 服務的年費。

Divi Theme優點

• 視覺化操作直覺：可以直接在畫面上點文字編輯，搭配拖曳模組使用，選到區塊就會跳出快速設定，對新手很友善。
• 套版速度快：官方提供 300 多套完整網站版型可直接套用，而且每個月都有新模板更新。
• 一次買斷很划算：一套就包含 Divi Theme、Divi Builder、Extra 主題、Bloom 電子報表單、Monarch 社群分享工具，可自由安裝，終身使用、持續更新。
• 網站數量不限：不論是年費或終身方案，都可以用在不限數量的網站，對接案或多站經營很有利。
• 內建 A/B 測試：可直接測試按鈕、標題、圖片、表單與 CTA 區塊，幫助優化轉換率。
• 教學與資源多：使用者多、社群成熟，官方與第三方都有大量模板、外掛與教學資源可參考。

DIvi Theme 缺點

• 介面未中文化：目前只有英文介面，新手或台灣用戶需要一點適應時間。
• 較吃主機資源：功能完整但檔案偏大，建議搭配效能較好的主機與快取、圖片壓縮外掛使用。
• 模板管理不方便：模板列表沒有縮圖，也缺少篩選功能，數量一多就不好管理。
• 不易轉換主題：採用短代碼架構，移除 Divi 後版面容易跑掉，轉換到其他主題成本較高（未來 Divi 5 預計移除短代碼，但時程未定）。
• CSS 操作較不直覺：沒有像 Elementor Pro 的 CSS 預覽與提示功能，對常寫 CSS 的用戶來說較不方便。

Divi Theme 適合我用嗎？

• 想快速設計出網站的架站新手。
• 想快速架出形象網站、作品集網站、蒐集表單的個人創作者和自由工作者。
• 想省成本、加快設計流程的網站設計師與站長。
• 想建立品牌官網的中小企業。
• 需要製作行銷頁、報名頁或活動頁的課程講師與行銷人員。

Divi WordPress 設計實戰：5 步驟快速架站

步驟一：購買與安裝 Divi 主題

Divi 的購買和安裝流程其實很簡單，只要購買後下載壓縮檔、上傳安裝後登入帳戶，就能馬上開始設計網站。

step 1

需要先到 Divi 官網購買，購買完成後，會看到下方這個畫面，直接左側 Divi theme 點選「LOG IN TO DOWNLOAD」登入帳戶，並將外掛檔案下載下來。

step 2

接下來要做的，是驗證你購買的 Divi 授權，這樣才能啟用完整功能。

把分頁切回 WordPress 後台：

1. 點選「外觀 → 佈景主題」。
2. 跳轉頁面後，上方點「上傳佈景主題」。
3. 上傳剛下載的 divi.zip，按下「立即安裝」。
4. 安裝好之後，點「啟用」。

step 3

當你第一次使用 Divi 時，畫面會跳出驗證授權的提示。點選「Login To Activate Your License」，登入帳戶完成驗證，就能啟用所有功能。

step 4

安裝好 Divi 後，就是進入編輯畫面，開始建立網站內容。

在 WordPress 後台選單點「所有頁面 > 新增頁面」：

1. 進入頁面後，點「Use Divi Builder」。
2. 畫面會跳出導覽說明，點「Start Building」，就可以進入編輯畫面，開始設計你的網站。

步驟二：匯入 Divi 模板 (Divi Library)

Divi 的模板分為整組 Layout Pack 與單一頁面設計。你可以先挑一套喜歡的風格，再依需要匯入其中的頁面，例如首頁、關於我們、聯絡頁等，不需要一次匯入整站，操作彈性非常高。

step 1

先選擇套用模板：

1. 一進入編輯頁面，選擇中間的「Choose a Premade Layout」，才能套用設計好的模板。
2. 等跳出 Divi 的模板庫，用分類或排序篩選，找到自己喜歡的模板，點一下就可以了。

step 2

最後，挑選要下載哪個頁面模板：

1. 通常一組模板會包含首頁、服務頁、聯絡頁等等，你點選等等想編輯的頁面 (這邊以 Landing Page 為例)。
2. 在要下載的頁面上點「Use This Layout」。
3. 等跳出視窗，直接按「Import」，匯入圖片、文字、顏色與樣式等所有設定，等等只要修改照片和文字就好了，非常方便。

步驟三：認識 Divi 的排版方式

進入編輯器後，你會看到畫面被分成三個顏色的區塊，就像積木一樣堆疊起來：

搞清楚這三層的關係，操作上會更順手：

區塊類型	說明	常見使用情境
Section (藍色恇)	最外層結構，可設定背景圖、色塊、邊距	．首頁大圖 ．區隔內容
Row (綠色恇)	設定欄位排版，可選左右分欄、等分欄位	．圖文區塊 ．三大服務項目
Module (灰色恇)	放入實際內容，像是文字、圖片、按鈕、表單等	．修改文字 ．上傳圖片 ．放按鈕與表單

搞懂這三層結構後，等一下在套用好的模板上修改文字和圖片時，會更知道每一塊是怎麼組成的，也不容易點錯地方。

也建議你先閱讀以下文章，了解網頁有哪些排版的小技巧：

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

步驟四：設計網站首頁

進到 Divi 編輯器後，畫面上會出現幾個主要區域。我們會在這裡完成所有設定，包括背景、圖片、文字、按鈕等。

你可以先快速看一下這張圖，認識 4 個操作位置：

• 顯示編輯區：網站實際內容區，直接點選可修改。
• 編輯視窗：點區塊的設定圖示，才會跳出這類設定視窗。
• 頁面編輯區：跟頁面相關的操作列，如匯入模板、A/B 測試、頁面設定等，中間的 X 可把下面一整排的控制列 (包括左右兩邊) 都關掉。
• 切換區：位於左下角，可切換成格狀模式、放大和裝置切換。
• 存檔區：位於右下角，可查看元件層、搜尋、版面切換與儲存。

現在，我們要開始「換掉預設模板內容」。我會一一介紹怎麼換背景、改圖片、編輯文字和調整按鈕的樣式與文案。只要改這幾個部分，首頁就會看起來像是你設計的一樣。

step 1

一、換區塊背景 (藍色區塊)：

1. 點藍色區塊上的齒輪圖示，點開 Background 設定。
2. 切換到圖片類型。
3. 點一下圖片重新上傳背景，並搭配調整對齊方式與圖像大小。
4. 以下是建議要設定的項目：
   • Use Parallax Effect：滑動頁面時背景會有捲動效果，我自己比較少開。
   • Background Image Size：圖片的縮放方式，大多數情況建議選「Cover」，這樣圖片會填滿整個區塊較無空白。
   • Background Image Position：控制背景圖的對齊位置，要根據圖片主體位置微調，像這張圖是設定 Bottom Center，因為主視覺在下面。
   • Background Image Vertical Offset：只有需要精準微調圖片上下位置時才設定。
   • Background Image Repeat：一般背景圖請選「No Repeat」，避免背景重複拼貼。
   • Background Image Blend：設定圖片混合模式，如透明、疊色、變亮等，最常用的是在圖片上加一層微微透明的黑色，選 Overlay。
5. 都確認後，在視窗右下方按儲存鍵。

二、換模組圖片 (灰色區塊)：

1. 點一下要修改的圖片，等出現灰色區塊，點設定圖示。
2. 等跳出視窗後，在 Image 點圖片就能上傳自己的圖片了。
3. 最後記得要存檔。

先按照這個方式把網站上的圖片都換成自己的，並把不需要的藍色大區塊刪除。

step 2

改好圖片後，我們來改掉範本裡的預設文字。讓內容更貼近你的品牌或網站主題。

1. 直接點選想編輯的文字，改掉文字內容。
2. 寫好內容後，將文字反白，會跳出一個工具列視窗，在上面按「Aa」圖示。
3. 在跳出的視窗上改字型、標題標籤、大小與對齊方式。

之後，按這個方式將頁面上的文案一一改好，下一步，我們來設定按鈕模組的樣式和文字。

step 3

修改按鈕的樣式和文字，能讓網站的風格更一致。

一、先改按鈕的樣式：

1. 點一下頁面上的按鈕，點灰色恇上的設定圖示。
2. 等跳出視窗，先切換到 Design。
3. 點開 Button 的設定：
   • Use Custom Styles For Button：要開啟，才能設定後面的項目：
   • Button Text Size：控制按鈕文字的大小，最常見的是 18px～24px，我設 23px。
   • Button Background：視情況設定，像我的照片是暗的，所以按鈕就只設了框線 + 無背景。
   • Button Border Width：按鈕框線粗細，我的按鈕沒有背景，就需要設定框線才會看得到。
   • Button Border Color：要搭配頁面上的照片和網站主色來設定，我為了搭配主題文案，所以選擇白色恇。
   • Button Border Radius：依照自己的設計決定要不要設圓角，一般是設 10px~20px，我設成 10px。
   • Button Letter Spacing：按鈕文字的間距，可不用設，這邊也沒設定。
   • Button Font：按鈕文字的字型，通常會選和大圖文案、網站標題設定一樣的字型。
   • Button Font Weight：字體粗細，在需要讀者點擊的部分，建議使用 Bold 或 Semi-Bold，以提高辨識度。
   • Button Text Shadow：幫按鈕文字加上陰影，但在暗色背景上不建議做設定，效果不明顯。

二、改按鈕上的文字：

1. 上面頁籤換成「Content」。
2. 找到 Text 欄位，把按鈕文字改成「立即預約」。
3. 全部都做完後，不要忘記在右下角視窗按「√」，才會儲存設定。

下面一樣依照這個流程修改頁面上的所有按鈕樣式與文字。

step 4

到這邊差不多完成了，在按下「發布」之前，還有一個小細節要記得做，就是設定頁面的基本資訊，這會影響你之後在搜尋結果、社群平台上的呈現效果。

做法也很簡單：

1. 到畫面下方，點一下紫色圓形按鈕，會展開設定選單。
2. 在「頁面設定」中填寫這三項資訊：
   • Title：頁面標題，會顯示在瀏覽器標籤與搜尋結果中。
   • Excerpt：頁面摘要，能讓搜尋引擎或社群預覽時顯示簡介內容。
   • Featured Image：精選圖片，會當作這頁的預覽縮圖，像是在 Facebook 或 Line 分享時看到的封面圖。

但還沒完全結束，我們要在下一個部分補上幾個全站的小設定。

步驟五：網站基本設定 (Logo、顏色、排版樣式)

Divi Theme Options 裡，有網站的整體設定，像 Logo 上傳、品牌色選擇、側邊欄位置、是否顯示社群圖示等等，都是網站在發布前最好要調整的小細節，特別是 Logo、配色與字體。

step 1

回 WordPress 後台左側選單，在「Divi > Divi Theme Options > General」(僅設定必要項目)：

• Logo：按「Upload」鍵上傳「寬約 250–400px + 高約 80–120px」的橫式 Logo，會顯示在網站導覽列選單。
• Fixed Navigation Bar：固定式頁首，建議啟用，就算往下滑也會隨時看到導覽列。
• Color Pickers Default Palette：預設調色盤，總共有 8 個顏色，根據配色技巧，建議設定 4 個顏色：
  • 品牌主色：用在如送出按鈕、文字標題等顯眼的地方。
  • 輔助色：和品牌主色能協調、較不顯眼的顏色，用在如取消按鈕、說明文字上。
  • 背景色：極淡且接近白色的顏色，用在表格背景這類不干擾又能展現一點風格的地方。
  • 深色：用在文字上，需和背景色做出強烈的明暗對比。
• Use Google Fonts：有用到 Google Fonts 的話，這條就要啟用。
• Google Fonts Subsets：有開啟「Use Google Fonts」，這項也要開啟，才能載入中文字型。
• Enqueue Google Maps Script：如果你是經營實體的話，這項要開啟，才會載入 Google 地圖相關程式碼。

step 2

同一個頁面往下拉，繼續設定：

• Show Facebook Icon：有經營 facebook 要開啟。
• Show Instagram Icon：有經營 IG 帳號要開啟。
• Facebook Profile Url：若開啟「Show Facebook Icon」要在這邊貼上完整粉專或個人頁網址，社群圖示才會有連結。
• Instagram Profile Url：IG 網址：同上，有經營的話，要在這邊填入 https://instagram.com/帳號名。

step 3

再設定幾個項目就完成了：

• Use excerpts when defined：建議開啟，文章列表模組會顯示你手動填入的文章摘要。
• Back To Top Button：建議開啟「回到頁首」按鈕，瀏覽時更方便。
• Smooth Scrolling：預設開啟，維持即可，是平滑動畫效果，讓頁面滑動比較順。
• Disable Translations：若你網站是全中文，停用 Divi 的內建語言翻譯功能。
• Enable Responsive Images：一定要開啟，圖片會依裝置大小自動載入適合的尺寸，能加快網站載入速度與加強 SEO。

step 4

除了 Divi 的設定外，還要補上一些 WordPress 後台的基本資料，網站才算真正準備好上線。

回到 WordPress 後台：

1. 在左側選單點開「設定 > 一般」。
2. 填入網站標題，如果是實體商家，建議填入品牌名稱或店名。
3. 填入網站說明，要出現與標題相關的關鍵字。
4. 網站圖示：上傳網站的正方形 Logo 圖，至少要有 512*512 像素大小。(最後要拉到最下面按「儲存設定」鈕才會存檔)

現在，首頁設計完成，你有沒有對 Divi 有更深入的理解呢？

接下來，請你運用以上學到的，嘗試建立其他頁面，可以參考網頁設計範例。

Divi WordPress 進階教學：訂閱表單 + A/B 測試

前面我們教了 Divi 的基本運用，而這套還有一些好用的進階功能。

通常，網站架好後，下一步就會開始「蒐集名單」與「轉換優化」。

• 蒐集名單能幫助你建立「已經對你有興趣」的客戶資料庫，方便後續寄送優惠、通知活動等，精準行銷。
• A/B 測試則是找出更有機會轉換成訂單的設計與文案，並針對客戶喜好持續優化網站內容。

而且，Divi 這兩項功能都是內建的，免裝擴充外掛，十分方便。

設計訂閱表單蒐集名單

Divi 的表單功能很方便，可以串接自己的電郵系統，自動蒐集名單。以下操作教學。

step 1

如果正在使用電郵行銷服務的平台還沒有訂閱框，需要先建立一個，再取得 API 和 API Secret：

1. 在 Email 表單上點一下，會跳出灰色恇。
2. 按下跳出的設定圖示。
3. 等跳出視窗，先在 Content 設定 Email Account 項目後按 SUBMIT 送出：
   • Account Name：輸入你在電子報平台的帳號。
   • API Key：填入你取得的 API。
   • API Secret：填入你取得的 API Secret。
4. 回到步驟 3 的視窗，點開 List，選擇你要把蒐集到的 Email 放到哪個名單，按 ADD 加入。

step 2

接下來，設定其他必要項目：

• Text：建議點開，把按鈕文字修改成更符合品牌調性的感覺。
• Email Account：用步驟 1 流程串接自己在使用的電子報平台。
• Fields：裡面只有開啟姓名欄位的控制鈕，會建議開啟，並寫電子報時加入讀者姓名。
• Success Action：成功送出表單後的訊息和動作，可選顯示訊息或跳轉頁面，建議增加一個感謝訊息，如「很感謝你訂閱我們，請記得留意信箱！」
• Spam Protection：建議開啟擋垃圾訊息機器人的功能。

這樣就設定完訂閱表單了，不要忘記到前台網頁輸入測試資料，看會不會加入名單和跳出感謝訊息。

用 A/B 測試提升轉換率

如果你想知道「換個按鈕文字，會不會讓人比較願意點」，或「這兩句文案，哪個比較容易讓人留下資料？」就該做 A/B 測試。這是一種讓設計自己說話、用數據幫你做決定的方式。

而 Divi 內建的 A/B 測試功能，我認為很適合新手使用：

• 免寫程式、免裝外掛：在任何模組上點右鍵就能開啟測試，從文字到按鈕、整塊區域都可以拿來比較。
• 整合在視覺化編輯器裡：你不需要跳出去操作報表，也不必自己接 GA、接轉換事件，Divi 會自動幫你追蹤點擊、互動與轉換率。
• 流程超直覺：設定好兩個版本 > 點「儲存」> 開始收資料 > 選出表現最好的版本。

以下是我實際操作的圖解流程，可以跟著一起做。

step 1

1. 用 Divi Builder 編輯你想要的頁面，並在左下角「格狀圖示」點一下，進入「區塊模式 (Wireframe View)」。
2. 在任一模組上按右鍵，開啟「Split Testing (A/B 測試)」。
3. 在右鍵選單上點 Split Test。
4. 等跳出一個視窗，按 OK，再點你要測試的模組 (我選 Email Option)。

提醒：一定要切換到「區塊模式」才能開啟「Split Testing (A/B 測試)」，否則會卡住。

step 2

接下來，確認要追蹤的模組：

1. 選定的模組會變成黃色。
2. 再在模組上點一下後，會出現一個視窗，跟你說測試模組已選定，按 OK 到下一步。

step 3

現在，兩個版本只改動一個地方，比如顏色、顯示位置、文字等，最後才知道是哪個部分起作用：

1. 點進兩個相同模組的設定圖示 (會標示 1、2)。
2. 我在第一版按鈕填入「現在就訂閱」；第二版按鈕文字則改成「我要訂閱優惠活動通知」。
3. 改完內容後，點視窗右下角的綠色儲存鈕，才會儲存測試資料。

step 4

測試啟動後，從圖表追蹤哪個版本表現更好：

1. 先點桌機模式，回到顯示畫面。
2. 點模組右上角的長條圖圖示，打開 A/B 測試的統計畫面。
3. 在統計視窗裡會看到點擊次數 (Clicks)、表單讀取或互動 (Reads, Engagement)、成功送出 (Conversions) 等數據，但不會那麼快有數據，如果一天只有幾十個人看這個頁面，可能要測個幾天；如果流量很大，可能幾小時就有結果。
4. 最後一定要按頁面右下角的 Save 鈕儲存，才會保留剛做好的全部設定。

A/B 測試說明：只要你覺得資料夠多，就可以結束測試。建議觀察統計圖表中哪個版本轉換率比較高 (看 Conversions)，確認之後，按右鍵叫出選單，點「End Split Test & Pick Winner」結束測試，再點表現較好的版本，這樣就會保留表現較好的版本。

Divi Theme 相關的其他問題

其他好用的 WordPress 頁面編輯器