" 當安裝好Wordpress佈景主題時，下個問題就是要怎麼進階設計自己的網站？Wordpress常用兩個區塊『 文章 Post 』與『 頁面 Page 』，這時候就需要編輯器出場了，本文章採用Wordpress架站裡最熱門『 輕量型Divi Builder編輯器 』，讓網站躍上一線設計。"

🍎 80萬人下載WordPress佈景主題Divi Theme ❯ 安裝主題實用6大功能教學

一. 什麼是Divi Builder編輯器？

由Elegant Themes公司開發，團隊在Wordpress開發架站工具超過15年的經驗，目前已累計80萬人以上下載Divi Builder編輯器。專門用於Wordpress網站，無需編寫程式，有別於傳統編輯器制式化的網頁設計，Divi Builder編輯器擁有高彈性與豐富網頁設計擴充功能，建立形象網站、部落格、購物網站、landing page等。

二. 為什麼要使用Divi Builder 編輯器10個原因?

三. Divi Builder 編輯器購買與安裝教學

如有安裝其他worpdress佈景主題 ，而頁面編輯器選擇用Divi Builder，那要從wordpress後台管理系統，完成安裝Divi Builder才可做使用。
如之前已有安裝Divi Theme佈景主題，則不用再安裝Divi Builder囉！

🍎 購買與安裝Divi Theme 佈景主題圖文教學

✍Divi Builder 編輯器購買與安裝-圖文教學

Step1 搜尋Divi，點擊第一個或第二個搜尋結果都可。

圖 / 搜尋引擎搜尋Divi

Step2 進入Divi Builder 官方網站後，點選右上角PRICING 。

圖 / Divi Builder編輯器官方網站

Step3 此教學選擇右邊一次性付費終身使用方案。> 點擊SIGN UP TODAY按鈕

圖 / Divi Builder方案

Step4 註冊帳戶，填寫付款資訊 > 完成後點選 COMPLETE REGISTRATION。

補充說明：Username使用者名稱、Email Address 電子郵件、Password密碼、Confirm Password 確認密碼、First Name名字、Last Name姓氏、COUNTRY OF RESIDENCE國家居住地、You Agree To Our Terms Of Service同意服務條款、Get Updates Via Email 接收更新通知電子郵件。

圖 / Divi Builder 註冊帳戶填寫付款資訊

Step5 點選右邊DOWNLOAD DIVI BUILDER PLUGIN。
如已經有安裝Divi Theme佈景主題，請勿再下載DIVI BUILDER，因佈景主題已有包含編輯器。

圖 / DOWNLOAD THE DIVI PLUGIN

Step6 登入Wordpress管理系統，側邊選單選擇『外掛』> 『安裝外掛』。

圖 / 登入Wordpress管理系統-安裝外掛

Step7 圖1選擇『上傳外掛』> 『選擇檔案』。圖2點選下載的 Divi Builder壓縮包（這邊請勿解壓縮）。

圖1 / WordPress外掛-選擇檔案

圖2 / 上傳divi-builder壓縮檔

Step8 圖1 Divi Builder壓縮包點擊『立即安裝』>圖2 點擊『啟用外掛』 。

圖1 / divi-builder壓縮檔-立即安裝

圖2 / divi-builder啟用外掛

Step9 外掛列表裡，出現Divi Builder代表成功安裝。

圖 / divi-builder完成安裝啟用

四. 網頁設計基本概念

📍響應式網頁

英文名稱Responsive Web Design，通常縮寫為RWD。此概念於2010年5月由美國網頁設計師Ethan Marcotte所提出。根據裝置與瀏覽器的寬度不同，調整頁面元素的位置。
❖網頁動線：由左至右、由上至下。

圖 / 網頁設計動線

📍網頁格線系統

Section 區塊:用於段落區隔或文章章節。

Row列：包覆欄的容器，橫列。

Column欄：單一欄的寬度，直欄。

Gutter間隔:欄之間隔寬度。

圖 / 網頁格線系統

圖 / 網頁系統列與欄

📍物件盒模型

Margin 外距：外邊距是透明的，適用於物件與物件之間，間距調整。

Padding內距：內邊距是透明的，適用於物件拓展或縮小內距。

Border邊框：外邊距與內邊距中間的邊框。

Content物件：如文字、圖片等，都算是物件。

圖 / 網頁設計盒模型

了解網頁設計基本概念後，後續使用編輯器時，就能理解編輯器在排版佈局網頁是怎樣使用的。

五. Divi Builder編輯器介面說明

Divi Builder其實分為2種模式『 後端編輯器』 與 『前端視覺化編輯器』。
後端編輯器: 是依舊能看見wordpress側邊選單跟其他功能，如下圖1。
前端視覺化編輯器: 是滿版的畫面，並且能清楚知道各功能區塊呈現出來的視覺效果如何，能移動編輯器位置，如下圖2。

此Divi Builder介面說明與實際操作教學都會採用『前端視覺化編輯器 Visual Builder』。

圖1 / Divi Builder後端編輯器

圖2 / Divi Builder前端視覺化編輯器

❖ 如何開啟Divi Builder後端編輯器？

WordPress側邊選單，選擇『 Divi 』> Theme Options > 紫色橫條選單，選『 Builder 』，記得選『 Advanced』> Enable Classic Editor (傳統編輯器） ，白色按鈕點下即可開啟後端編輯器 >Save Changes儲存更改。

圖 / Divi Builder開啟後端編輯器

❖ Divi Builder三種網頁設計方式

Divi Builder編輯器分為 Build From Scratch、Choose a Premade Layout、Clone Existing Page。以下個別說明。

圖 / Divi Builder分為 Build From Scratch、Choose a Premade Layout、Clone Existing Page.

Build From Scratch：為空白的網頁從頭設計。網頁模塊設計構思都自己打造，適合本身有網頁企劃經驗，或者自己對網頁設計有想法的人。

圖 / Divi Builder編輯器-Build From Scratch

Choose a Premade Layout：Divi線上預設的網頁模版。適合網頁設計新手，或者專案時間上較為急迫者，省去網頁企劃時間。底下功能主要分為三個類型，Premade Layouts預設網頁模版、Your Saved Layouts你儲存的網頁模板、Your Existing Pages你現存的頁面。

補充說明：

🔅Premade Layouts預設網頁模版: Divi 線上網頁設計模版超過1000種可做選擇（重點免費）。左側可以選擇網頁設計類型，包含 Art & Design藝術與設計、Business商業、Community & Non-Profit社區與非營利、Education教育、Events活動、Fashion & Beauty時尚與美容、Food & Drink食物和飲料、Health & Fitness健康與健身、Lifestyle生活方式、Online Store網站商城、Simple簡單的、Technology技術。

圖 / Divi Builder編輯器-Choose a Premade Layout

🔅Your Saved Layouts你儲存的網頁模板: 在網頁設計的時候，有幾頁排版佈局是一樣的，或者之前活動頁面做得不錯，都可以手動存下來。這時候選擇儲存的網頁模版可以在執行設計上達到更好的效率。

圖 / Divi Builder編輯器-Your Saved Layouts你儲存的網頁模板

🔅Your Existing Pages 存在的頁面 : 網站的頁面與文章都可以使用，直接套用樣式，也就是原本wordpress『 頁面列表』與『文章列表』都會自動顯示在這。設計網頁上，只要更改內容或樣式，即可省時完成頁面。

圖 / Divi Builder編輯器-Your Existing Pages 存在的頁面

Clone Existing Page ：複製現有頁面。其實就是等於Your Existing Pages。

圖 / Divi Builder編輯器 - Clone Existing Page 複製現有頁面

❖ Divi Builder 格線介紹

Divi Builder編輯器，格線主要分成三大項 藍色Section區、綠色Row列、深灰色Module模塊。再次複習『網頁格線系統』。

圖 / Divi Builder編輯器格線

藍色Section區、綠色Row列、深灰色Module模塊，左上角功能表它們有共同設定，而Row列的部分則多一個『欄位結構』。

圖 / 藍色Section區、綠色Row列、深灰色Module模塊，共同設定圖註解

補充說明：

藍色Section區、綠色Row列、深灰色Module模塊，icon三個點點，設定內容大同小異，下圖以section區做英翻中註解。

圖 / Section區、Row列、Module模塊，設定功能中文翻譯

藍色Section區: 點擊圓形藍色＋號，總共分為 圖1/Regular正規的、圖2/Specialty特別的、圖3/Fullwidth全寬。

圖 / Divi Builder編輯器-格線Section

圖1 / Divi Builder- Section區塊 Regular正規的

圖2 / Divi Builder編輯器-Section區 Specialty特別的

圖3 / Divi Builder編輯器-Section區 Fullwidth全寬

綠色Row列: 在點擊藍色Section區與橘色Section區，可以看到綠色Row列。1列裡面，可以再區分好幾欄位。

圖 / Divi Builder編輯器-row列

深灰色Module模塊: 在section區的Regular/ Specialty /Fullwidth ，目前推出39個功能模塊，可以自訂模塊功能細節。

圖 / Divi Builder編輯器-Module

❖ Divi Builder 工具列表介紹

Divi Builder編輯器的工具列，從畫面左到右分別說明功能。 另外下方文章會說明『常用重要編輯器功能』。

圖 / Divi Builder編輯器工具列

圖 / Divi Builder編輯器工具列表註解

Divi Builder Setting 編輯器基本設定

垂直三個點點，裡面功能是針對 Divi Builder介面做基本設定。

圖 / Divi Builder編輯器-Divi Builder Settings

📍Customize Builder Settings Toolbar 自訂編輯器工具列表設定：當點選圖示， 深灰色是會顯示在頁面設計工具面板上; 則會是淺灰色代表不顯示。

圖 / Divi Customize Builder Settings Toolbar

補充說明：

圖 / Divi Builder Toolbar

🔅 ①Wireframe View 線稿圖檢視 : 選擇線稿圖檢視，畫面不會出現任何視覺化的物件設計，則是呈現各Section區、綠色Row列、Module模塊，框線圖，以利於觀看目前頁面區塊。

圖 / Divi Builder Wireframe View 線稿圖檢視

🔅 ②Grid Mode 格線模式檢視 : 選擇格線模式檢視，畫面視覺化的物件設計，與各Section區、綠色Row列、Module模塊，同步呈現，以利於編輯。

圖 / Grid Mode 格線模式檢視

📍Builder Default View Mode 編輯器預設檢視模式：提供4種檢視 Desktop View 桌機檢視、Tablet View 平板檢視、Phone View 手機檢視、Wireframe View 線框稿檢視。預設值是桌機檢視。

圖 / Divi builder default view mode

📍 Builder Default Interaction Mode 編輯器預設介面模式：
Hover Mode 滑鼠移動模式：當滑鼠移動到編輯器Section區域時，才會自動出現藍色圓圈＋。
Click Mode 滑鼠點擊模式：當滑鼠移動到編輯器Section區域與Row列時，滑鼠點擊後，才會自動出現藍色圓圈＋與綠色圓圈＋。
Grid Mode 格線模式：滑鼠不用滑動與點擊，編輯器自動顯示Section區域與Row列的藍色圓圈＋和綠色圓圈＋。

圖 / Divi Builder Default Interaction Mode

📍History State Interval 歷史狀態間隔：5種選擇，預設值是After Every Action之後每個動作。After Every 10th Action之後每10個動作，以此類推。

圖 / History State Interval

📍Setting Modal Default Position 設定物件面板位置：依據個人喜好調整位置。Last Used Position最後使用的位置、Floating Minimum Size 浮動小型尺寸、Fullscreen 全螢幕、Fixed Left Sidebar固定為左側選單、Fixed Right Sidebar 固定為右側選單、Fixed Bottom Panel固定在控制板下方。預設值為Last Used Position最後使用的位置。

圖 / Setting Modal Default Position

📍Page Creation Flow 創造頁面流程：這是一開始進入bulider會設計者選擇要哪種類型的設計方式。預設是Give Me A Choice 給我選項，三種模式可挑選。Build From Scratch 建構空白頁、Load Premade Layout載入先前版型、Clone Existing page 複製存在的頁面。

圖 / Page Creation Flow

📍Builder Interface Animations 編輯器介面動畫：當在添加/刪除/編輯模塊時，編輯器會有瞬間的彈入彈出動畫效果。可選擇關閉開啟。

圖 / Builder Interface Animations

📍Show Disabled Modules At 50% Opacity 顯示隱藏物件為不透明50%：當在編輯網頁物件，有可能會遇到這個物件不想要顯示在其中一種裝置（桌機、平板、手機）。開啟這個選項，選擇的物件會有淡化的效果，作為標示。我個人通常會開啟，因可以直觀的知道哪一個裝置不會出現此物件。

圖 / how Disabled Modules At 50% Opacity

📍Group Setting Into Closed Toggles 編輯器群組設定開合切換功能：編輯區塊、列、模塊時，會跳出介面看板，裡面有content（內容）、design（設計）、advanced（進階設定），3塊都有各自的詳細功能設定，旁邊會有小型的三角形，就是用來功能群組的顯示與關閉。

圖 / Group Setting Into Closed Toggles

📍Add Placeholder Content To New Modules 增加提示文字在新物件：預設是開啟。這意思是每個Divi的物件，在編輯器面板裡Content（內容），文字欄位會有提示文字，告知設計者這個欄位要填什麼樣類型的資訊。如關掉此功能欄位則呈現空白。

圖 / Add Placeholder Content To New Modules

📍Theme Builder Template Editing 主題編輯器版型編輯：這是指在Wordpress側邊選單Divi Theme Builder，開啟使用，如建立全站Header(頁首）或Footer(頁尾）。在『頁面』列表與『文章』列表裡，編輯時，就可以直接從頁面或文章，設定編輯主題版型。

圖 / Theme Builder Template Editing

Load From Library 從Divi版型庫載入網頁模版

如先前選擇的版型設計，在執行過程中，覺得不合適，也可以再次透過Load From Library重新載入新的版型。或者在空白頁面設計時，突然沒靈感，也可採用載入版型，來解決設計的困境。

圖 / Divi Builder - Load From Library

Divi Builder 文章與頁面設定

最常見的就是要怎麼單獨設定文章跟頁面的標題與摘要、代表圖片，Divi Builder工具列表，貼心的提供設定。
📍文章 Settings：文章設定欄位裡，可分為Title標題、Excerpt摘要、Featured image文章代表圖片、Categories分類、Tags標籤。
📍頁面 Settings：頁面設定欄位裡，可分為Title標題、Excerpt摘要、Featured image文章代表圖片。因Wordpress『頁面』本身就沒有提供分類與標籤，因此在Divi Builder編輯器裡無此功能。

圖 / Divi Builder-文章與頁面設定

補充說明：

📍文章與頁面CSS設定： 在設定面板上Advanced（進階），文章或頁面都可以自訂css，如會自己撰寫css這部分就可以實現區塊、列、模塊樣式調整。這邊的css是共同的css，比如想要H1、H2等想要同款樣式，不用單獨調整。

圖 / 文章與頁面CSS Advanced設定

Editing History 編輯歷史紀錄

在網頁設計中，如果想要回到前幾次的動作，可以利用歷史紀錄，回溯當時紀錄。

圖 / Editing History 編輯歷史紀錄

Portability 可移植性（匯出匯入網頁版型設計）

完成網頁設計後，備份除了存在Divi版型庫裡，也能透過Portability下載存在電腦裡，下載後的檔案為json檔。同樣如有其他Divi開發者的json檔也能直接從Portability匯入。

圖 / Portability 可移植性（匯出匯入網頁版型設計）

4種方法 Save To Library 儲存至版型庫

📍Divi Builder工具列表： 這功能是直接儲存『頁面』或『文章』的版型設計。
Layout Name 版型名稱。Save To Divi Cloud儲存至Divi雲端，這是2022年推出的新功能，必需是Divi會員，才可使用。Add To Categories 加入分類、Add To Tags 加入標籤。

圖 / Divi Builder-Save To Library

📍Divi Builder 圖層工具： Divi Builder有圖層的功能，可以看到網頁裡所有的區塊，並且編輯。 其中Save To Library可以針對Section、Row、Module做儲存。

圖 / Divi Builder圖層工具-Save To Library

📍Section區、Row列、Module模塊：
視覺編輯器裡，在垃圾桶旁邊向下箭頭icon，他們個別都有 Save To Library的功能，可自行命名、定義分類、標籤等。 記得要Save To Library。

圖 / Divi Builder編輯器工具-Section區、Row列、Module模塊

📍Section區、Row列、Module模塊 其他設定（點點）：
視覺編輯器裡，點擊三個點點， 會出現深灰色看板，一樣他們個別都有 Save To Library的功能，可自行命名、定義分類、標籤等。 記得要Save To Library。

圖 / Divi Builder編輯器工具-Section區、Row列、Module模塊

Save To Library 圖文教學

這個功能是當你現在設計好的頁面，如往後這版型使用率高或覺得視覺上呈現不錯，就可以把它存下來，之後開新的版型，就可以拿此頁面做設計上的修改。因Save To Library儲存的步驟都大同小異，因此下方以『頁面』Save To Library教學。

📍『文章』或『頁面』版型Save To Library 圖文教學

Step1 紫色圓圈列表，在+與垃圾桶中間有一個圈圈箭頭向下的ICON，點擊後，會跳出Add To Layout Library看板。> 填寫Layout Name 版型名稱、Categories標籤、Tags分類 > 再點擊Save To Library。

圖 / 頁面或文章 Save To Library

Step2 回到Wordpress內容管理系統，側邊選單Divi > Divi Library確認版型是否成功儲存，如有顯示，代表成功儲存囉！

圖 / Divi Library

Step3 WordPress側邊選單 > 點擊『文章』，新增文章。

圖 / wordpress 新增文章

Step4 點擊紫色按鈕 Use Divi Builder。

圖 / Use Divi Builder

Step5 會出現三種設計模式，選擇『 CHOOSE A PREMADE LAYOUT 』。

圖 / Divi Builder-CHOOSE A PREMADE LAYOUT

Step6 會出現『 Load From Library 』，①選擇『 Your Saved Layouts』。> ②再選擇剛剛儲存的版型。

圖 / Divi Builder-Your Saved Layouts

Step7 紫色選單選擇 Your Saved Layouts > 點擊『 Use This Layout 』。系統自動載入頁面。

圖 / Divi Builder-Use This Layout

Step8 載入版型設計就完成頁面囉！如果是設計草稿階段，記得點擊Save Draft。網頁設計完全，再點擊Publish（正式發佈）。

圖 / Divi Builder-Save To Library 完成

補充說明：

📍Divi Library 如何編輯分類與標籤？

在Wordpress內容管理系統後台，Divi > Divi Library > Layouts上方有三個灰色底按鈕：Manage Categories 管理分類、Manage Tags管理標籤、Import&Export匯入與匯出。

圖 / Divi Library

Manage Categories 管理分類，可以看到已儲存版型的分類，點擊版型可以快速編輯。新增分類，『名稱欄位』是指網站上顯示的名稱。『代稱欄位』是指網址通常由小寫英文字母或數字組合。『上層分類』是指網站可以有主分類或次分類。『內容說明』，可自行填寫。全部定案後記得按『新增分類』。

圖 / Divi Library-分類

Manage Tags 管理標籤，可以看到已儲存版型的標籤，點擊版型可以快速編輯。新增標籤，『名稱欄位』是指網站上顯示的名稱。『代稱欄位』是指網址通常由小寫英文字母或數字組合。『內容說明』，可自行填寫。全部定案後記得按『新增標籤』。

圖 / Divi Library-tags

❖ Divi Builder 編輯器看板介紹

在藍色Section區、綠色Row列、深灰色Module模塊，都有一個齒輪的icon稱為編輯，點下去後就會看到Divi Builder編輯器看板，主要分成三項Content（內容）、Design(設計）、Advanced（進階）。

圖 / Divi Builder 編輯器

📍Section 編輯器看板

分為三大區塊：Content內容，欄位有連結、背景、管理標籤。Design設計，調整寬高、間距、陰影、轉場、濾鏡等功能。Advanced進階，這欄位專門設定自訂css樣式，以及裝置顯示狀況、位置、轉場時間、滾動效果等。

圖 / Divi Builder-section settings

📍Row 編輯器看板

新版本的Divi Builder，把Column欄位設定歸在Row裡面，因此可以個別設定欄位連結，同時也能設定Row列的連結。Design設計欄位與Advanced進階欄位，基本上功能沒有太大變化。

圖 / Divi Builder-Row settings

📍Module編輯器看板

Divi Builder編輯器裡面有各式常用的功能模塊，一樣區分三大欄位， Content內容、Design設計、Advanced進階。內容的部分，就是撰寫文字內容;設計的部分，則是調整文字顏色大小、模塊間距等;進階設定的部分，則是包含自訂css樣式、裝置顯示、位置偏移等。

圖 / Divi Builder-module

六. Divi Builder 編輯器常見問題

轉載文章：尊重原創，請註明本部落格名稱『 MS.E自學創作 』、文章標題與連結網址。如其他內容使用，請來信告知mse@mseiblog.com