Divi 完整教學

Divi Theme Options 安裝與設定

• 購買 Divi 付費佈景主題後，請先登入 Elegant Themes 佈景主題商提供的個人管理介面（官網首頁上方的 Account）。

• 接著請輸入購買 Divi 佈景主題時申請的帳號密碼，登入管理介面。

• 登入後，可以看到 Members Area 會員控制台，這裡是所有關於付費帳號的個人資訊與檔案資訊的管理介面。購買所支付的費用（不論是年繳方案或是終身授權方案）可以讓我們使用 Divi Theme、Divi Builder Plugin、Extra Theme、Bloom、Monarch 五項商品，而且都是不限網站數量使用，非常划算。

• 每項佈景或是外掛說明框內，最重要的兩個資訊就是Download The Divi Theme 下載檔案❶，Divi 是付費佈景主題，首次安裝需要下載到本機上再上傳到 WordPress 網站安裝，還有就是 View Changlog 版本更新記錄說明❷，版本更新記錄可以看到每次更新的內容，網站管理者依據修改內容來決定是否升級到最新版本，原則上只要是安全更新就需立即升級，其他資訊將來有機會另篇文章說明。

• Members Area 會員控制台選單中，最右側的頭像圖示就是個人資訊，請點擊檢視。

• 來到個人資訊頁面，這裡有一個重要的資訊就是佈景主題與外掛的授權碼，在左側選單欄中的下方找到 API KEYs❶，點擊後會看到 Your Username ❷你的名稱與 Your API Keys ❸兩欄資訊，請將它們複製起來，啟用佈景主題時需要使用。

• 接著回到 WordPress 網站控制台，到外觀 ❶/佈景主題 ❷，請點擊安裝佈景主題 ❸。

• 接著請點擊"上傳佈景主題"按鈕。

• 瀏覽 ❶請選擇下載到本機上的 Divi 佈景主題，將佈景主題上傳完成後，請點擊立即安裝 ❷。

Divi 佈景主題安裝完成後，可以看到安裝完成提示畫面，可以點擊啟用 ❶，或是回到佈景主題頁面 ❷。

• Divi 佈景主題啟用後，佈景主題頁面上方多了佈景主題啟用成功的提示字串 ❶，同時提供 Divi 佈景主題教學連結，另外也可以看到控制台多了 Divi 選單 ❷。

• Divi 佈景主題啟用後，請先到 Divi Dashboard 控制台。

• Divi 控制台歡迎頁面，首先就是啟用授權的提示按鈕 ❶，另外也可以到 Theme Options ❷，文章範例我們會到 Theme Options 設定。

• 請到 Theme Options/Updates 選單。

• 來到 Updates 頁面，在 Username ❶與 API Key ❷，完成以後請點擊 Save Changes 按鈕 ❸。

• API KEYs 輸入完成啟用後，可以在 Divi 控制台看到授權啟用成功的提示區塊 ❶，同時也提供了網站內容與 Divi 的關連資訊 ❷。

• 接下來對 Divi 控制台的設定選單簡單跟大家說明如下。Divi Theme Options/General 一般設定，這裡是初次使用 Divi 佈景主題一定要先調整的設定。
  • Logo：網站圖示，這裡可以設定網站標誌圖片，選擇上傳自己的網站 logo。
  • Fixed Navigation Bar：固定網頁上方的功能選單，如果想要固定的話，這裡需要啟用，預設是啟用。
  • Enable Divi Gallery：想要使用 Divi 內建的相簿功能，這裡需要啟用，預設是停用。
  • Color Pickers Default Palette：預建顏色選擇器調色板，這裡設定網站主要顏色，可以調整自己需要的色彩。
  • Grab the first post image：擷取文章第一張圖片做為精選圖片，預設是停用。
  • Blog Style Mode：部落格樣式模式，預設是停用。
  • Sidebar Layout：側邊資訊欄樣式，可以選擇左側或是右側，預設是 Right Sidebar 右側資訊欄。
  • Shop Page & Category Page Layout for WooCommerce：如果有建立 WooCommerce 購物網站的話，商品頁面與商品分類頁面的側邊資訊欄設計，預設是 Right Sidebar 右側資訊欄。
  • Google API Key：有使用的可以在這裡輸入。
  • Use Google Fonts：使用 Google Fonts 網頁字型，預設是啟用。
  • Google Fonts Subsets：使用部分 Google 中文字型或非英語系字型時，這裡需要啟用，預設是停用。
  • Enqueue Google Maps Script：載入 Google 地圖程式腳本，預設是啟用，如果不使用 Google 地圖的話，可以停用這個功能。
  • Show Facebook Icon：展示臉書圖示，預設是啟用。
  • Show X Icon：展示 X 圖示，預設是啟用。
  • Show Instagram Icon：展示 IG 圖示，預設是啟用。
  • Show RSS Icon：展示 RSS 圖示，預設是啟用。
  • Facebook Profile Url：臉書個人資訊網址，想要展示的話，可以在這裡輸入。
  • X Profile Url：X 社群網址，想要展示的話，可以在這裡輸入。
  • Instagram Profile Url：IG 社群網址，想要展示的話，可以在這裡輸入。
  • RSS Icon Url：RSS 圖示網址，可以自行填入網站的 RSS 網址。
  • Number of Products displayed on WooCommerce archive pages：WooCommerce 彙整頁面的商品展示數量，預設是 9。
  • Number of Posts displayed on Category page：分類頁面文章展示數量，預設是 6。
  • Number of Posts displayed on Archive pages：文章彙整頁面展示數量，預設是 5。
  • Number of Posts displayed on Search pages：搜尋結果頁面的文章展示數量，預設是 5。
  • Number of Posts displayed on Tag pages：標籤彙整頁面展示文章數量，預設是 5。
  • Date format：日期格式，預設是 M j, Y，想要修改的話，可以參考官網文件說明。
  • Use excerpts when defined：使用文章摘要，預設是停用。
  • Back To Top Button：返回頁首按鈕，如果網頁內容比較多，網頁很長，可以啟用這個功能，預設是停用。
  • Smooth Scrolling：網頁平滑滾動效果，預設是停用。
  • Disable Translations：停用翻譯，如果不想在網站上顯示翻譯的佈景主題字串，請停用翻譯，預設是沒有啟用。
  • Enable Responsive Images：啟用圖片響應設計（適用各種裝置），預設是啟用。
  • Custom CSS：自訂 CSS 樣式，需要自定義樣式語法，可以在這裡填入。

• General/Performance：加速性能設定，初次使用的朋友可以採用預設的啟用項目就可以，如果也面編輯時發生樣式問題，可以還到這裡將這些加速設定停用。

• Navigation/Page：頁面導覽選單。
  • Exclude pages from the navigation bar：如果有頁面想要停用導覽選單，可以在這裡取消。
  • Show dropdown menus：顯示下拉選單，預設是啟用。
  • Display Home link：展示首頁連結，預設是啟用。
  • Sort Pages Links：頁面連結進行排序，預設是採文章標題。
  • Order Pages Links by Ascending/Descending：按遞增/遞減排列頁面連結，預設是 asc 由小到大，由遠到近。
  • Number of dropdown tiers shown：顯示的下拉選單層級數量，預設是 3。

• Navigation/Cagegories：分類導覽選單。
  • Exclude categories from the navigation bar：如果有分類想要停用導覽選單，可以在這裡取消。
  • Show dropdown menus：顯示下拉選單，預設是啟用。
  • Hide empty categories：如果分類沒有內容則隱藏，預設是啟用。
  • Number of dropdown tiers shown：顯示下拉選單層級數量，預設是 3。
  • Sort Categories Links by Name/ID/Slug/Count/Term Group：排序依分類名稱/ID/代稱/數量/類別群組，預設是 name 分類名稱。
  • Order Category Links by Ascending/Descending：分類排序按遞增/遞減方式陳列，預設是 asc。

• Navigation/General Settings：導覽選單一般設定。
  • Disable top tier dropdown menu links：如果想要停用頂層下拉選單的話，可以啟用這個功能，預設是沒有啟用。

• Builder/Post Type Integration：頁面編輯器整合。
  • Enable Divi Builder On Post Types：啟用 Divi 編輯器的內容格式，有文章、頁面、Projects，預設是三種都啟用，可以依據自己網站需求，選擇停用。

• Builder/Advanced：編輯器進階設定。
  • Static CSS File Generation：產生靜態 CSS 檔案，這個設定可以幫助網站運作，預設是啟用，如果發生樣式錯誤，可以到這裡點擊 Clear 清除，重新載入頁面樣式。
  • Output Styles Inline：輸出樣式允許將 Divi 模組的 CSS 樣式放置在頁尾中。這樣可以使更快頁面載入，但是在頁尾載入到瀏覽器之前，頁面載入時不會帶有樣式。預設是沒有啟用。
  • Product Tour：Divi 使用導覽，在使用 Divi 編輯器時，會跳出導覽教學視窗，需要的話這裡需要啟用，預設是啟用。
  • Enable The Latest Divi Builder Experience：啟用最新的 Divi Builder 體驗，使用目前的 Divi Builder 設計。簡單來說就是會使用最新版的編輯器編輯模式。預設是啟用。
  • Enable Classic Editor：啟用傳統編輯器，如果是很早就接觸 Divi 的朋友，可能有些編輯習慣還是傳統的編輯模式，那麼需要在這裡啟用，預設是停用。

• Layout/Single Post Layout：單篇文章版面配置。
  • Choose which items to display in the post info section：選擇想要在單篇文章出現的項目，有 Author 作者名稱、Date 發文日期、Categories 分類、Comments 留言。
  • Show comments on posts：文章是否出現留言，預設是啟用。
  • Place Thumbs on Posts：文章是否出現縮圖，預設是啟用。

• Layout/Single Page Layout：頁面版面配置。
  • Place Thumbs on Pages：頁面是否出現縮圖，預設是停用。
  • Show comments on pages：頁面是否出現留言功能，預設是停用。

• Layout/General Settings：版面配置一般設定。
  • Post info section：文章資訊區塊設定，有四項可以啟用或關閉，分別是 Author 作者名稱、Date 發文日期、Categories 分類、Comments 留言。
  • Show Thumbs on Index pages：索引頁面是否展示縮圖，預設是啟用。

• Ads/Manage Un-widgetized Advertisements：廣告管理設定 ❶。
  • Enable Single Post 468x60 banner：啟用單篇文章的廣告橫幅，啟用的話 ❷，才需要填入下面各欄資訊。
  • Input 468x60 advertisement banner image：單篇文章橫幅圖片。
  • Input 468x60 advertisement destination url：單篇文章橫幅廣告目的網址。
  • Input 468x60 adsense code：輸入廣告 adsense 代碼。

• SEO：Divi 佈景主題預建就提供了 SEO的設計，想要採用預設的 SEO設定的話，可以在這裡設定。
• SEO/Homepage SEO：首頁 SEO 設定。
  • Enable custom title：啟用自訂標題，預設是停用。
  • Enable meta description：啟用 meta 描述，預設是停用。
  • Enable meta keywords：啟用 meta 關鍵字，預設是停用。
  • Enable canonical URL's：啟用規範網址，預設是停用。
  • Homepage custom title (if enabled)：自訂首頁標題，如果啟用的話，這裡需要設定。
  • Homepage meta description (if enabled)：啟用 meta 描述的話，這裡需要填入資料。
  • Homepage meta keywords (if enabled)：啟用 meta 關鍵字的話，這裡需要填入資料。
  • If custom titles are disabled, choose autogeneration method：如果自訂關鍵字停用，採取自動產生的方式，可以選擇部落格名稱｜部落格描述…等。
  • Define a character to separate BlogName and Post title：網站名稱與文章標題的分隔符號設定。

• Single Post Page SEO：單篇文章頁面 SEO 設定。
  • Enable custom titles：啟用自訂標題，預設是停用。
  • Enable custom description：啟用自訂描述，預設是停用。
  • Enable custom keywords：啟用自訂關鍵字，預設是停用。
  • Enable canonical URL's：啟用規範網址，預設是停用。
  • Custom field Name to be used for title：用於標題的自訂欄位名稱。
  • Custom field Name to be used for description：用於描述的自訂欄位名稱。
  • Custom field Name to be used for keywords：用於關鍵字的自訂欄位名稱。
  • If custom titles are disabled, choose autogeneration method：如果停用自訂標題，請選擇自動產生方法。
  • Define a character to separate BlogName and Post title：網站名稱與文章標題的分隔符號設定。

• Index Page SEO：索引頁面 SEO 設定。
  • Enable canonical URL's：啟用規範網址，預設是停用。
  • Enable meta descriptions：啟用 meta 描述設定，預設是停用。
  • Choose title autogeneration method：選擇標題自動產生方法。
  • Define a character to separate BlogName and Post title：網站名稱與文章標題的分隔符號設定。

• Integration/Code Integration：程式碼整合功能。
  • Enable header code：啟用頁首程式碼功能，預設是啟用。
  • Enable body code：啟用網頁主題程式碼功能，預設是啟用。
  • Enable single top code：啟用單篇內容首段程式碼功能，預設是啟用。
  • Enable single bottom code：啟用單篇內容尾段程式碼功能，預設是啟用。
  • Add code to the < head > of your blog：在 <head> 之間加入程式碼。
  • Add code to the < body > (good for tracking codes such as google analytics)：在 <body> 之間加入程式碼，例如 google analytics。
  • Add code to the top of your posts：在文章首段加入程式碼。
  • Add code to the bottom of your posts, before the comments在文章內容後、留言前加入程式碼。

• Updates：升級設定。這裡是輸入啟用 Divi 使用授權帳號與 API KEYs 的地方，另外 Divi 也提供版本復原的設計 Version Rollback，如果遇到升級發生問題，可以回復到之前版本。

Divi Theme Builder 佈景編輯器

• Theme Builder 是 Divi 佈景主題中非常重要的一項設計，簡單來說就是可以建立整個網站內容的編輯器，透過設計我們可以建立單一或是任一文章、頁面、搜尋、分類彙整、頁首、頁尾…，可以說是非常方便的設計工具。

• Divi Theme Builder 編輯頁面，可以在右側看到五個功能選單圖示，接著簡單說明如下，首先第一個是 Add From Sets Library 從儲存庫新增。

• Add From Sets Library 從儲存庫新增點擊後，還來到 Theme Builder Set 儲存庫頁面，因為都沒有建立過，目前是空白。

• 第二個功能圖示選單是 Save Theme Builder Set 儲存佈景編輯組合。

• 點擊儲存圖示後，會來到 Save Theme Builder Set 建立視窗，可以依序填入組合名稱或是建立分類、標籤，也可以上傳到 Divi Cloud（有額外費用） 上儲存。

• 第三個圖示功能選單是 Reset All Template 重置所有範本，這裡建立的範本會套用到整個網站上，所以想要取消設計的話可以使用這個功能。

點擊 Reset All Template 重置所有範本圖示，會再一次出現重置的確認視窗，確定一定要重置的話可以執行確認按鈕。

• History 歷史記錄，這是非常好用的一項回溯工具，如果有操作錯誤或是想要恢復上一動，可以使用這個功能。

• 編輯修改的記錄會以綠色時間區塊展示，可以自行挑選恢復的時段設計。

• Portability 可轉移性，簡單來說就是透過這個功能，我麼可以將 Divi Theme Builder 設計內容匯出與匯入，在不同的網站間套用效果。

• 點擊 Portability 可轉移性圖示後，就會來到匯出 Export 或是匯入 Import 的提示視窗，可以依照設計目的進行操作。

• Theme Customizer 佈景主題自訂項目。

• Divi 佈景主題的自訂設計項目分成七大項，分別是 General Settings 一般設定項目、Header & Navigation 頁首與導覽選單、Footer 頁尾、Buttons 按鈕、Blog 部落格、Mobile Styles 行動裝置樣式、Color Schemes 配色方案。

• General Settings 一般設定項目中有四項設計，這裡是網站一開始特別需要設定的地方，分別說明如下。
  • Site Identity 網站圖示，透過上傳設計好的圖片來建立網站圖示。
  • Layout Settings 版面配置設定。
  • Typography 網站字型排版樣式設定。
  • Background 背景設定。

• Site Identity 網站圖示，這裡可以設定網站名稱、網站說明與網站圖示。

• Layout Settings 版面配置設定：這裡可以設定預設的版面寬度、Section Height、Row Height…等基本設定。

• Typography 網站字型排版樣式設定：可以指定網站的內文、標題的字型、顏色、大小，同時 Divi 也有提供 Google Fonts 字型可以選用，適合中文內容。

• Background 背景設定：背景顏色，這是全網站套用效果，通常會採用預設。

• Header & Navigation 頁首與導覽選單，主要設定項目有 Header Format 頁首格式、Primary Menu Bar 主要導覽選單、Secondary Menu Bar 次要導覽選單、Fixed Navigation Settings 固定選單設定、Header Elements 頁首元素設定。

• Footer 頁尾，這裡主要是設定 Layout 版面配置、Widgets 小工具、Footer Elements 頁尾元素、Footer Menu 頁尾選單、Bottom Bar 底部工具列。

• Button 按鈕，這裡統一設定按鈕與按鈕滑移時樣式。

• Blog 部落格，這裡設定文章基本樣式。

• Meta Text Size 字體大小、Meta Line Height 字體行高、Meta Letter Spacing 字體間隔、Meta Font Style 字體樣式、Header Text Size 標題字型大小、Header Line Height 標題字體行高、Header Letter Spacing 標題字體間隔、Header Font Style 標題字體樣式。

Mobile Style 行動裝置樣式設定，這裡可以設計 Tablet 平版，Phone 手機，Mobile Menu 手機選單。

• Color Schemes 配色方案，這裡是預建全站色彩配色，有五種配色可以選擇。

• Role Editor 角色編輯器，Divi 提供了一個管理者非常棒的角色權限編輯工具，可以讓不同權限的成員 Administrator 管理者、Editor 編輯者、Author 作者、Contributor 投稿者、只能使用部分設計，這個強大的工具有助於網站內容的管理，也可以避免多人設計的方案不致受到影響。

• Divi Library 儲存庫，在 Divi 編輯器中設計的 Section、Row 等等，都可以儲存成 Layouts 範本，這樣就可以在任一內容中重複使用或是全站套用，這個對於設計師來說，是非常棒的一項設計工具。

Support Center 服務中心，如果在使用 Divi 時發生問題或是錯誤，可以在這裡啟用除錯模式，或是將網站資訊複製起來，提供給 Divi 客服來依據除錯。

Divi Quick Site 免費網站範本

• Divi 佈景主題提供了一個非常強大的網站製作範本資料庫庫，可以讓我們很輕鬆的在短時間內建立一個專業又完整的網站。預建的網站頁面範本多達 370種，涵蓋 Art & Design, Business, Community & Non-Profit, Education, Events, Fashion & Beauty, Food & Drink, Health & Fitness, Lifestyle, Online Store, Services, Simple, Technology 十四大類，幾乎可以滿足所有網站建立的需求。
• 另外 New Starter Site 每月都會產出新的設計，這是更完正的全網站內容設計，除了預建好的頁面範本外，還包含各類內容建立，例如彙整頁面、索引頁面、搜尋頁面、404頁面、單篇文章…，可以說是夠完整的網站範本系列，非常好用。
• 最後，就是最近大家強推的 AI功能，在 Divi 也同樣擁有這項設計，可以透過提示字詞，讓 AI 幫忙建立網站需要的內容與頁面，可以說是設計上的一大改進。

接下來就來示範如何透過 Divi Builder 編輯器，快速建立一個完整又漂亮的網站，謝謝大家耐心閱讀。

• 想要直接套用預建好的範本方法很多，可以先登入 WordPress 控制台，接著請到 Divi 管理選單 Dashboard，可以看到中間右方有一個 Divi Quick Sites 快速建站，請點擊 Generate A New Site 建立新網站按鈕。

• 接著來到快速建站畫面，Divi 提供兩種快速建站模式（註一），Use Pre-Made Starter Site 使用預建好的建站範本與 Generate Your Site With AI 透過 AI 建立網站兩種模式。
• （註一）這裡所說的快速建站是指建立完整的網站內容，不單單只是頁面範本。

• 實測後覺得 AI （註二）建立的網站對於中文網站的支援比較不完善，需要修改的內容量大，所以接下來的內容會以使用 Starter Site 範本內容匯入的方式，跟大家介紹如何使用這完整又精美的網站範本。
• 選擇 Use Pre-Made Starter Site 後，會來到 Starter Site 頁面，有非常多的網站範本可以選擇，大家可以挑選自己喜歡的顏色、產業接近的項目，這樣範本內容與自己理想網站的樣式會更接近，修改上也更會更輕鬆。

• 滑鼠移到選擇的範本圖片上，會出現兩個功能按鈕，一個就是 Start With 開始建立按鈕，另外一個就是 Preview 預覽按鈕，可以點擊前往看到網站的實際展示效果，要建立全新網站請點擊 Start With 按鈕。

• 接下來的畫面是 Site Name 建立網站名稱 ❶，Site Slogan 網站副標題說明 ❷，Logo 網站圖示檔案 ❸，Page 頁面內容，這裡就是 Starter Site 網站範本這次會建立的主要內容 ❹，除了一般頁面範本外，還多了很多內容範本，如果想要自訂內容項目可以點擊 Add A Custom Page ❺，不想使用範本預建的字型與顏色組合可以點擊 Customize Fonts & Colors 按鈕 ❻，確認後請點擊 Generate & Publish My Website 建立並發佈網站按鈕 ❼。

• Starter Site 預建網站內容的字型通常是以英語系為主，這裡我們可以選擇中文字型來符合自己網站的需求。

（註二）選擇透過 AI 來產生網站的話，畫面會有些不同，多了提示字串輸入的區塊 ❸，同時也可以透過 AI 來建立圖片效果 ❻。

• 預建內容挑選完成後開始建立網站，會來到網站建立進度視窗，整個網站建立的過程很快，隨著進度轉變還有顏色變化效果。

• 網站內容建立完成以後，來到網站建立成功畫面，可以點擊 View My Site 按鈕 ❶檢視網站效果，同時也可以看到 Website Pages ❷網站建立了哪些頁面，Theme Templates ❸佈景主題建立了哪些範本。

• 回到網站前台，可以看到一個漂亮又完整的網站已經建立完成，不僅是有頁面內容，選單、小工具等等的內容一樣建立完成。

• 回到 Divi 選單，可以看到 Theme Builder 裡面，這次匯入的所有 Theme Builder 範本。

• 控制台/頁面選單，則可以看到這次範本內容建立的所有頁面。

• 修改範本內容的方法也很簡單，點擊上方選單列的 Enable Visual Builder 啟用所見即所得編輯器，就可以開始編輯了。

• 隨著滑鼠移動，可以看到區塊浮現設定與編輯圖示，點擊就可以開始編輯與設計。

• 在開始編輯設計前，Divi Visual Builder 編輯器下方有三個主要功能項目先跟大家說明一下。中間是主要功能設定 ❶，左側是 Divi 傳統編輯模式切換 ❷，右側是編輯畫面階層展示切換選單 ❸。

• 中間主要功能設定的第一個圖示 +，是 Insert Layout 插入版面配置，可以選擇 Divi 佈景預建好的範本，或是我們自己建立好的頁面範本，又或是透過 AI 來建立。

• 第二個功能圖示是 Save To Library 儲存到儲存庫，這是 Divi 可以快速重複使用很常用的一個便捷功能，可以將我們建立好的內容儲存到儲存庫，在需要使用時再快速匯入。儲存的目的地除了網站上，Divi 也提供雲端儲存服務，額外的儲存空間則需要額外付費。

• 第三個圖示功能是 Clear Lauout 清除版面配置樣式，這個點擊後就會清除所有設計，重新開始。

• 第四個圖示功能是 Page Settings 頁面基本設定。

第五個圖示功能是 Editing History 編輯歷史記錄，這是一個設計上時常使用的功能，可以讓我們回復到已經儲存的任一版本，方便回復設計錯誤時的補救措施。

• 第六個圖示功能是 Portability 可轉移性，簡單來說就是匯入與匯出設計的功能，這個可以讓設計師大大減輕設計工作上的負擔。

• 左側的功能選單中，最重要的一個就是 Divi 傳統編輯模式切換，在 Visual Builder 編輯器，有時候會有一些設計例如程式語法，是無法在 Visual Builder 編輯器中直接看到，所以常常會找不到設計的地方，這時透過 Divi 傳統編輯模式就可以快速找到設計的地方。

• 接下來就是設計師最愛的行動裝置編輯模式，可以快速切換桌機、平版、手機尺寸，來修改不同裝置的內容與設計，非常方便。

• 右側功能圖示，有一個非常重要的圖示功能，那就是 Layers 設計階層圖示，點擊後會看到所有設計的 Sections 區塊與 Row 設計項目，透過自己命名後，可以清楚看到個區塊內容設計項目，方便設計師快速找到設計項目編輯修改。

• 在 Visual Builder 編輯器中，可以直接編輯修改文字內容或是替換圖片、圖示。

• 想要修改樣式、顏色、間距、尺寸…等等細部設計，點擊區塊 Section 或是行列 Row 中的模組 Module（例如：Heading Module 標題模組），出現鉛筆編輯圖示，就可以開始進行細部編輯，非常方便實用，而且隨著編輯修改立即就可以看見效果。

Divi Pricing 價格說明

Divi 是 Elegant Themes 開發推出的付費佈景主題，一個費用可以使用 Divi、Extra 兩種佈景主題，加上 Divi Builder 頁面編輯器外掛程式，還有 Bloom eMail Opt-In 電子報訂閱外掛程式與 Monarch Social Media Sharing 社群分享外掛程式等五項，對網頁設計師來說，這是很划算的一項投資。

• 來到 Divi Pricing 價格頁面，基本上可以看到價格分為 Divi Pro ❶ 與 Divi ❷兩種方案，各有兩種付款方式，一種是年繳方案，一種是終身授權方案。
  • Divi Pro 方案比 Divi 方案多了 Divi AI 人工智慧建置系統。
  • Divi Cloud 沒有限制的雲端儲存系統。
  • Divi VIP 24/7 全年無休的優先客服系統與 Divi 市集 10％訂購優惠。
  • Divi Teams 可以建立擁有四個成員的團對組合。
  • Divi Marketplace USD 50的 Divi 市集折扣金額。
• 30天無條件退款都一樣適用，使用不喜歡都可以完全退費，可以說是非常有誠意的設計。

• 以年繳方案來說，Divi Pro 方案優惠價是 USD 277/年（原價 USD 665/年），Divi 方案價格是 USD 89/年。

• Divi Life 終身授權方案，以 Divi Pro 方案來看是 USD 297 ❶，Divi 方案是 USD 249 ❹ 一次費用。
  • Divi 方案沒有什麼其他需要注意事項，一次付費永久使用，而且不限網站數量，這對網頁設計師來說，是非常划算的一項投資。
  • Divi Pro 方案，Divi Cloud 、Divi VIP 24/7、Divi 市集 10％訂購優惠與 Divi Teams 這四項服務，除了第一年的 USD 297（含 USD 85 一次費用外 ❷），每年需要再支付 USD 212 ❸ 才可以繼續使用額外的四項服務。

如果你的網頁設計對象（客戶）外國居多，那麼可以參考 Divi Pro 方案，因為透過 AI 協助可以快速建立目標網站，如果網頁設計對象（客戶）中文居多，那麼可以參考 Divi 終身授權版，以目前市場上的付費佈景主題來說，一次付費終身授權又不限網站數量來說，Divi 可以說是非常划算的一項投資。