繼之前的【WordPress】人人都可以是網站設計師，DIVI最強大的頁面編輯器文章發佈後，有許多人來信問我更多關於使用Divi的方法。

而在這篇文章中，我將向你介紹，如何使用Divi主題，幫你的Wordpress網站建立一個完整，且設計美觀的頁面，從安裝Divi主題編輯器，到介面操作、設計等，即使不會寫程式、沒有設計背景，Wordpress新手也能夠自行架出漂亮的網站，為你的客戶、個人品牌、自媒體設計一個獨一無二的專業網站吧。

你準備好了嗎？那我們開始認識，並學習使用Divi吧！

文章內所提到的Wordpress，指的都是內容管理系統Wordpress.org，而不是部落格網站Wordpress.com喔！

---

1.Divi介紹

Divi是Wordpress的外觀編輯器，它可以作為外掛，替單一頁面編輯版面，並搭配其他主題同時使用，也可以作為網站主題，將整個網站全方面地進行設計，不論是在經營部落格、自媒體、網路電商、線上商店、商業型公司形象網站、個人作品集等，各種形式的網站需求都能滿足。

Divi的設計方式很直觀，你在編輯器所看到的畫面，就等同於使用者瀏覽網站時的畫面，不必擔心產生神奇的誤差，要增加文字、圖片、按鈕、聯絡表單等，直接從Divi提供的選單中選擇，不必寫任何程式碼，是一般人也能輕鬆上手的編輯器。

最初，我在剛開始接觸Divi時，是利用Divi提供的大量免費網頁範本，直接進行套用、修改、更換圖片、文字及網站內容等，進而慢慢熟悉Divi的每一個功能設定，這也是我覺得Divi對新手而言最貼心的部分。

Divi官方在每週都會增加免費且全新的網頁範本，每一個範本中，至少提供你4-8頁，各種形式的內頁（例如：首頁、關於我們、服務內容、聯絡我們...等），也就是說，你可以直接選擇使用任何一個你喜歡的頁面範本，將內容修改成你的文字、內容，網站就能夠直接上架，快的話，一小時內就能產生一個看起來專業，且經過設計的網站。

Divi唯一的缺點，是目前仍不提供中文版，它是一個全英文的編輯器，也許很多人聽到全英文就感到害怕跟焦慮，但其實，如同我前面所說，它直觀化的設計介面，以圖像代替文字，即使不夠熟悉英文的用語，也能夠用視覺直接認識每個功能。

DIVI優點

• 可作為主題或外掛使用
• 頁面視覺編輯器
• 大量免費範本套用，每個範本至少4到8種頁面
• 支援Woocommerce，可設計商店頁面及商品頁面
• 24小時線上客服支援
• 提供電子郵件支援外掛
• 提供終生制價格
• 不限網站數量

DIVI缺點

• 僅提供英文版

另外，由於Divi的用戶在世界各地都有，網路上所提供的支援、外掛、教學，數量非常非常龐大，有任何問題，幾乎都能在Google上找到相關的解答，甚至還有許多不同功能的外掛，是專門為了Divi所設計出來的。

而下列文章，我將透過一步步的教學，指導你如何使用Divi，從安裝、到編輯器的使用、元件及模組的說明介紹等等，讓你不必在安裝Divi後獨自摸索，那我們就開始囉！

---

2.Divi費用

首先，Divi的會員價格分為兩種，個別是一年制及終生制的會員，兩者所能使用的服務與權限完全相同，並不會因為購買的是一年制，而有任何服務上的差異，不論是主題型或者外掛型的Divi、全年無休客服、免費網頁範本等，都將提供你在購買的時限內使用。

我購買的Divi是終生制的，也就是說，我不需要每年付一次年費，就可以無限享有Divi更新、客服，而且也不限制網站的數量，代表我為客戶製作網站的成本不會無限增加。

Divi會員的原價是美金$89/年，或者是美金$249/一次性付費，若你透過我下方提供的按鈕，連結至Divi的話，將可以享有購買Divi會員九折優惠價，也就是說，一年會員制的價格變成美金$80，而終生會員制的價格變成美金$224，而我也能從Divi獲得一點佣金作為獎勵：）。

一年制	終生制
可使用Divi ＆ Extra主題以及Bloom ＆ Monarch外掛	可使用Divi ＆ Extra主題以及Bloom ＆ Monarch外掛
提供免費且數量眾多的網頁範本套用	提供免費且數量眾多的網頁範本套用
一年期更新維護	終生更新維護
一年期24小時客服	終生24小時客服
網站數量不限	網站數量不限
30天無條件退費	30天無條件退費
$89 → $80	$249 → $224

在購買的同時，Divi會要求你輸入帳號Username以及密碼Password註冊會員，請記下這組帳號密碼，之後查詢產品的使用權限、或者是需要使用客服服務，都會需要這組會員資料喔。

---

3.安裝Divi到Wordpress

購買完成後，點選Elegant頁面的右上方的Account，輸入帳號密碼登入會員，你會看到下方圖示，左邊的是Divi主題，右邊的是Divi外掛，如果你要用Divi設計一整個網站，那就下載左邊的DIVI主題使用，如果你想要使用別的主題，而Divi只是拿來設計單一頁面，那就下載右邊的Divi外掛使用，而兩者的詳細安裝方法請看以下說明。

---

Divi網站主題（上圖左邊）

進到你的Wordpress後台，選擇外觀內的「佈景主題」，接著點選中上方的「安裝佈景主題」後，再點選「上傳佈景主題」，選擇剛才下載好的Divi zip檔上傳，Wordpress就會幫你安裝完成了。

---

Divi外掛 - 單一頁面編輯器（上圖右邊）

而Divi外掛的話，則是到外掛→安裝外掛，接著點選中上方的「上傳外掛」，選擇你下載好的Divi外掛zip檔，然後系統一樣會幫你安裝完成。

---

驗證使用權限API KEY

安裝完過後，進入到Elegant頁面，點選Account，你會看到下方有「Username & API Key」，這就是你驗證Divi產品的密鑰。

回到你的Wordpress後台，安裝好Divi後，左邊選單會出現「Divi」選項，選擇「Theme Options」，進入到Divi選項設定頁面中，點選「Updates」，在下方輸入剛剛在Elegant會員資料中的Username以及API Key，點選「Save Changes」，就完成驗證了，可以盡情使用你的Divi囉！

使用Divi外掛的人，在完成API驗證後，可以直接跳到7.頁面編輯器的地方，繼續閱讀Divi編輯器的使用教學。

---

4.Wordpress基本設置

接下來，第四段這部分的教學，是提供給剛開始使用Wordpress，還沒有任何網站頁面的人，如果你的網站已經有基本的內容、頁面、選單等內容，可以直接跳到5.LOGO設定教學唷。

新增頁面

首先，每個網站會依照主題的不同，而有不同的頁面，通常會先有「首頁、服務、聯絡我們」等。

選擇左邊選單的「頁面」，點選「新增頁面」，在標題的部分打上你的頁面名稱後，右手邊可以看到一欄「永久連結」的區塊，這個會是你的頁面連結，所以我會建議你填寫英文，例如「首頁」就使用「home」作為代稱，這樣在這個頁面的網址，就會變成「你的網址/home」，會對Google搜尋比較有幫助。

接著，點選右上方的發佈，就可以了，記得多新增幾個頁面，你的選單才不會太荒涼喔。

---

新增主要選單

點選左邊選單「外觀」中的「選單」，這裡我們要將剛剛新增好的頁面，製作成網站上能看到的選單，點選中上方的「建立選單」，填寫「選單名稱」，這個名稱可以隨意取，用你方便記得的名稱即可，然後勾選左側的頁面項目，點擊「新增至選單」，你會看到被勾選起來的頁面，都跑到名稱下方，這時候你可以滑鼠右鍵按著拖拉，更改順序，最後，勾選Primary Menu主要選單，點擊「建立選單」，就完成了。

你可以回到網站的主頁，確認剛剛製作的選單，是否有乖乖出現在上面選單列表中呢？如果沒有的話，再照上方的步驟，重新建立一次選單即可。

---

5.LOGO設定

通常，網站的LOGO會出現在網頁上方的選單列表，可能在左邊或者是中間，如果想要更改LOGO的圖示，請到網站的Wordpress控制台→Divi，點選Theme Options主題選項，在最上方就會看到LOGO的欄位，點選UPLOAD上傳，選擇你的LOGO圖檔後，再按上方的「Save Changes」儲存變更，LOGO就更換完成囉。

---

6.外觀自訂

現在，我們終於要開始使用Divi的設計功能了，請先從Wordpress控制台，進入「外觀」中的「自訂」頁面，在這裡，Divi會提供你可以設定網站整體，比較大範圍的項目，例如說網站的字型、顏色、選單樣式、網站名稱...等等。

以下，我會一個個告訴你，這些選項個別代表的內容，以及你需要設定的部分有哪些。

---

網站顏色、字型設定

General Settings一般設定中，你會看到有Site identity網站名稱、Layout Settings網站框架設定、Typography文字設定以及Background背景設定，它們個別的內容如下：

• Site identity網站名稱：設定網站名稱、網站小圖示、網站說明等資訊。
• Layout Settings網站框架設定：網站主要顏色、頁面寬度等。
• Typography文字設定：標題及內文的文字大小、顏色，製作部落格的網站的話，務必要在這裡調整成適合閱讀的形式。
• Background背景設定：可以替網站修改背景顏色，或者加入背景圖片。

---

選單設定

第二個Header & Navigation選單列，又稱作導覽列，在「Header Format」裡，Divi會在此提供你五種不同的選單風格，個別是：

1. Default：預設
2. Centered：置中，LOGO在上，選單在下
3. Centered Inline Logo：置中，LOGO在選單中間
4. Slide In：選單從右滑入
5. Fullscreen：選單從右滑入，且選單為全螢幕

另外還有提供直式版本的選單，以及往下滑動後，會消失的選單，這兩種類型，每個都選看看，使用你最喜歡的風格即可。

而Primary Menu Bar，則是讓你設定選單中的文字顏色、大小、選單高度、背景顏色等內容，算是你的網站很重要的風格之一，如果你的網站最上方，打算使用很大的底圖，作為主視覺的話，也可以嘗試在這裡把背景顏色調整成透明度為0，這樣會讓整體視覺更加遼闊，

Secondary Menu Bar頂部欄，是會出現在Primary Ｍenu主要選單的上方，如果你回到前面教學的「新增主要選單」，把最後一步勾選Primary Ｍenu的地方，改為勾選Secondary Menu，你的Secondary Menu出現後，那麼才會需要調整這部分的設定唷。

Fixed Navigation settings，這個是當你的網站使用者，將網頁下拉時，選單通常會變為更窄的樣式，方便使用者閱讀網頁內容，而你可以在此處調整網頁下拉後的選單樣式。

Header Elements選單元件，你可以在這裡幫你的選單加入搜尋、購物車這兩個功能，電話及Email則會出現在Secondary Menu頂部欄中。

---

首頁設定

接著進入到首頁設定，Wordpress的預設設定會將「最新文章列表」設定成首頁，如果你今天有特別新增一個首頁，要以其作為網站的主要頁面，就必須在這裡點選「靜態頁面」並在下方的靜態首頁，選擇你要設定為首頁的頁面。

以上是外觀自訂中，幾個使用Divi一定要調整的部分，其他的選項可以每個個別點進去試試看，都是不複雜且單純的內容設定。

---

7.Divi編輯器

以下是本篇文章中最重要的章節，我將開始說明Divi編輯器的使用方法，剛開始可能會覺得有點難以理解，選項好多、好複雜！不過沒關係，我最初學習使用Divi時，也是覺得一個頭兩個大，但只要慢慢熟悉後，你會發現，其實一切都不難。

進入Wordpress控制台的「頁面」，在你已經新增好的頁面下方，點選「Edit With Divi」，正式開始進入Divi編輯器囉！

一開始，你會看到三個選項，如上圖所示，第一個是「從空白頁面開始建立網頁」，第二個是「使用範本」，第三個是「複製現有頁面」，這些選項等等都可以再重新點選，不用擔心一開始就要做出選擇，先點選第一個「空白頁面」開始。

---

前端編輯器介面

進入空白頁面後，你會看到中間下方有一個紫色的三個點點圖示，點一下後，整個下方的工具列會展開，如上圖所示。

左下角主要是你檢視網頁的方式，Divi提供你五種不同的檢視方法，有「列表」、「放大檢視」、「電腦版」、「平板」以及「手機版」，讓你能夠在編輯頁面的過程中，反覆地確認用不同的設備瀏覽網站時，網站會呈現什麼樣子。

Divi編輯器中間的工具列總共有六個按鈕，個別詳細功能如下：

• 匯入範本：可以叫出Divi提供的網頁範本匯入。
• 新增至模板庫：如果你使用Divi做網站到後期，每個頁面可能會重複出現的東西，那就可以把它們加入到模板庫，而這邊的按鈕，是讓你將整個網頁都加入模板庫。
• 清除全部：如果你不滿意自己做的東西，可以點選這個按鈕，一次全部刪除重來。
• 頁面設定：這邊是這整個頁面的全局設定，例如說，你希望能用CSS程式碼，改變這個網頁某些東西的樣式，但是不要影響到其他頁面，那麼，程式碼就必須加在這裡。
• 步驟記錄：Divi提供你從開啟這個頁面編輯器開始的步驟記錄，如果你在中途把網頁關閉重新點開，那麼步驟記錄都會消失。
• 匯出匯入：這個功能是方便你輸出這一整個頁面，或者是輸入別人給你的檔案，但是如果版本不同的話，有時候會造成輸入失敗的問題。

最後，在你完成這個頁面的設計後，Save Draft儲存草稿按鈕出現的話，代表這個頁面還沒有公開，只是儲存草稿而已，而Publish發布按鈕，則是將網頁公開，來到你的網站的使用者都可以看到這個頁面。

---

Section、Row、Module說明

接下來要講解的是Divi的Section、Row以及Module，Section是上圖最外圍的藍色框線處，Row是中間藍綠色的框線，Module則是灰色的區域。

---

Section

首先，你可以把Section想像成是「把網頁切成一個個橫式的長方形」，我們會透過Section將網頁的內容分成一個一個方格，而Section又分成三種類型，第一個是Regular，它就是一個單純的長方形，裡面可以放入無數個像是下方的Row。

第二個Specialty則是將這一區塊分隔成左右兩邊，一邊跟Regular一樣，能放進許多Row，而另一邊則是單一的區塊，不能再被分割，適用於需要側邊欄的部落格文章頁面。

第三個Fullwidth，是寬度佔畫面100%的區塊，裡面不能再做分割，但有提供各種形式的全寬幅元件，適合做網頁最上方的主視覺，例如說能放單一圖片、多張圖片輪播、包含Slogan標語的主視覺圖等等。

---

Row

Section是把網頁橫式的切割，那麼Row就是把每個橫式的區塊，再做直式的切割，Divi目前提供20種的Row讓你使用，根據網頁的內容不同，可以選用不同的Row。

當然你也可以在選定之後，更改Row的形式，所以不必擔心一次選擇就無法再次修改。

---

Module

Divi的Module則是真正的網頁內容，在我們用Section跟Row把網頁切割成好幾個區塊後，就可以加入不同的Module，組合出你的網頁。Divi提供了37種Module，加上Fullwidth全寬幅的Section，總共有46種選擇：

如果你有安裝Woocomerce，想製作購物網站的話，在安裝完Woocommerce後，Module會多出以下幾種讓你設計你的商品頁面跟商店頁面：

我有另外一篇文章專門分享如何使用Divi設計WooCommerce的商店及商品頁面：

【Divi教學】如何用Divi設計WooCommerce線上購物網站

---

模板內容

每一個Section、Row、Module，點開右上方的設定圖示，會看見像上圖這樣，有三大區塊，分別是Content、Design、Advanced。

Content代表這個模組的主要內容，Design則是模組的顏色、設計、樣式，Advanced則可以替該模組加入一些CSS程式碼，或者是設定它只出現在電腦使用者，而不出現在手機、平板使用者等等。

---

使用範本

如果，你是剛開始使用Divi的用戶，可以嘗試使用Divi提供的網頁範本，目前Divi總共有201種不同主題的免費範本，幾乎每週都會新增，你可以在裡面挑選喜歡的樣式，加入到網頁中，接著再一個個各別進行調整與修改，每個範本都可以重複使用、刪減，這個可以為你省去非常多網頁製作時間！

---

手機版設定

將滑鼠移到各個設定的右手邊，會滑出好幾個圖示，其中第二個會出現「手機」符號的icon，點開之後，下方會展開三個選項，個別是電腦、平板、手機，在這裡可以獨立為三種不同的螢幕大小設定數值，例如以文字的大小來說，電腦用戶可以接受較大的文字字體，而手機用戶則可以將字體適當地縮小一點，以避免造成文字過度擁擠。

---

8.Theme Builder主題編輯器

除了頁面可以使用Divi編輯器以外，在Wordpress控制台，點選「Divi」，進入「Theme Builder」後，你會發現這邊有不同於「外觀自訂」區域的網站主題設定。

在這裡，你能用Divi編輯器製作一個跟預設不同的Header選單列，以及Footer底部列，而且可以為每個頁面都製作不同的選單，也就是說，不必再侷限於外觀自訂中預設的選單，整個網站都能依照你的想法去製作。

但是，老話一句，如果你還是個Divi新手，建議先熟悉了Divi編輯器的使用方法後，再來嘗試使用這邊的編輯器製作選單喔！

---

自訂頁首選單、底邊欄

在第一個Default Website Template中，通常我們會將整個網站主要使用的選單以及底邊欄的樣式設定在這裡，他們名稱會顯示為Global Header/Footer，顏色是亮綠色，非常好分辨；如果是只顯示於某幾個頁面的話，則會是Custom Header/Footer，顏色為灰色。

指定頁面樣式（例：部落格文章模板）

如果你的網站屬於部落格類型，有非常多的文章，那就可以透過Theme Builder為你的文章建立模板，只要發佈新的文章，文章內容就會按照這個模板展示。

實際操作方法如下圖所示，點選Add New Template的加號後，會彈出頁面列表，將你想要套用的頁面勾選起來。如果你要套用在文章，則勾選All Posts（All文章）。

接著，如果你有設定好的Global Header，系統會直接幫你加進來，如果希望自己設計不同的選單，點選右邊的設定圖示（三個點點），選擇Disable Global，就會轉變成Custom的版本，那你就可以點擊左邊的畫筆圖示進行編輯啦。

而部落格文章主體的部分，請點選Add Custom Body，進入編輯器後，加入Post Title跟Post Content作為文章的標題跟內文，像下圖示範，我使用了Row將頁面分成兩個區塊，在左邊較寬的部分加入Post Title跟Post Content，右手邊則加入的Comment，讓我的讀者可以留言。

---

9.總結

其實今天這篇文章，裡面所提到的內容，只能算是Divi的大略說明，Divi編輯器強大的程度，需要一個個功能慢慢摸索後，你會漸漸地對Divi深感佩服，目前Divi是我最愛用的主題，截至今日，我已經用它為客戶製作過上百個網站。

關於Divi編輯器的使用，我還有另一篇文章【Divi新手教學】如何用Divi設計Woocommerce線上購物網站，專門介紹如何用Divi設計WooCommerce購物網站，有需要的話也歡迎你去看看喔。