“自媒體活躍時代，讓更多人認識你或你的品牌、作品等，除了社群，另一個就是『 網站 』，用網站說故事或傳遞品牌資訊是重要的技能。

WordPress響應式網站，Divi Theme佈景主題整合了社群、行銷工具、無需寫程式的編輯器，讓網站設計更平民化。那要怎麼快速入門Divi Theme佈景主題？訣竅很簡單，掌握『 常用方法功能或原則 』。

進入Divi Theme佈景主題前，記得先完成網域與伺服器的設定呦！”

一. 購買安裝Divi Theme佈景主題

❮ 影片時間戳記-TIME STAMPS ❯ 00:02 購買Divi Theme佈景主題 / 00:56 WordPress安裝Divi Theme佈景主題 / 01:39 設定Divi Theme佈景主題金鑰

✍購買安裝Divi Theme佈景主題-圖文教學

Step1 進入Divi Theme 佈景主題官方網站，點選右上角PRICING。Divi Theme 佈景主題會員就是註冊成為付費會員，才能使用它們家商品。Divi Theme佈景主題包含Divi Builder編輯器，因此安裝後，不用再另外下載編輯器囉！

如還不確定成為會員，可以先用看看官方提供的Divi範本。

圖 / Divi Themes佈景主題-官方網站

Step2 下圖會出現兩個價格，左邊是一年一付、右邊是付一次費用，終身使用。那這兩個差別，除了價錢，另一個就是版本更新。如果預算充足會建議選一次付清終身版，因為就不用擔心版本未更新。版本更新與否會影響到功能使用。以及第三方外掛工具的相容性。

圖 / Divi Themes佈景主題-註冊付費會員

Step3 此範例是選一次付費終身版。填寫會員資訊以及付款資訊。

圖 / Divi Themes佈景主題-填寫註冊與付款資訊

Step4 點擊『 左邊 』紫色按鈕Download The Divi Theme，下載 Divi Theme 佈景主題。

貼心提醒：Divi Theme 佈景主題已經包含 Divi Builder編輯器。

圖 / Divi Themes佈景主題-下載佈景主題

Step5 下載完壓縮檔請勿解壓縮！登入wordpress後台。側邊選單『 外觀 』>『 佈景主題 』> 『 安裝佈景主題 』。

圖 / Divi Themes佈景主題-安裝佈景主題

Step6 再點擊『 上傳佈景主題 』> 選擇檔案 （ 記得選取壓縮檔 ）> 立即安裝。

圖 / Divi Themes佈景主題-選擇壓縮檔立即安裝

Step7 完成Divi Theme 佈景主題安裝囉！

圖 / Divi Themes佈景主題-完成安裝

Step8 至Divi Theme 佈景主題官網，ACCOUNT登入會員後 >上方選單選擇『 USERNAME & API KEY 使用者名稱與金鑰 』

圖 / Divi Themes佈景主題登入會員-選擇username&api

Step9 複製Your API Keys你的Divi佈景主題金鑰（一串英數字）

圖 / Divi Themes佈景主題-複製Your API Keys

Step10 回到wordpress，側邊選單，選擇Divi > Theme Options > Updates 填寫『 使用者名稱 』與貼上『 Your API Keys 金鑰（一串英數字）』> Save Changes儲存更新。(此設定是以利於後續Divi版本更新)

圖 / 填寫『 使用者名稱 』與貼上『 Your API Keys 金鑰（一串英數字）』> Save Changes儲存更新。

二. Divi Theme 佈景主題-管理介面功能介紹

掌握Divi Theme，就先熟悉重要常用的功能。

圖 / Divi Themes佈景主題-管理介面

① 側邊選單，主要是Divi Theme佈景主題6大項功能 :

② 為側邊選單，6大項功能的介面各功能管理設定。

✍ Divi Theme Options 主題設定

圖 / Divi Themes Options佈景主題管理介面說明

此區塊細分功能較多，會以『重要常用』的做介紹。Divi Theme Options介面主選單分為10項 :

📍切記任何的Divi Theme功能更改一定要『 Save Changes 儲存更改 』。

❖ Divi Theme Options -General 一般設定 ❯ General 基本

圖 / Divi Themes Options – General 一般設定

❮ LOGO 標誌圖像 ❯

點擊UPLOAD上傳圖片，可用本機照片或媒體庫上傳。RESET重新設置。對應到前台網頁選單列表上的圖示。我使用的logo尺寸是1000px X 400px ，jpg檔。尺寸可以依據您設計的logo做調整。

圖 / Divi Theme Options – Logo管理介面上傳

圖 / Divi Theme options – Logo前台畫面預覽

❮ Fixed Navigation Bar 固定選單列 ❯

建議ENABLED開啟，當網頁捲動時，前台網頁選單列會固定在上方。

圖 / Divi Theme options – Fixed Navigation Bar 固定選單管理介面設定

圖 / Divi Theme options – Fixed Navigation Bar 固定選單前台畫面預覽

❮ Enable Divi Gallery 圖片合輯 ❯

建議ENABLED開啟，這功能適合『文章』或『頁面』會出現多張圖片，像作品集網站、美食旅遊、產品形網站等，蠻實用的，此功能點擊後可放大圖片，左右兩側會有箭頭，並附註圖片名稱，也能在各裝置不影響圖片解析放大縮小。

圖 / Divi Theme options – Enable Divi Gallery 圖片合輯管理功能

使用Divi Builder編輯器時，會在『頁面』、『文章』出現，在New Module搜尋Gallery就是剛開啟的功能。下面三張圖為示意。

圖 / Divi Theme options – 編輯器Module模板搜尋Gallery

圖 / Divi Theme options – Divi Gallery 圖片合輯編輯器示意圖

圖 / Divi Theme options – Enable Divi Gallery-圖片放大圖示

❮ Color Pickers Default Palette 預設調色盤 ❯

預設提供8個顏色，可以改用自己常用的色碼（ex:#264e67），此功能是對應Divi Builder編輯器，設定好後，在頁面或文章時，使用Divi Builder 顏色就可看見自定義的顏色囉！

圖 / Divi Theme options – Color Pickers Default Palette 預設調色盤

圖 / Divi Theme options – Color Pickers Default Palette 預設調色盤，編輯器顯示圖示意

❮ Grab the first post image 抓取文章第一個圖片 ❯

此功能ENABLED開啟，系統將會抓取文章第一個圖片，對應到網站在文章列表時，做封面圖。在分享文章時，則是縮圖方式呈現。

圖 / Divi Theme options – Grab the first post image 抓取文章第一個圖片

圖 / Divi Theme options – Grab the first post image 抓取文章第一張圖片，網站前台文章列表示意圖

❮ Blog Style Mode 部落格風格版型 ❯

此功能依據個人網站版型規劃，看是否要開啟，如果是單獨部落格就可以ENABLED開啟，不開啟則是DISABLED，傳統部落格有側邊欄位。

圖 / Divi Theme options – Blog Style Mode 部落格風格版型管理設定

圖 / Divi Theme options – Blog Style Mode 部落格風格版型網站預覽示意

❮ Sidebar Layout 側邊欄版型 ❯

側邊欄版型可選擇要在左側或右側，適合放廣告、最新文章、自我介紹、電子報訂閱、標籤雲等。

圖 / Divi Theme options -Sidebar Layout 側邊欄版型管理設定

圖 / Divi Theme options -Sidebar Layout 側邊欄版型網站前台預覽示意

❮ Shop Page & Category Page Layout for WooCommerce 購物網站的商店頁與標籤頁佈局設計 ❯

此屬於Wordpress購物網站WooCommerce的功能，提供的選項有Right Sidebar右側欄位、Left Sidebar左側欄位、Fullwidth全寬。

圖 / Divi Theme options -Shop Page & Category Page Layout for WooCommerce 購物網站的商店頁與標籤頁佈局設計管理

❮ Google API Key 谷歌地圖API金鑰 ❯

網站上出現地圖，是蠻常見，因此建議申請Google地圖。Divi編輯器功能是可以使用Google 地圖。

圖 / Divi Theme options -Google API Key 谷歌地圖API金鑰管理功能

圖 / Divi Theme options -Google API Key 谷歌地圖API金鑰管理 編輯器預覽示意

❮ Use Google Fonts 使用谷歌字體 ❯

此功能可開啟ENABLED，對應到Divi Builder 網站編輯器的Text文字功能，可使用Google所開放的線上字體。

圖 / Divi Theme options -Use Google Fonts 使用谷歌字體管理功能

圖 / Divi Theme options -Use Google Fonts 編輯器使用谷歌字體預覽示意

❮ Google Fonts Subsets 其他谷歌字體 ❯

除了英語體系的字體，開啟ENABLED也能使用其他國家語系的字體。

圖 / Divi Theme options -Google Fonts Subsets 其他谷歌字體管理設定

❮ Enqueue Google Maps Script 佇列Google 地圖程式 ❯

這功能請保持開啟ENABLED，牽涉到Google地圖程式端，Divi已經預設開啟程式。如關閉則變成要自己手動去處理程式。

圖 / Divi Theme options – Enqueue Google Maps Script 佇列Google 地圖程式管理設定

❮ Show Social Media 展示社群媒體 ❯

Divi Theme 佈景主題提供，使用率較高的社群Facebook臉書、Twitter推特、Instagram、RSS。可開啟ENABLED自己擁有的社群。

圖 / Divi Theme options – Show Social Media 展示社群媒體管理設定

圖 / Divi Theme options – Show Social Media 展示社群媒體 網站前台預覽示意

❮ Social Media Profile URL 社群媒體連結 ❯

這邊可直接貼上自己有在經營的社群媒體連結。

圖 / Divi Theme options – Social Media Profile URL 社群媒體連結管理設定

❮ Number of Posts 文章數 ❯

此區可自訂文章列表要呈現的則數。

① Number of Posts displayed on Category page 分類頁展示的文章數

② Number of Posts displayed on Archive pages 檔案頁展示的文章數

③ Number of Posts displayed on Search pages 搜尋頁展示的文章數

④ Number of Posts displayed on Tag pages 標籤頁展示的文章數

圖 / Divi Theme options – Number of Posts 文章數

❮ Date format 日期格式 ❯

日期顯示於文章或頁面，格式為月 . 日 .年。

圖 / Divi Theme options – Date format 日期格式 管理設定

圖 / Divi Theme options – Date format 日期格式 網站前台預覽設定

❮ Use excerpts when defined 預設使用摘要 ❯

如開啟ENABLED可用在文章或頁面列表時，系統自動抓取內容的摘要。

圖 / Divi Theme options -Use excerpts when defined 預設使用摘要

圖 / Divi Theme options – Use excerpts when defined 使用摘要 編輯器示意圖

❮ Back To Top Button 返回內容頂端按鈕 ❯

返回按鈕顯示在右下角。這功能用途是指文章或頁面內容較為豐富，當使用者閱讀到文章中後段時，一鍵返回按鈕即可回到文章開頭，而不用浪費時間滑回內容頂端。

圖 / Divi Theme options – Back To Top Button 返回內容頂端按鈕 管理設定

圖 / Divi Theme options – Back To Top Button 返回內容頂端按鈕 網站前台預覽示意

❮ Smooth Scrolling 順暢頁面滾動 ❯

此功能開啟ENABLED，可讓使用者體驗更好，為使用者在使用滑鼠滾輪時有平滑滾動效果。

圖 / Divi Theme options – Smooth Scrolling 順暢頁面滾動 管理設定

❮ Disable Translations 禁用翻譯 ❯

此功能預設是關閉，如果是使用多國語言網站，請關閉此功能。如未使用多國語言網站，可開啟ENABLED此功能，系統會翻譯主題字串。

圖 / Divi Theme options – Disable Translations 禁用翻譯 管理設定

❮ Enable Responsive Images 響應式圖片 ❯

此功能推薦開啟ENABLED，圖片是會對網站有所影響的，開啟後圖片會隨著各裝置改變尺寸並保有完整圖片的解析度。

圖 / Divi Theme options – Enable Responsive Images 響應式圖片 管理設定

❮ Custom CSS 自訂CSS ❯

這個欄位是可以填入自訂的CSS，想要改變主題功能樣式，都可使用網頁語法CSS做更改。

圖 / Divi Theme options – Custom CSS 自訂CSS 管理設定

📍切記任何的Divi Theme功能更改一定要『 Save Changes 儲存更改 』。

❖ Divi Theme Options -General 一般設定 ❯ Performance 功能執行

這邊主要設定動態網頁程式CSS . JavaScript . JQuery ，保持預設即可。

圖 / Divi Theme options – General 一般設定 ❯ Performance 功能執行管理介面

❖ Divi Theme Options -Navigation導航/選單 ❯ Pages 頁面

圖 / Divi Theme options – Navigation導航/選單 ❯ Pages 頁面 管理設定

圖 / Divi Theme options – Navigation導航/選單 ❯ Pages 頁面 個別說明

① Exclude pages from the navigation bar 從導航列排除頁面：此欄位會顯示頁面 ，改為叉叉將不會顯示於導航列。

② Show dropdown menus 顯示下拉選單：開啟ENABLED ，頁面除了主選單（第一層）也可顯示子選單（第二層）。

③ Display Home link 展示首頁連結：此功能預設是關閉，如果本身在頁面列表裡有設立其中一個頁面為首頁，不建議開啟，會導致搜尋引擎重覆搜索。

④ Sort Pages Links區分頁面連結：此欄位保持預設，使用『文章標題』區分頁面導航列 / 選單連結。

⑤ Order Pages Links by Ascending/Descending 頁面連結排序升序降序 ：可保持預設Asc升序。

⑥ Number of dropdown tiers shown 頁面下拉選單層級數量：預設是3。

圖 / Divi Theme options – Navigation導航/選單 ❯ Pages 頁面列表示意

❖ Divi Theme Options -Navigation導航/選單 ❯ Categories 分類

圖 / Divi Theme options – Navigation導航/選單 ❯ Categories 分類 管理介面

導航列的分類與頁面欄位設定部分雷同，因此分類欄位一次說明。

圖 / Divi Theme options – Navigation導航/選單 ❯ Categories 分類 個別說明

① Exclude categories from the navigation bar 從導航列排除分類：此欄位會顯示文章>分類 ，改為叉叉將不會顯示於導航列。

② Show dropdown menus 顯示於下拉選單：如果網站分類較多，此功能可開啟。

③ Hide empty categories 隱藏空分類：可開啟ENABLED，空分類意思是沒有任何文章。

④ 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升序。

圖 / Divi Theme options – Navigation導航/選單 ❯ Categories 分類列表示意

❖ Divi Theme Options -Navigation導航/選單 ❯ General Settings 一般設定

圖 / Divi Theme options – Navigation導航/選單 ❯ General Settings 一般設定 管理介面

❮ Disable top tier dropdown menu links 禁用第一層選單連結 ❯

此意思是當第一層選單擁有子選單，點擊第一層選單，不會跳到第一層選單頁面。

圖 / Divi Theme options – Navigation導航/選單 ❯ Disable top tier dropdown menu links 禁用第一層選單連結 管理設定

❖ Divi Theme Options -Builder編輯器 ❯ Post Type Integration 文章種類集合

圖 / Builder編輯器 ❯ Post Type Integration 文章種類集合 管理設定

❮ Enable Divi Builder On Post Types 各文章種類開啟 Divi Builder 編輯器 ❯

文章 / 頁面 / Projects專案，可開啟ENABLED 顯示Divi Builder 編輯器。如下圖示意

圖 / Enable Divi Builder On Post Types 各文章種類開啟 Divi Builder 編輯器

❖ Divi Theme Options - Builder編輯器 ❯ Advanced進階

此區塊欄位保持預設。

圖 / Builder編輯器的Advanced進階管理設定

❖ Divi Theme Options - Layout佈局設計 ❯ Single Post Layout 單一文章佈局設計

圖 / 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 文章縮圖：此指精選圖片，預設情況下當使用Divi Builder編輯器撰寫文章開頭時，會自動帶入精選圖片。

圖 / Single Post Layout 單一文章佈局設計-上圖文章列表示意

❖ Divi Theme Options - Layout佈局設計 ❯ Single Page Layout 單一頁面佈局設計

圖 / Layout佈局設計 ❯ Single Page Layout 單一頁面佈局設計

① Place Thumbs on Pages 頁面縮圖：頁面有設置精選圖片，可開啟此功能。

② Show comments on pages 顯示留言在頁面區塊：依據個人網頁規劃，看是否要開啟此功能。

圖 / Single Page Layout 單一頁面佈局設計-上圖頁面列表示意

❖ Divi Theme Options - Layout佈局設計 ❯ General Setting 基本設定

圖 / Divi Theme Options - Layout佈局設計 ❯ General Setting 基本設定

① Post info section 文章資訊：顯示於文章標題下方，Author作者 / Date 日期 / Categories分類 / Comments留言。

② Show Thumbs on Index pages 索引頁顯示縮圖：依據個人網頁規劃，看是否要開啟此功能。

❖ Divi Theme Options -  Ads廣告 ❯ Manage Un-widgetized Advertisements 管理非窗口化廣告

圖 / Divi Theme Options - Ads廣告 ❯ Manage Un-widgetized Advertisements 管理非窗口化廣告設定

① Enable Single Post 468×60 banner 開啟單一文章468×60像素橫幅廣告：如開啟後，廣告會顯示於文章底部。

② Input 468×60 advertisement banner image 置入468×60像素橫幅廣告圖片：如要使用，請先把圖片上傳至wordpress媒體庫，再複製圖片檔案連結至欄位。

③ Input 468×60 advertisement destination url 置入廣告連結：當點擊廣告時，會轉跳至設定的網頁或文章。

④ Input 468×60 adsense code 廣告程式碼：此欄位適用於Google Ads。

❖ Divi Theme Options - SEO搜尋引擎最佳化 ❯ Homepage seo 首頁

圖 / Divi Theme Options - SEO搜尋引擎最佳化 ❯ Homepage seo 首頁

① Enable custom title 開啟首頁標題

② Enable meta description 開啟首頁敘述

③ Enable meta keywords 開啟首頁關鍵字

④ Enable canonical URL’s 開啟首頁標準網址 ：用來解決重覆性內容，比如有些網站會有www.abc.com或abc.com 但都是相同內容，這時就可以開啟canonical URL’s。如MS.E網站的網頁原始碼，會顯示這段程式碼 ，意指相關seo優先歸屬到這個網頁。

⑤ Homepage custom title (if enabled) 自訂首頁標題 ：建議大概50～60字元。

⑥ Homepage meta description (if enabled) 自訂首頁敘述：建議160字元。

⑦ Homepage meta keywords (if enabled) 自訂首頁關鍵字

⑧ If custom titles are disabled, choose autogeneration method 如果自定義標題被禁用，請選擇自動生成方法：Divi提供三種呈現方式，部落格名稱 ｜ 部落格敘述、部落格敘述｜部落格名稱、部落格名稱。

⑨ Define a character to separate BlogName and Post title 定義一個字符來分隔 BlogName 和 Post 標題 ：比如- |>這種字符類型。

圖 / Divi Theme Options - SEO搜尋引擎最佳化 ❯ Homepage seo 首頁 – 搜尋結果示意圖

❖ Divi Theme Options - SEO搜尋引擎最佳化 ❯ single post page seo 單一文章 / 頁面搜尋引擎最佳化

此區塊是針對文章/頁面做設定，①~⑨功能與Homepage SEO 英翻中大致相同，各項功能保持預設即可。

圖 / Divi Theme Options - SEO搜尋引擎最佳化 ❯ single post page seo 單一文章 / 頁面搜尋引擎最佳化設定

❖ Divi Theme Options - SEO搜尋引擎最佳化 ❯ Index Page SEO 索引頁搜尋引擎最佳化

此區塊保持預設即可。

圖 / Divi Theme Options - SEO搜尋引擎最佳化 ❯ Index Page SEO 索引頁搜尋引擎最佳化

① Enable canonical URL’s 開啟標準網址

② Enable meta descriptions 開啟敘述

③ Choose title autogeneration method 選擇標題自動生成方法：下拉選單提供Category name分類名稱 | BlogName部落格名稱 、BlogName部落格名稱 | Category name分類名稱、Category name only 只有分類名稱。

④ Enable canonical URL’s 開啟首頁標準網址

❖ Divi Theme Options - Integration 合併一體化 ❯ Code Integration程式一體化

圖 / Divi Theme Options - Integration 合併一體化 ❯ Code Integration程式一體化

此區塊建議都開啟ENABLED，可以置入行銷工具如GA、GSC、GTM等或其他第三方外掛程式。

圖 / Divi Theme Options - Integration 合併一體化 ❯ Enable Code開啟程式

① Enable header code 開啟表頭程式

② Enable body code 開啟內容程式

③ Enable single top code 開啟單一頂端程式

④ Enable single bottom code 開啟單一底部程式

圖 / Divi Theme Options - Integration 合併一體化 ❯ Add Code增加程式

⑤ Add code to the < head > of your blog 你的部落格表頭加入程式

⑥ Add code to the < body > 程式加入內容區塊

圖 / Divi Theme Options - Integration 合併一體化 ❯ Add Code to the top or bottom 增加程式至文章頂部或底部

⑦ Add code to the top of your posts 全站文章頂端加入程式

⑧ Add code to the bottom of your posts, before the comments 全站文章底部加入程式，在留言區前面

❖ Divi Theme Options - Update更新

付費會員專用，此區塊要連結Divi ，以利於後續版本更新。操作教學在本篇前段文章購買安裝Divi Theme佈景主題裡可參考。

圖 / Divi Theme Options - Update更新

① Username 使用者名稱

② API Key 金鑰

③ Version Rollback 重回版本：如果遇到新版本更新問題，可重回上版本。不過Divi官方是建議採用最新版本。

✍ Divi Theme Builder主題編輯器

圖 / Divi Theme Builder 佈景主題編輯器

不管是點擊Add加Global Header / Body / Footer 選項均會顯示客製化Build或從Divi Library版型佈局庫匯入的方式，依據個人想要的功能選擇。右邊眼睛，則是顯示與不顯示的功能。

圖 / Divi Theme Builder Global 佈景主題編輯器建立全站版型

❖ Divi Theme Builder-Add New Template 新增全新模版

點擊＋，會出現『 頁面 』、『 文章 』、『 Archive Pages 檔案頁』、『 Projects 專案』、『Other 其他』，可選擇您要編輯的。

圖 / Add New Template 增加新版型

註：Archive Pages檔案頁意思是包含Author page作者頁面、Date page 日期頁面、Project page 專案頁 、Tag page 標籤頁面 、Category page分類頁面。

那Worpdress管理介面的選單，『頁面』與『文章』列表裡面，個別其實也可以選擇Divi Builder 編輯器，不過就是單一頁面或單一文章編輯。

圖 / WordPress文章列表Divi編輯器

圖 / WordPress頁面列表Divi編輯器

✍ Divi Theme Customizer主題自訂項目

此區塊多項功能可在Divi Builder編輯器樣式直接調整。以下說明是針對較常會被提問的功能 『 General Settings 』、『 Header & Navigation 』、『 首頁設定』做介紹。

※切記每修改一個功能，一定要按『 發佈 』。

圖 / Divi Theme Customizer佈景主題自訂項目

❖ Divi Theme Customizer-General Settings 一般設定

此區塊最重要的是 Site Identity 網站識別。下方有獨立說明。

Layout Settings 佈局設定、Typography 字型規劃、Background 背景，這三項功能請直接使用Divi Builder編輯器調整。

圖 / Divi Theme Customizer-General Settings 一般設定

❮ Site Identity 網站識別 ❯

網站標題與網站說明可以直接使用Meta Title 與 Meta Description。

網站圖示就是指網站頁籤的小圖示，通常使用正方形，尺寸為512px x 512px。

圖 / General Settings 一般設定-Site Identity 網站識別

❖ Divi Theme Customizer-Header & Navigation 頁頭與選單

圖 / Divi Theme Customizer-Header & Navigation 頁頭與選單

① Header Format頁頭格式

圖 / Divi Theme Customizer-Header Format頁頭格式

A. HEADER STYLE 頁頭樣式，選項提供如下：

1. Default 預設：如上方右圖呈現。

2. Centered 中間：logo與選單會置中，logo在上，選單在下。

3. Centered Inline logo並排：logo與選單會在行內並排。

4. Slide In 滑入：選單會呈現一個三條線icon，點擊後，選單會有左右滑入的動態效果。

5. FullScreen全螢幕：選單會呈現一個三條線icon，選單會淡入淡出全螢幕效果。

B. ENABLE VERTICAL NAVIGATION 開啟垂直式頁頭 :

如下圖，可選擇 右邊Right / 左邊 Left。

圖 / Divi Theme Customizer-ENABLE VERTICAL NAVIGATION 開啟垂直式頁頭

C. HIDE NAVIGATION UNTIL SCROLL 隱藏頁頭直到網頁滾動後出現。

② Primary Menu Bar 主選單

圖 / Divi Theme Customizer-Primary Menu Bar 自訂主選單

圖 / Divi Theme Customizer-Primary Menu Bar 自訂主選單

③ Secondary Menu Bar 子選單 ：功能同 Primary Menu Bar 主選單。

④ Fixed Navigation Settings 固定選單設定

圖 / Divi Theme Customizer-Fixed Navigation Settings 固定選單設定

⑤ Header Elements 頁頭元件

圖 / Divi Theme Customizer-Header Elements 頁頭元件

❖ 首頁設定

這邊重要的點是如果你的首頁已經不是用佈景主題預設的首頁，而改用頁面編輯器客製化首頁，記得在網站首頁顯示內容選『 靜態頁面 』。

『 靜態首頁 』那欄位，記得選你設計好的頁面 （+新增頁面）> 點擊發佈。首頁才會成功換上你的客製化首頁喔！

圖 / Divi Theme Customizer-自訂首頁

✍ Role Editor 角色權限編輯

適用於 wordpress 內容管理系統需要其他人協同時，分為4大項 Administrator 管理層、Editor 編輯、Author 作者、Contributor協同者。

4大項底下有7區塊各功能。7區塊分為 Builder Interface編輯器介面、Library Settings 設計佈局集設定、Settings Tabs 設定頁籤、Settings Types設定樣式、Module Use 模塊使用、Support Center 支援中心。

圖 / Divi Theme Role Editor角色權限設定

✍ Divi Library 版型庫

此區塊是集結個人客製化頁面版型佈局設計，當建構新頁面或文章時，會出現Divi Library，即可匯入常用版型模塊。

圖 / Divi Library 版型圖庫

✍ Support Center 支援中心

這點我個人覺得Divi佈景主題服務蠻周到的！成為付費會員後，除了線上客服對話，如遇到技術問題，也能請求Divi技術團隊遠端協助。

圖 / Divi-Support Center 支援中心

熟悉完Divi Theme 佈景主題管理功能後，再來做網站者最關心的事，佈景主題能不能整合行銷工具？比如Google Analytics、Google Search Console、Google地圖、FB像素等，答案是可以的！MS.E也會把這部分特別做一篇教學文章，另外Divi編輯器也會出教學文敬請期待！

三. Divi Theme佈景主題-QA