WordPress 最有設計感又強大的主題 Divi 中文教學

建立 WordPress 網站之後，你需要一套好用的主題再搭配頁面編輯器來設計你的 WordPress 頁面。推薦這一款整合了主題 Theme 和編輯器 Builder 功能，我用它來架設我的部落格，不論是設計、功能、介面我都覺得滿意的 Elegant Divi 主題！
Divi 官網

關於 Divi

兩分鐘影片先快速了解，Divi 的強大威力！

90秒影片，快速瞭解 Divi 強大的威力。

Divi 官網

完整 Divi 套版編輯 ＆ 修改教學

如有不懂之處，建議可以看完下方第六章的圖文解說後，會更加清楚 Divi 的邏輯應用喔！

2022最新從頭教起的教學，更適合新手第一次的 Divi 學習！

前往 2022 Divi 文章

購買並下載 Divi

首先我們到 Divi 的官網 elegant 來，點擊右上角的 PRICING 按鈕，查看 Divi 的價格。

Divi 官網

Divi 價格

可以看到現在 Divi 的售價為：

• $89 / 年（約為 2,700元新台幣）
• $249 / 終生 （約為7,500元新台幣)

兩個 Divi 方案都可以用在無限個 WordPress 網站上，差異只在於一個是終生，一個時間只有一年。可以考慮自己的用途之後決定購買哪個方案，我自己因為常常架設網站，偶爾也會幫別人架設網站，因此是直接購買終生的。

Divi 只買一年，主題過期會怎樣嗎？

網站依舊可以使用，但 Divi 主題以及頁面編輯器將無法再繼續更新、也不能再使用 Divi 的快速套用範例頁面功能。但如果你的網站是做好了就不再變動的，影響就不大，主題一年半載不更新也不會怎樣。

註冊與結帳

選好 Divi 方案後就會進入 註冊/結帳 的頁面，在右邊輸入相關資訊即可完成 Divi 的主題購買。

如果不知道英文名或是英文地址可以參考下方兩個網站：
外文姓名中翻英系統

郵局地址中翻英系統

下載 DIVI THEME

Divi 官網
註冊好後就可以下載 Divi 了，你會發現有兩個選項可以下載，左邊是主題 Theme + 頁面編輯器 Page Builder 綁在一起的 Divi Theme，右邊則是單獨頁面編輯器，我們下載左邊的 Divi Theme。（下載好後不需要解壓縮）

安裝與中文化 Divi 佈景主題

安裝 Divi Theme

到 WordPress 的後台，左邊選單「外觀」 -> 「佈景主題」

你會看到以下畫面，點選「安裝佈景主題」，然後再下個畫面再點選「上傳佈景主題」。

接著將剛剛我們從 Elegant 下載來的 Divi 檔案（不要解壓縮）拖曳，拉到如下畫面指示的框框中，或是用選擇檔案的自行選擇也可以，接著按下立即安裝。

Divi 佈景主題安裝好後按下「啟用」選項！

安裝好 Divi 後，WordPress 後台的左邊選單，會多出一個 Divi 的選項，我們點進 Theme Options 會發現都是英文的介面，因此接下來我們要進行中文化！

中文化 Divi

首先到此篇文章去下載 Divi 中文化的子主題檔案。下載後一樣不需要解壓縮。

接著跟上面一樣步驟，我們到佈景主題中去點選「上傳佈景主題」，接著把剛剛下載下來的子主題拖曳丟入框框之中按下立即安裝。

這邊一樣按下立即啟用 Divi 的繁體中文子主題。

啟用 Divi & 設定網站 LOGO

啟用完整主題功能

再回到 Divi 選項，會發現介面已經中文化，這時候選上面最右邊的頁籤「更新」，我們要做 License 購買的認證，才能使用 Divi 主題的完整功能。

回到 Elegant Divi 的網頁，登入的狀態下，右上角綠色按鈕的左邊有一個 ACCOUNT，選擇 USERNAME & API KEY。

在此頁可以找到你的用戶名、API KEY，將它們複製貼回 WordPress 後台的 Divi 設定頁面之中。

貼上官網取得的 Divi 用戶名、API金鑰之後，按下保存改動，如果沒跳出錯誤，就代表已經成功啟用了！

更改網站 LOGO

這時我們回到 WordPress 前台，就可以看到我們網站已經套用了 Divi 的主題，目前呈現的是最基礎的預設樣式。接著我們來將預設的 DIVI Logo 置換成我們自己的 Logo。

如果沒有圖檔，可以先下載練習用的圖檔：
點擊下載素材

回到後台 Divi 的主題選項，最上面的「標誌」就是網站 LOGO 的意思，我們可以按下上傳按鈕來上傳我們自己的品牌標誌。

按下保存後，再回到前台觀看，就可以看到 Logo 已經換成我們自己的了！

Divi Builder 佈局操作方式

接著來到重頭戲，Divi 強大的頁面建構器，第一次看可能會覺得複雜，但沒關係，我會將步驟拆的較細，只要理解佈局方式，其餘的多摸索自然就會了！

跟著步驟做，加上自己實際操作去習慣 Divi 編輯器，如果可以的話⋯再花一點時間看文尾的套版示範教學影片，影片濃縮精華拍的簡短扼要！很快大致就會明白 Divi 這套編輯器嘍！

用 Divi 建立新的頁面

一樣到 WordPress 後台，「頁面」 -> 「新增頁面」。就會看到如下畫面，我們選擇「使用 Divi Builder」

這邊會彈出三個選項，問你這次新增頁面想用什麼方式，中間「選擇佈局」是讓你選擇現有的頁面設計範本，可以直接套版再做修改，但在你明白 Divi 基本規則之前，直接套用可能也不知道怎麼修改。因此我們先選擇左邊的「從頭開始建構」。

觀察頁面的佈局分配

為了更充分的理解 Divi 的排版，我們以我的部落格當範本，來做實際的練習！觀察一下如何用 Divi 打造下面這個頁面？

首先我們要打造上面有 Banner 那排，因此我們看一下它的比例分配，大約是左 3 右 7。因此我們找一個相近的佈局選擇。

再選擇了這個左3右7 的佈局後，就出現了一個綠色框框，綠色框中間有一條灰色的線，正是切割了這個框框的意思。而框框一分為二就變成兩個空間，可以用來放網頁的資料、Divi 元件。

Divi 排版的單位認識

再注意一下，畫面上的框框有分為：藍色、綠色、黑色。這些框框各代表什麼意思？

區塊 Section

藍色框框，用來區分頁面中一段一段不同定位的段落，像是表頭 Banner 是一個區塊、內容文章區是一個區塊，表尾聯絡資訊又是一個區塊。實際使用上可隨意依照需求區分。

一行 Row

綠色框框，大區塊由藍色區塊區分後，接著由綠色的 Row 來劃分網頁中的一行一行，如步驟所見，會將一行以等份切分，分別用來裝置其他網頁元件 Module，一個區塊 Section 之中可以有多個行 Row。

元件 Module

黑色圓圈，單個網頁元件，有可能是圖片、文字、圖標、表格或是功能更複雜的商品、表單、文章列表等。

如果有點矇懂，沒關係，接著我們繼續看案例，邊看你會更了解這些框框的用法。

持續排版、佈局版面區塊

繼續將我的部落格頁面往下拉，接著我要佈局中間這個區塊，一樣先看好幾欄？2欄！左右分邊是多少比例？大概7：3。

我們再回到頁面的編輯畫面，因為上方我認為「上方 Banner 區塊」自成一個「段落 Section」，「中間內容區塊」該是另一個「段落 Section」，因此我先新增一個藍色大框框。

找到畫面中的藍色框框下的「加號圓圈」，點擊後會彈出這個面板，我們先選擇最左邊的「標準」。

選擇標準後，就會自動內建一個綠色框框 (行 Row)，並問我們要怎麼區分這個「行 Row」，我們依照上面得來的結果「兩欄、7:3等分」，選了如畫面中的切分方式。

於是就跑出如下畫面，畫面上被我們區分好了好幾個區塊，正待我們將「黑色的元件」擺放進去呢！基本上這就是網頁的設計方式，不論是不是 Divi 都是以這個方式來做佈局規劃。

佈局排版 3

為了讓大家更明白，我們再將部落格往下再拉，看到下方的這個區塊，我們要把它再規劃進去，一樣兩欄、這次 6：4 分邊。

這次我們不再新增一個新的段落 Section，因為我認為這兩個都算是內容文章區域，不需分成兩個段落。所以就在本來「段落 Section」中的綠色框框下面、再放一個綠色的「行 Row」，找到綠色框框下方的加號圓圈，點擊添加新行。

開始設計頁面！在版面放入 Divi 元件

Divi 佈局的方式你已經大致懂了，接著我們要在這些我們規劃好的位置，開始放入 Divi 的「元件 Module」，我們從左上的位置開始新增，在黑色的加號圓圈上點擊下去「添加新模組」。

點擊下去後，會跑出下圖這個 Divi 的元件選單，從這個選單中找到「文字」，並且點按選取。

選取「文字元件」後，就在那個位置自動插入了文字，並會彈出一個視窗，我們可以透過這個彈窗來修改調整此文字元件。

Divi 編輯視窗：內容與設計

每個元件的彈窗都是如此規劃，分為內容、設計、進階（高級）。

接著我們將文字設置的視窗切換到「設計」這個頁籤，依字面意思，內容是管元件所呈現的實際內容，設計指的就是該元件的外觀、樣貌、設計等事項。

切換到設計後，它會將「文字元件」所能調整的外觀選項都列出來。這邊要注意的是，我們剛剛將文字指定為「標題 H2」所以我們要修改該文字，就要選擇下圖的副標題文字。

打開副標題文字後，我們還需指定修改 H2 的樣式，這樣才會對我們的文字生效！

接著我們就可以調整我們文字的顏色、大小、文字間距、行高等屬性。最後按下右下角的確認，表示儲存本次修改。

Divi 編輯視窗：儲存與關閉

修改好後我們可以按下右下角的打勾符號來儲存變更，並將視窗關閉。其他功能說明如下：

如果要重新打開 Divi 的元件編輯視窗，只需在想修改的元件上（記得元件的框框顏色為黑色），點擊齒輪就會重新打開編輯視窗。

一個區塊多個元件：元件下方再新增元件

接著我們在大標題下方，要在新增一個「文字元件」，要在元件下方新增元件，就是在它的黑色框框上點擊加號圓圈。

編輯 Divi 時，會遇如下圖被遮住的狀況，只要照上面觀念搞懂各顏色框框代表的意義，正確點選即可。（真的點不到時，下面有教方法）

加入第二行文字元件，一樣先編輯呈現內容。

接著切換到「設計」來編輯樣式，這次因為不是標題文字，選擇修改「文字」而非「副標題文字」。

新增 Divi 按鈕元件

接著在網站專家文字 Module 下方，再添加一個新的 Module。

這次我們找到「按鈕」這個元件，點擊新增。

一樣先修改呈現的內容文字，可以見到「按鈕元件」和「文字元件」編輯的選項稍微不同，但只要了解呈現內容在內容頁籤、樣式設計在設計即可。

在佈局框框加入背景色：行 Row 的設定

現在頁面跟我的部落格首頁已經有 87% 像（回去看一下部落格首頁），接著我們來為它加入背景色彩。

這時你要思考的是，背景色要加在哪裡？首先我們觀察一下 Divi 的佈局，如果是整塊的大背景色，那就找藍色框框：段落 Section，而我們要加的是綠色框框：行 Row 的右邊切割部分。

那我們就在綠色框框上的選項，選擇齒輪（行設定）。

按下齒輪（行設定）按鈕後，會看到左圖視窗，上面列結構是我們選擇的行切割比例，這邊也可再做修改。下面有兩個列，我們要修改左邊那列，算來是第一列，因此在第一個列的齒輪上，再次按下設定。

接著視窗就會變為右圖畫面，上面寫著是「列 Col」設置，在 Divi 中「背景色也算是內容的呈現」，因此並不歸在設計中，而是內容中，我們點擊加號圓圈，即可修改背景色彩。

指定色彩後，左邊的框框就有了背景色彩，但也會發現問題，就是我們三個元件都緊靠在邊緣。

不要讓元件擠在一塊！設定元素與元素間的距離

繼續「列 Col」的編輯，我們將頁籤切換到「設計」，找到「間距」點擊打開折疊面板，這邊會看到區分為四格，分別是「上、下、左、右」的「內邊距」。

在上邊距、下邊距都輸入 50px，就會發現上下被我們撐開了！

將各個元件設定置中對齊

接著我們要將所有元素置中對齊，剛剛步驟的「列 Col」修改記得按下打勾儲存。然後重新回去「文字元件」，一樣在黑色框框上按下齒輪，重新打開設定視窗，文字的置中在編輯器中就能找到。下方的「網站的專家」元件也請同樣置中對齊。

按鈕的部分則是在外觀樣式的「設計」之中，有一個對齊選項：選擇中間的置中對齊符號。

新增右邊的 Banner 圖片

接著在右邊的 Module 加號圓圈上點擊：新增 Divi 模組元件。

這次我們找到「圖像」元件，如果有時眼花撩亂找不到，可以直接在上面搜尋恇輸入文字篩選較快。

圖片當然是「呈現」的內容，因此在「內容區塊」就能找到設定，點擊預設的圖片，就會進入圖片的選擇，上傳並指定圖檔。

這邊提供一些圖檔讓大家練習時使用：

點擊下載素材

調整 Divi 佈局間的空隙：行 Rows

新增完圖檔後，會發現跟我們想要的樣貌不太一樣，主要是 Divi 的「行 Row 排版」中，預設會在列與列之間留空隙，既然是「行」的問題，我們找到綠色框框，並按下「齒輪：設定」。

我們在「行設定」中，頁籤切換到「設計」，找到「調整大小」，將排水溝寬度？（翻譯問題）、平衡列高度的開關都切換為「是」，列間距則將數值調整到最小的 1。

讓版面更好看：微調各元素的間距

接著調整左邊元件，讓他們看起來不會偏上方，觀察一下如果要調整讓他們垂直置中要調整哪邊？

首先我們可以調整「造九頑五」的上方邊距，其他的自然會一起被擠下去。因此我們打開造九的文字設定，將外邊距的「上邊距」設定為 70px。

接著三個元素太過壅擠，這時候要調整哪一個可以調整最少次？

我們只需為中間的元素增加上、下邊距，就可以達到此目的！一樣打開該文字設定，來設置邊距。

這時我們的頭部畫面是不是就大致成形了。再來調整一些細節部分，我們觀察 Banner 區域和頂部的 LOGO 選單區域分隔太遠！

調整 Divi 佈局間的空隙：段落 Section

大區域與大區域之間，通常是由「段落 Section」來負責，我們移動到藍色框框上面，發現上面有藍色的淺影。這也是 Divi 預設會有的邊距。

怎麼調整？一樣我們可以點進去藍色的齒輪設定中，去調整上邊距。又或者 Divi 支援拖曳調整。

在我畫面中用紅色畫圈的藍色淺影部位，按著滑鼠左鍵往上、往下滑動，就可以即時的調整這個邊距。

新增 Blog 文章列表

再回去觀察一下我的部落格首頁，在中間的部分我們要新增部落格文章。我們一樣在挖好的 Divi 排版中，按下加號「插入元件 Module」，這次找到「博客 Blog」。

如下畫面已經插入 Divi 的「Blog 元件」，但奇怪怎麼長這樣？Blog 元件會呈現文章列表，且能勾選設定呈現圖片加文字，就如同我的部落格首頁那樣。

但因為此網站是新的，裡面除了「網站第一篇文章」沒任何其他文章。且這篇文章也沒設定圖片。因此才會只有一篇文章。

假如你的網站已經有很多文章，或是你開始寫一些文章，這邊的呈現就會較豐富。

因此四年前我開始寫部落格時，先寫了五篇文章後，才把部落格正式開放上線，就是為了不要讓首頁看起來很空虛。

新增個人介紹元件

接著我們在右手邊，新增一個「人員元件」。

修改一下人員的呈現內容，並且上傳一張照片。

切換為恇線排版檢視模式

左下方的此「排版呈現」選項，可以切換成 Divi 的排版檢視模式，這邊我們就能清楚看到藍色框框（段落）包覆綠色框框（行）、而綠色框框又裝著黑色的 Divi 網頁元件。

有時在 Visual Page Builder 視覺化編輯器上，會發生區域被擋住，不好點擊修改的狀況。我們只需要切換到此 Divi 排版佈局總覽，就能輕易點擊到各區域的「齒輪設定」、「加號新增元件」等。

保存並發表頁面

下方按鈕通常會隱藏起來，需要點擊中間的紫色 […] 符號才會展開，按下右下角的「保存/發表」來完成編輯。

如果只是練習，不想要這頁被外界看到，那就按下儲存草稿即可。

將 Divi 製作好的頁面設定為首頁

使用 Divi 設定首頁

如果你現在去看首頁，還是一開始預設的那個簡約的頁面，我們到後台 Divi 選項中，找到並點擊主題定制。

接著會跳到如下的 WordPress 主題設定頁面，在選項中找到「首頁設定」。

進入 WordPress「首頁設定」後，先勾選「靜態頁面」接著在靜態首頁的下拉選項，選擇我們剛剛設計的頁面，再按下「發佈」，這樣首頁就會變成我們新設計的頁面了。

如果在此位置找不到首頁選項，請參考此篇文章：

如何更改 WordPress 首頁？簡單三步驟

Divi：使用版型範本快速設計網站

Divi 等頁面編輯器還有一個很大的優勢就是，內建了非常多的設計範本，可以馬上套用，並用上述所學的基礎去對範本進行修改。

不要從頭開始建構網頁，從設計好的頁面來做修改

我會建議新手採用這個方式，除非你有明確的規劃、設計的底子。否則從現有版型中挑選出適合的，再進行修改會比較適合初學者！上述的基礎也沒白學，因為那都是接下來要修改網頁範本很重要的觀念！

這次我們快一點：使用 Divi 頁面範本

一樣新增頁面，選擇使用 Divi Builder。

這次我們選擇中間的選項「選擇佈局」。

這邊你就會看到 Divi 所有的佈局範本，總共有 211 套不同風格範本、每種範本中又有數種不同頁面排版、算起來總共有 1554 個頁面排版可以選擇套版。

我們點進畫面中黃色的這個範本，可以看到右方又分很多不同頁面的排版，有部落格 Blog、關於我們 About、Contact 聯絡我們甚至 Landing Page 的版型可以套用。

藍色按鈕可以線上瀏覽該版型的實際的頁面，可以觀察它的呈現和動態效果。綠色按鈕則是確定套用此頁面。

我們選擇 Landing Page 並按下綠色按鈕套用。

編輯 Divi 範本頁面

套用後你的編輯器就會載入該 Divi 頁面範本，滑動到各個元素上點按，就可以看到你上面所學熟悉的框框元件們，只需運用上面所學的知識，就能輕易地將這些英文、元素、編輯成我們的官方網站。

這邊我編輯它的大標文字，這邊要注意的是，它是一個文字元件塞了兩行字，並且分別設定了不同的顏色。

接著我們來修改中間的區塊，一樣在該元件上的黑色框框點擊齒輪，來進行內容以及樣式的修改。

它這整套是 Divi 做好的元件，icon 搭配標題再搭配文字說明，因此在該元件的設定中就可以修改到這三個內容，我將標題和文字修改好後，並選擇我想要呈現的圖標。

更多 Divi 套版教學示範影片

影片都不長，如果你看到這邊請務必看影片加強整體記憶，並且影片多了「複製模組樣式」的應用、以及修改範本背景顏色。

快速打造「高質感公司形象首頁」

套用！修改！完成高質感公司形象首頁就是這麼容易！

打造好頁面後，記得將頁面設定為首頁，如果不會請參考：如何更改 WordPress 首頁？簡單三步驟

八分鐘建立「網站部落格」

從建立過程中，學習 Divi 建構、與改動頁面的技巧！

Divi 網站字型設定

最後網站要有質感，別忘了設定字型。因此我們最後要來做字型的設定。

Divi 可以很容易的導入 Google 的字體，快速提升網站的質感！

到 Divi 的主題選項，第一個頁面拉到最下方會看到自訂 CSS，在框框中輸入下面程式碼：

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
body, p, span{
font-family: 'Lato','Noto Sans TC','PingFang TC',"SF Pro TC",'Helvetica Neue', 'Helvetica','arial','Microsoft JhengHei',sans-serif; 
}
h1,h2,h3,h4,h5,h6{
font-family: 'Lato','Noto Sans TC','PingFang TC',"SF Pro TC",'Helvetica Neue', 'Helvetica','arial','Microsoft JhengHei',sans-serif;
font-weight: bold; font-weight: 700; 
}

這也是本部落格網站所用的字型設定參數！請複製起來貼到 CSS 中，記得最後按下保存改動，再回到前台就可以看到漂亮字型。（有裝快取外掛的話，修改完可能要清一下快取）。