Divi Themes 中文教學：WordPress 掌握 Divi Builder 就靠這篇（全指南）

這是一篇完整的「 Divi中文教學 」，會帶你上手這款強大 Divi 生態圈。

還在考慮要使用哪種主題嗎？沒找到樣式漂亮的網站模板？還是目前的主題功能性太弱，打算換強一點的？

Divi 能幫你架設各種類型的網站，像是建立 Blog、品牌官網、購物網站建置等 ..，用這款主題就能一次搞定：）

Divi 核心的功能，我都會在文章一次分享給你，好囉！準備好了嗎～我們開始吧！

---

1. Divi 是什麼？

Divi 是由知名 Elegant Themes 公司開發，是許多網頁設計師喜愛的一款軟體，除了功能強大且有很多高質感的元素（和現成模板）。更多完整 Divi 中文教學。

不需要任何程式概念，用拖曳方式就能設計漂亮的網站，就像官網所描述的，視覺化設計和佈局排版都將變得更加容易。

使用 Divi 主題，完整架站教學（全攻略分享）

Elegant Themes 旗下產品，有全功能 Divi Theme 佈景主題、Divi Builder 頁面編輯器、Extra 主題（可用在部落格 / 新聞雜誌 / 作品集 ..）、Bloom 電子報註冊行銷工具、Monarch 社群工具等 ..。

所以使用 Divi 軟體，不會只有一種軟體可用，而是能享受它們公司的所有服務，非常的划算。

加上多種區塊模板和完整的網站樣板，有商業風、線上開店平台、科技風、服務類型等 .. 多種主題風格。

你只需幾點擊按鈕，即可引用區塊樣板，或套用整個網站設計。

Divi 對 Woocommerce 開店平台外掛有完美的支持，並提供多種線上開店的區塊功能，一樣用拖放方式即可放入頁面。

使用 Divi 會是個很棒的選擇，因為它能幫你做到很多事。

方案評論

Divi 的使用方案很簡單，它提供基本的「 Divi 」方案和更多功能的「 Divi Pro 」方案，兩者都有「 年租方案 」和「 終身方案（一次性）」。

每種方案都能應用在無限數量的網站，費用也維持在合理範圍，犬哥建議可以選擇「 Divi 」終身方案。

有個好處是，Divi 整體系列包含自開發的多功能 WordPress 佈景主題，且和旗下產品有完美兼容，這代表你可能不需再額外購買 WordPress 主題。

特別一提，終身使用方案在 WordPress 頁面編輯器市場中，是比較棒的收費方式。

這代表你只需負擔一次性的小額費用（和外包網頁設計相比），就能終身享用所有 Divi 功能。

產品定價

Divi 的年租用方案，原定價是 $89 美元 / 年（約 $2,700 台幣 / 年），可應用在無限數量的網站。

Divi 的終身方案，原定價是 $249 美元（約 $7,500 台幣 / 終身），一次性費用即可終身使用，可應用在無限制數量的網站。

但有個好消息要告訴大家，請看下面享有全方案的折扣優惠！

終身方案是一次性費用，購買之後隔年不會有額外費用，你可享有 Divi 軟體終身更新＋優先的客戶服務（建議優先選擇，比較划算）。

---

2. 如何購買＋安裝 Divi（含憑證激活）？

這章節，會跟大家分享如何購買＋安裝 Divi，還有軟體憑證激活。

購買 Divi 軟體

首先，點擊 Divi 10% 折扣 連結前往，會看到兩個方案，分別是年租用＆終身方案。

備註：下圖範例的 Divi 費用，是沒有使用優惠連結購買的原價格。

所以請務必使用 Divi 10% 折扣 購買，才能使用優惠價入手唷：）

這裡會比較建議購買終身方案，因為費用跟年租制方案差不多，再來是不用每年都付費（一次性買斷）。

下面我會用終身方案進行示範，點擊按鈕前往。

參考下圖建立 Divi 帳戶（自己的帳號密碼要記得唷）＆ 輸入付款資訊，完成後送出。如果英文姓名不清楚的話，可用 外交部工具 翻譯。

如此一來就購買成功啦，接著 Divi 應該會寄一些相關的購買收據等 .. 到你的信箱裡，也可以收一下。

下載 Divi 軟體＋WordPress 主題安裝

看網站有無幫你導向到會員專區，如果沒有的話可點右上的 My Downloads（需是會員登錄狀態，才會看到），找到 Divi Theme 主題並下載。

備註：Divi Theme 裡面已經有預安裝 Divi Builder Plugin 了，所以不用再額外安裝。

前往 WordPress 後台，將佈景主題上傳到 WordPress，並進行安裝＋啟用。如果不會安裝，可參考主題安裝。

這樣 Divi Theme 就安裝成功啦！我們前往 WordPress 前台看一下成果，一個簡單版的 Divi 網站，已經正式上線溜。

接下來 ..，好戲才正要開始！

Divi 軟體憑證激活

前往 Divi 官網 並登入，點選 Account > Username & API Key 前往憑證專區。

會看到 Username（使用者帳號）和 API Keys（使用憑證），這兩個分別複製起來，等等會用到。

備註：如果沒有出現 API Keys 可自行新增（也可設定標籤，方便找尋）。還有 Divi 可在多個網站上使用，每個網站需對應一組憑證，假設之後網站用不到 Divi，可在這把對應的憑證註銷掉，就不會佔用空間。

前往 WordPress 網站，找到 Divi > Theme Options > Updates，輸入剛複製的使用者帳戶 ＆ API 憑證，完後後儲存。

之後這個網站的 Divi 軟體，就跟 Divi 官方系統綁定了，也代表正式激活軟體使用權限啦！

---

3. 如何套用 Divi Builder 頁面模板？

這章節，來示範如何用 Divi Builder 套用現成頁面模板。

前往 WordPress 頁面 > 新增頁面，幫頁面取個名字，使用 Use Divi Builder 新增頁面。

Divi 有簡單區分 3 種建立頁面的方法，這裡先示範用系統模板。

因為 Divi 的模板非常多，可以借助分類條件，方便選取自己愛的。

這裡我用 Agency 模板教學，你也可先跟我裝一樣的，之後學成了再來更換模板。

進入後可點擊瀏覽各頁面，找到你想套用的頁面，點 Use This Layout 進行安裝。

這裡我用 Landing Page 示範。

接著，會出現需要輸入 Divi 使用憑證的視窗（如果沒有的話，就直接略過），至於憑證在哪裡，流程跟上面章節的激活憑證一樣，這就不多做說明。

把剛相關 Divi 憑證貼入到欄位中，點擊送出。

太棒囉，這樣現成 Divi 模板就套用成功了，最後記得點 Save Draft 儲存草稿（或是 Publish 發布），才會保存剛套用的模板唷。

如果想要在 WordPress 網站，看到剛新增完成的頁面，就點選 Publish 發布。

然後把此頁面 添加到網站選單 中，就會順利看到囉。

---

4. Divi Builder 功能介紹

Divi Builder 是 Divi 生態圈重要的一環，自然有許多功能可以學習，這邊會帶大家深入淺出。

首先，要掌握 Divi Builder 並設計出合乎邏輯的頁面，需了解 Divi 的佈局規則。

頁面佈局概念

點擊一下左下角的佈局切換 Icon（下圖），這是相對於「 視覺化編輯 」的另一種「 結構化編輯 」模式，有時候掌握不清楚當前頁面的佈局，就能用此方法瀏覽全貌。

Divi 的佈局呈現，主要由 Section（區塊）、Row（行）、Module（模塊）這 3 者所組成，由大到小層層包裹。

簡單來說，如果想新增一個客製化區塊，你可能會需先新增一個 Section，然後再新增 Row，最後新增 Module。

一個 Section 可包含多個 Row，每個 Row 能呈現不同的排版＋包含多個不同的 Module，這樣就能客製化網頁佈局囉！

新增佈局＆新增模塊

了解完 Divi 的佈局概念，接著切換回「 視覺化編輯 」，我將示範如何新增一個客製化區塊。

首先，把滑鼠移到視覺編輯畫面上，在某些可新增區塊的地方，會出現加號可添加。

Divi 提供 3 個 Section 設計方法，有 Regular 常規、Specialty 特殊、Fullwidth 全寬，不同方法會有不同的佈局可選，有空可自行玩看看。

這裡我示範用 Regular。

會看到有超多種 Row 佈局可選，挑選適合你的使用，這裡我先用 2 欄式的。

會看到區塊分成左右兩欄了，在其中一欄新增想要的 Module 模塊，會看到可用的模塊真的非常多。這裡我新增一個 Blog（列表）。

會看到文章內容出現啦，這裡可自行設定顯示數量、指定顯示哪個分類文章、摘要文字、模塊樣式等 ..。

還有步驟還原（也可按快捷鍵，像是 Ctrl＋Z / Command＋Z 還原之類的），沒問題後記得儲存。

簡單頗析一下 Module 面板（上圖），主要分為 Content、Design、Advanced 這三個。

• Content 模塊內容：會依據不同的 Module 模塊，出現可設定的項目。
• Design 模塊設計：大部分樣式設計，都可在這裡更改。
• Advanced 進階設定：有像是自訂 CSS、是否顯示在不同裝置隱藏、過渡效果、視差滾動等 ..。

接著，我在另一邊新增 Image 圖片模塊，也帶到一些功能設定介紹。

• Save to Library 自訂模組：可自己客製化模組並重複使用，也能儲存成 Global 全站模組。
• Disable 禁用：可針對不同裝置，設定模組的顯示或隱藏。
• Copy Module Styles 複製模組樣式：複製樣式，可貼在其他同模塊上面，就不用重新設定。
• Reset Module Styles 重置模組樣式：把設定的樣式，重設為預設值。

修改套用的模板

接下來可編輯模板的其他區塊，對著想要編輯的區塊，點擊齒輪 Icon（設定模式），就會出現對應的設定項目啦。

你也可自行新增 Section（區塊）、Row（行）、Module（模塊）客製化網站，或是刪除不要的區塊。

Divi Builder 面板了解

Divi Builder 本身功能還很多，我們能看到底端的小工具，這裡調整的偏向「 全頁面 」的部分。

左下角有不同裝置 Icon，也能針對不同裝置做網頁設計。

經過這章節的 Divi Builder 介紹，大家掌握度有更高了嗎：）

---

5. 儲存重複區塊 ＆ Divi Library 面板

Divi Builder 有「 儲存重複區塊 」的功能，如果有某個區塊未來可能會重複用到，可把它儲存起來，之後就能直接呼叫出來，就不用每次都需重新設計了。

對應上一章節提到的，Divi Builder 主要由 Section（區塊）、Row（行）、Module（模塊）這 3 者所組成，也代表能個別對這 3 種類型，分別進行儲存。

下面我用簡單幾步驟，示範儲存 Section（區塊）類型，並在不同位置（或是不同頁面）拿來使用。

Step1：儲存重複區塊

將滑鼠移到區塊上，點擊儲存區塊 Icon，下圖示範儲存 Section 類型。

命名儲存區塊的名稱，看是否有需要幫區塊設定分類（方便同類型的區塊歸類），點 Save to Library 存到資源庫。

備註：上圖 Save as Global 功能，是把重複區塊儲存至全網站，並且都共用同一組。

如果勾選的話，假設在 A 頁面修改此區塊，在其他有使用的地方（像是 B 頁面 / C 頁面 ..），這個區塊都會一併進行更改。

Step2：如何呼叫重複區塊

在想要套用的網頁，新增一個 Section 區塊，點選 Add From Library，就會看到剛儲存的區塊，可以直接套用囉：）

Step3：使用 Divi Library 面板，方便後續管理

前往 Divi > Divi Library，會看到剛儲存的區塊在這裡出現了，相關的新增、編輯、刪除也都能在這裡修改。

你也能在這新增區塊分類，如果之後儲存區塊變多了，也會方便你統整管理。

我們也會發現，列表中有幫我們列出區塊的所屬分類、類型，和是否是 Global 全站區塊。

---

6. Divi Builder 進階小技巧

Divi Builder 因為功能非常多，使用上有一些小技巧可分享給大家，但這裡只先分享部分，不然怕文章會太長。

可按 Shift，一次編輯多個

網頁設計常會有重複圖示 or 文字，如果每個都個別修改速度會太慢，就能按下 Shift 一次選取多個，一次進行批次編輯。

我選擇文字顏色修改，就會發現能批次修改樣式囉，是不是快很多呢。

複製區塊樣式

除了上面分享的批次編輯，也能單獨複製某個已設計的區塊樣式，然後貼到新的區塊上面，就不用重複工作了（Section、Row、Module 都能複製）。

在模塊中點 Copy Module Styles，就能複製模塊樣式。

然後在另一個模塊點 Paste Module Styles，就能貼上模塊樣式啦！因為剛好被視窗擋住，但會發現樣式全都複製過去了。

形狀分割線功能

有時候在佈局時，一塊塊長方形會覺得有點制式，就可用「 Dividers 形狀分割線 」進行設計，像是下圖我就用水波的圖形。

不同裝置，是否顯示設定

如果老闆或是客戶要求，不想在手機版出現某個區塊，就能用這個功能各別對不同裝置做顯示設定。

點選 Advanced > Visibility，勾選要在哪個裝置禁止區塊顯示即可。

像是上圖的設定，就是在手機版（Phone）的時候，這個區塊就不會出現。

好囉，以上就是幾個 Divi Builder 小技巧分享。

---

7. Theme Options 主題設定

Theme Options 是 Divi 修改大多數設定項的地方（前往 Divi > Theme Options），像是 General 常規設定、Navigation 導航選單、Divi Builder 設定、Updates 軟體更新等 ..。

如果有相關功能需調整，就能在這選取修改。

下面我會挑選一些功能做些調整分享，但因為 Divi 的功能非常多，有些我沒提到的地方，也能依照自己的需求修改唷！

General 常規設定

General 是 Divi 的常規設定，裡面滿多設定項目的，下圖是調整網站 Logo。

是否開啟社群分享＆設定社群連結，像是 FB、IG 等 ..。

開啟使用摘要文字（預防因為顯示全文，而網站頁面過長問題）、回到頂端按鈕等設定項。

SEO 關鍵字優化

Divi 內建有基礎 SEO 關鍵字優化，有分為 Homepage SEO（首頁 SEO）、Single Post Page SEO（單一頁面 SEO）、Index Page SEO（索引頁 SEO），共這 3 個分頁。

• Homepage SEO 分頁：可以把 SEO 相關功能打開，然後設定首頁的 Title 標題、Meta 描述、Keywords 關鍵字等 ..。

備註：Enable canonical URL’s 功能，是因為某些頁面可能具有不同的 URL，但這些 URL都指向相同頁面。

例如 domain.com、www.domain.com、domain.com / index.html 都是指向網站首頁的情況。

而這功能可告訴搜尋引擎，這些重複網址可當作同一個頁面對待，這樣好處是能避免受到 Google 因為重複頁面，而造成頁面的 SEO 權重降低。

• Single Post Page SEO 分頁：這頁我只有把 Enable canonical URL’s 打開，其他都是用默認值。
• Index Page SEO 分頁：Enable canonical URL’s 打開、Enable meta descriptions 打開。

好囉，以上就是分享幾個 Divi 小設定更改，還有許多功能也可照自己需求調整唷。

---

8. Theme Builder 主題編輯器

Theme Builder 是 Divi 用來打造客製化主題的工具，讓你能在不同網站頁面，呈現不同的頁首、頁尾、佈局內容等 ..，滿足任何客製化需求。

我自己的主要用法有兩種。

• 新增全站頁首＆頁尾：因為 Divi 預設頁首＆頁尾比較陽春一點，所以我通常會自行設計（Divi 內建沒提供頁首＆頁尾模板，所以通常要自行設計，或是從第三方下載模板）。
• 在某條件下，單一客製化頁面：Divi 提供許多可選條件，像是在某分類下、某標籤下、某作者下、某文章下等 ..，會自動套用指定模板，達成完全客製效果。

新增全站頁首＆頁尾

前往 Divi > Theme Builder，會看到第一個區塊，分別有 Add Global Header（新增全站頁首）、Add Global Body（新增全站內容）、Add Global Footer（新增全站頁尾） 這 3 種。

只要是在第一個區塊進行的設計，就會套用在整個網站中。

通常都是新增全站頁首＆頁尾比較多，而新增全站內容會比較少（因為不太會全部網站的內容都長得一樣）。

備註：匯入 / 匯出模板功能。

匯入 – 如果有從第三方下載模板 or 自行設計的模板，就能用此工具上傳並使用。

匯出 – 可匯出現有的模板設計，就能在新網站上傳＋重複使用。

點選 Add Global Header > Build Global Header，就能新增全局頁首，至於後面的設計方式跟使用 Divi Builder 操作是一樣的，就不多做介紹。

至於頁尾也能用一樣的流程新增，新增完畢後會看到框框的顏色改變了，完成後記得儲存一下。

最後再回到 WordPress 前台看一下，應該會發現網站的頁首＆頁尾已經改變了：）

單一客製化頁面

另一種常見的用法，就是自訂客製化模板的顯示條件，下面我示範一下。

首先新增一個區塊，這裡我設定在「 文章內容 」分類下的文章（這分類是我自己新增的），全都採用我自訂的這個佈局。

建立完成後，在頁首＆頁尾應該會同樣出現綠色的區塊（代表同樣套用了剛設計的全站頁首＆頁尾）。

假如，在這個條件下的頁首我想讓它長得不一樣，就可把全局頁首刪除，換成自訂的新頁首。

如此一來，只要當前文章是歸類於「 文章內容 」的分類下，就會採用我自訂的新頁首。

至於 Custom Body 自訂內容、Custom Footer 自訂頁尾，也是一樣的操作邏輯，如果有需求也可進行調整。

結合上面分享的功能，就能使用 Divi Theme 打造超客製化的網站了：）

---

9. Theme Customizer 主題制定器

Theme Customizer 是 Divi 用來調整網站樣式的，它與 WordPress 內建的視覺編輯器整合在一起，是除了 Divi Builder 頁面編輯器以外的網站樣式調整工具。更多 WordPress 後台基礎操作。

無論是想修改頁首樣式、頁尾樣式、選單樣式、部落格樣式、手機版樣式等 ..，都能來這裡調整。

前往 Divi > Theme Customizer，就會出現相關設定。

這裡面的細項功能很多，大家可點一點玩玩看，但有一個操作小建議。

就是調整時，會建議把右側頁面也切換到對應的位置，這樣調整欄位時，才會直接看到調整後的結果（例如調整頁尾，會建議頁面移至尾端，就能看到變化）。

但有些調整，還是需儲存後，再實際到網站前台，才會看到變化。

---

10. Role Editor 角色權限

Role Editor 是用來做權限分級的，WordPress 預設會有幾個角色權限，像是 Administrator（管理員）、Editor（編輯）、Author（作者）、Contributor（投稿者） 這幾個角色。

如果網站是多人管理，就可能會有權限調整的需求，就能用 Role Editor 進行權限調整，只要把不用的功能關閉即可。

---

11. Support Center 支持中心

前往 Divi > Support Center，這是一些 Divi 提供的客戶支持，我列出可能會用到的分享給大家。

System Status 系統狀態

Divi 會幫我們偵測目前系統的支援程度。

舉例下圖就是還沒滿足需求，就會出現相關提示，這時就能到自己主機商做些調整，讓 Divi 和網站相容度更高。

Safe Mode 安全模式

這功能可以用在網站開發，或是網站除錯時，可以開啟此功能，Divi 就會暫時幫忙禁止快取外掛的運作。更多 快取外掛推薦。

否則，有時候因為快取還是保存原來的狀態，會導致我們不知道問題解決了沒。

---

12. Divi 週邊軟體（Extra / Bloom / Monarch）

Elegant Themes 除了開發 Divi Theme 主題 ＆ Divi Builder 編輯器以外，也同步開發了其他軟體，讓整個 Divi 生態圈變得更豐富，分別是。

• Extra：部落格 / 雜誌 / 作品集主題。
• Bloom：電子報註冊行銷軟體。更多 Bloom 完整教學。
• Monarch：社群分享軟體。更多 Monarch 完整教學。

Extra

Extra 是 Divi 主題的一種延伸，主要是給部落格、出版媒體、作品集網站使用，因為這類型網站，可能會需要許多文章相關功能、客製化分類頁面需求、呈列作品的功能。

WordPress 預設的分類頁面，版面通常單調許多，而 Extra 有特別的 Category Builder 分類頁面編輯器，能打造不同分類的呈現樣式，滿足媒體業多樣的版面設計。

備註：Category Builder 分類頁面編輯器，算是 Divi Builder 的擴充版本，裡面添加了一些有關於文章相關的模塊，方便站長套用。

除了標準的部落格 / 媒體網站以外，如果你是設計師打算展示你的作品，使用 Extra 同樣是個好選擇，因為除了豐富的文章模組，也能用 Divi Builder 設計展示頁面。

當然，Extra 主題和 WooCommerce 外掛 同樣有良好的支援，支持電子商務的功能。

Bloom

Bloom 是 Divi 開發的一款用來收集訪客 Email 的電子報註冊行銷軟體，目的是幫站長增加 Email List。

它與 WordPress 電子報行銷外掛 完美整合在一起，訪客可以通過使用 Bloom 設計出來的搜集表單，當訪客確認發送後數據會自動傳送到你連結的任一款電子報行銷外掛，簡單來說 Bloom 是一個行銷媒介。

Bloom 有提供多種優質設計的註冊模板，站長可直接套用，減少還需設計的時間。

至於如何呈現電子報註冊表單，也是頗重要的，Bloom 同樣提供多種顯示方法。

像是 Popup 彈出式、FlyOut 飛入式、Below Post 帖子下方、Inline 嵌入式、Locked Content 內容鎖定式、Widget 小工具等 ..，幾乎能滿足任何情況。

簡單來說，如果你是有在使用 Divi 的服務，有關電子報蒐集工具，就用 Bloom 準沒錯：）

Monarch

Monarch 是一款社群分享軟體，你可以在網站上嵌入不同社群，以變獲得更多關注者＆分享。更多 Monarch 教學。

Monarch 有提供許多顯示方法，加強訪客對你的關注，像是基本的放置在網站左右側、嵌入到文章或頁面中、彈出視窗等 ..。

它也有和 WordPress 小工具整合，這表示你能放置在任何一個側邊欄。Monarch 也有短代碼嵌入的方式，綜合可顯示的方式非常多種。

如果你打算在網站上嵌入社群分享外掛，就用 Monarch 準沒錯：）

---

13. Divi Marketplace 市集

Divi Marketplace 是 Divi 生態圈同樣很重要的一環，這個地方有銷售很多 Divi 相關的子主題、WordPress 外掛、網站佈局等 ..。

且 Divi 有特別聲明這個市集不會放入 Elegant Themes 自家公司開發的軟體（怕惹人詬病），這也市集裡面的軟體，都是第三方個人或公司所開發的。

如果要做舉例，Divi Marketplace 就有點類似蘋果 APP Store 的概念，提供開發者和使用者一個欣欣向榮的環境。

如果站長有需求無法達成時，就可以來 Divi Marketplace 選購相關功能，基本上都能完整滿足：）

---

常見問題

---

WordPress 學習資源

學習 WordPress 網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。

資源一：犬哥數位（專業 WordPress 網頁設計公司）

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！

資源二：WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種，很多網友私訊我不知道安裝哪一款，才有辦法實現功能。或是已經試了很多款外掛，但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題＆外掛大全（電子書），這些都是我們團隊協助客戶開發案件時，會搭配使用的。一來外掛品質優良，二來功能性也足夠強！

資源三：官方教學資源（含 FB 社群解答）

如果你偏愛自架網站，也歡迎持續關注 犬哥網站 Blog，我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習，也可關注 YouTube 頻道，幫助你更容易進入狀況。

當然，如果你在操作過程中遇到問題，也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ，除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。