犬哥網站

希望這篇文章對你有幫助!

如果希望我協助「 網站建置、講座教學等 .. 」,歡迎 聯絡我
Divi Themes 中文教學:掌握 Divi Theme+Divi Builder 就靠這篇(全指南)

Divi Themes 中文教學:WordPress 掌握 Divi Builder 就靠這篇(全指南)

這是一篇完整的「 Divi中文教學 」,會帶你上手這款強大 Divi 生態圈。

還在考慮要使用哪種主題嗎?沒找到樣式漂亮的網站模板?還是目前的主題功能性太弱,打算換強一點的?

Divi 能幫你架設各種類型的網站,像是建立 Blog、品牌官網、購物網站建置等 ..,用這款主題就能一次搞定:)

★☆ — 重要資訊 — ☆★

犬哥網站與 Divi 有長期合作關係,點擊此連結 Divi 20% 折扣,將可享用任一方案 20% 的折扣優惠,請一定要把握唷:)

Divi 核心的功能,我都會在文章一次分享給你,好囉!準備好了嗎~我們開始吧^^


1. Divi 是什麼?

WordPress頁面編輯器 :Divi 佈景主題和頁面編輯器
Divi 佈景主題和頁面編輯器

Divi 是由知名 Elegant Themes 公司開發,是許多網頁設計師喜愛的一款軟體,除了功能強大且有很多高質感的元素(和現成模板)。更多完整 Divi 中文教學

不需要任何程式概念,用拖曳方式就能設計漂亮的網站,就像官網所描述的,視覺化設計和佈局排版都將變得更加容易。

使用 Divi 主題,完整架站教學(全攻略分享)

Elegant Themes 旗下產品,有全功能 Divi Theme 佈景主題、Divi Builder 頁面編輯器、Extra 主題(可用在部落格 / 新聞雜誌 / 作品集 ..)、Bloom 電子報註冊行銷工具、Monarch 社群工具等 ..。

所以使用 Divi 軟體,不會只有一種軟體可用,而是能享受它們公司的所有服務,非常的划算。

加上多種區塊模板和完整的網站樣板,有商業風、線上開店平台、科技風、服務類型等 .. 多種主題風格。

你只需幾點擊按鈕,即可引用區塊樣板,或套用整個網站設計。

WordPress頁面編輯器 :Divi 多種佈景主題樣板
Divi 多種佈景主題樣板

Divi 對 Woocommerce 開店平台外掛有完美的支持,並提供多種線上開店的區塊功能,一樣用拖放方式即可放入頁面。

WordPress頁面編輯器 :WooBuilder 購物網站編輯器
WooBuilder 購物網站編輯器

使用 Divi 會是個很棒的選擇,因為它能幫你做到很多事。

方案評論

Divi 的使用方案很簡單,它提供「 年租用方案 」和「 終身方案(一次性)」,這兩種價格方案

兩種方案都能應用在無限數量的網站,費用也維持在合理範圍。

有個好處是,Divi 整體系列包含自開發的多功能 WordPress 佈景主題,且和旗下產品有完美兼容,這代表你可能不需再額外購買 WordPress 主題。

特別一提,終身使用方案在 WordPress 頁面編輯器市場中,是比較棒的收費方式

這代表你只需負擔一次性的小額費用(和外包網頁設計相比),就能終身享用所有 Divi 功能。

產品定價

Divi 的年租用方案,原定價是 $89 美元 / 年(約 $2,700 台幣 / 年),可應用在無限數量的網站。

Divi 的終身方案,原定價是 $249 美元(約 $7,500 台幣 / 終身),一次性費用即可終身使用,可應用在無限制數量的網站。

但有個好消息要告訴大家,請看下面享有全方案的折扣優惠!

★☆ — 重要資訊 — ☆★

犬哥網站與 Divi 有長期合作關係,點擊此連結 Divi 20% 折扣,將可享用任一方案 20% 的折扣優惠,請一定要把握唷:)

終身方案是一次性費用,購買之後隔年不會有額外費用,你可享有 Divi 軟體終身更新+優先的客戶服務(建議優先選擇,比較划算)。


2. 如何購買+安裝 Divi(含憑證激活)?

這章節,會跟大家分享如何購買+安裝 Divi,還有軟體憑證激活。

購買 Divi 軟體

首先,點擊 Divi 20% 折扣 連結前往,會看到兩個方案,分別是年租用&終身方案。

備註:下圖範例的 Divi 費用,是沒有使用優惠連結購買的原價格。

所以請務必使用 Divi 20% 折扣 購買,才能使用優惠價入手唷:)

這裡會比較建議購買終身方案,因為費用跟年租制方案差不多,再來是不用每年都付費(一次性買斷)。

下面我會用終身方案進行示範,點擊按鈕前往。

Divi中文教學 :方案費用介紹
Divi中文教學 :方案費用介紹

參考下圖建立 Divi 帳戶(自己的帳號密碼要記得唷)& 輸入付款資訊,完成後送出。如果英文姓名不清楚的話,可用 外交部工具 翻譯。

Divi中文教學 :建立帳戶&進行付款
Divi中文教學 :建立帳戶&進行付款

如此一來就購買成功啦,接著 Divi 應該會寄一些相關的購買收據等 .. 到你的信箱裡,也可以收一下。

下載 Divi 軟體+WordPress 主題安裝

看網站有無幫你導向到會員專區,如果沒有的話可點右上的 My Downloads(需是會員登錄狀態,才會看到),找到 Divi Theme 主題並下載。

Divi中文教學 :安裝 Divi Theme 主題
Divi中文教學 :安裝 Divi Theme 主題

備註:Divi Theme 裡面已經有預安裝 Divi Builder Plugin 了,所以不用再額外安裝。

前往 WordPress 後台,將佈景主題上傳到 WordPress,並進行安裝+啟用。如果不會安裝,可參考主題安裝

Divi中文教學 :安裝 Divi 佈景主題
Divi中文教學 :安裝 Divi 佈景主題

這樣 Divi Theme 就安裝成功啦!我們前往 WordPress 前台看一下成果,一個簡單版的 Divi 網站,已經正式上線溜。

接下來 ..,好戲才正要開始!

Divi中文教學 :WordPress 網站前台頁面
Divi中文教學 :WordPress 網站前台頁面

Divi 軟體憑證激活

前往 Divi 官網 並登入,點選 Account > Username & API Key 前往憑證專區。

Divi教學 :前往使用者&API Key
前往使用者&API Key

會看到 Username(使用者帳號)和 API Keys(使用憑證),這兩個分別複製起來,等等會用到。

Divi教學 :找到使用者帳號 & API Key
找到使用者帳號 & API Key

備註:如果沒有出現 API Keys 可自行新增(也可設定標籤,方便找尋)。還有 Divi 可在多個網站上使用,每個網站需對應一組憑證,假設之後網站用不到 Divi,可在這把對應的憑證註銷掉,就不會佔用空間。

前往 WordPress 網站,找到 Divi > Theme Options > Updates,輸入剛複製的使用者帳戶 & API 憑證,完後後儲存。

Divi教學 :激活 Divi 軟體憑證
激活 Divi 軟體憑證

之後這個網站的 Divi 軟體,就跟 Divi 官方系統綁定了,也代表正式激活軟體使用權限啦!


3. 如何套用 Divi Builder 頁面模板?

這章節,來示範如何用 Divi Builder 套用現成頁面模板。

前往 WordPress 頁面 > 新增頁面,幫頁面取個名字,使用 Use Divi Builder 新增頁面。

Divi教學 :使用 Divi Builder 新增頁面
Divi教學 :使用 Divi Builder 新增頁面

Divi 有簡單區分 3 種建立頁面的方法,這裡先示範用系統模板。

Divi教學 :頁面建立方式選擇
Divi教學 :頁面建立方式選擇

因為 Divi 的模板非常多,可以借助分類條件,方便選取自己愛的。

這裡我用 Agency 模板教學,你也可先跟我裝一樣的,之後學成了再來更換模板。

Divi教學 :選擇喜歡的模板
Divi教學 :選擇喜歡的模板

進入後可點擊瀏覽各頁面,找到你想套用的頁面,點 Use This Layout 進行安裝。

這裡我用 Landing Page 示範。

Divi中文教學 :預覽&套用 Divi 模板
預覽&套用 Divi 模板

接著,會出現需要輸入 Divi 使用憑證的視窗(如果沒有的話,就直接略過),至於憑證在哪裡,流程跟上面章節的激活憑證一樣,這就不多做說明。

把剛相關 Divi 憑證貼入到欄位中,點擊送出。

Divi教學 :輸入使用憑證
Divi教學 :輸入使用憑證

太棒囉,這樣現成 Divi 模板就套用成功了,最後記得點 Save Draft 儲存草稿(或是 Publish 發布),才會保存剛套用的模板唷。

Divi教學 :Divi 頁面佈局套用成功
Divi教學 :Divi 頁面佈局套用成功

如果想要在 WordPress 網站,看到剛新增完成的頁面,就點選 Publish 發布。

然後把此頁面 添加到網站選單 中,就會順利看到囉。


4. Divi Builder 功能介紹

Divi Builder 是 Divi 生態圈重要的一環,自然有許多功能可以學習,這邊會帶大家深入淺出。

首先,要掌握 Divi Builder 並設計出合乎邏輯的頁面,需了解 Divi 的佈局規則。

頁面佈局概念

點擊一下左下角的佈局切換 Icon(下圖),這是相對於「 視覺化編輯 」的另一種「 結構化編輯 」模式,有時候掌握不清楚當前頁面的佈局,就能用此方法瀏覽全貌。

Divi中文教學 :Divi 頁面佈局了解
Divi 頁面佈局了解

Divi 的佈局呈現,主要由 Section(區塊)、Row(行)、Module(模塊)這 3 者所組成,由大到小層層包裹。

簡單來說,如果想新增一個客製化區塊,你可能會需先新增一個 Section,然後再新增 Row,最後新增 Module。

一個 Section 可包含多個 Row,每個 Row 能呈現不同的排版+包含多個不同的 Module,這樣就能客製化網頁佈局囉!

新增佈局&新增模塊

了解完 Divi 的佈局概念,接著切換回「 視覺化編輯 」,我將示範如何新增一個客製化區塊。

首先,把滑鼠移到視覺編輯畫面上,在某些可新增區塊的地方,會出現加號可添加。

Divi 提供 3 個 Section 設計方法,有 Regular 常規、Specialty 特殊、Fullwidth 全寬,不同方法會有不同的佈局可選,有空可自行玩看看。

這裡我示範用 Regular。

Divi中文教學 :新增 Section 區塊
Divi中文教學 :新增 Section 區塊

會看到有超多種 Row 佈局可選,挑選適合你的使用,這裡我先用 2 欄式的。

Divi教學 :新增 Row 佈局
新增 Row 佈局

會看到區塊分成左右兩欄了,在其中一欄新增想要的 Module 模塊,會看到可用的模塊真的非常多。這裡我新增一個 Blog(列表)。

Divi教學 :新增 Module 模塊
新增 Module 模塊

會看到文章內容出現啦,這裡可自行設定顯示數量、指定顯示哪個分類文章、摘要文字、模塊樣式等 ..。

還有步驟還原(也可按快捷鍵,像是 Ctrl+Z / Command+Z 還原之類的),沒問題後記得儲存。

Divi中文教學 :設定 Module 面板介紹
Divi中文教學 :設定 Module 面板介紹

簡單頗析一下 Module 面板(上圖),主要分為 Content、Design、Advanced 這三個。

  • Content 模塊內容:會依據不同的 Module 模塊,出現可設定的項目。
  • Design 模塊設計:大部分樣式設計,都可在這裡更改。
  • Advanced 進階設定:有像是自訂 CSS、是否顯示在不同裝置隱藏、過渡效果、視差滾動等 ..。

接著,我在另一邊新增 Image 圖片模塊,也帶到一些功能設定介紹。

Divi教學 :Divi Builder 更多設定介紹
Divi Builder 更多設定介紹
  • Save to Library 自訂模組:可自己客製化模組並重複使用,也能儲存成 Global 全站模組。
  • Disable 禁用:可針對不同裝置,設定模組的顯示或隱藏。
  • Copy Module Styles 複製模組樣式:複製樣式,可貼在其他同模塊上面,就不用重新設定。
  • Reset Module Styles 重置模組樣式:把設定的樣式,重設為預設值。

修改套用的模板

接下來可編輯模板的其他區塊,對著想要編輯的區塊,點擊齒輪 Icon(設定模式),就會出現對應的設定項目啦。

你也可自行新增 Section(區塊)、Row(行)、Module(模塊)客製化網站,或是刪除不要的區塊。

Divi中文教學 :編輯網站頁面
Divi中文教學 :編輯網站頁面

Divi Builder 面板了解

Divi Builder 本身功能還很多,我們能看到底端的小工具,這裡調整的偏向「 全頁面 」的部分。

左下角有不同裝置 Icon,也能針對不同裝置做網頁設計。

Divi中文教學 :Divi Builder 面板功能
Divi中文教學 :Divi Builder 面板功能

經過這章節的 Divi Builder 介紹,大家掌握度有更高了嗎:)


5. 儲存重複區塊 & Divi Library 面板

Divi Builder 有「 儲存重複區塊 」的功能,如果有某個區塊未來可能會重複用到,可把它儲存起來,之後就能直接呼叫出來,就不用每次都需重新設計了。

對應上一章節提到的,Divi Builder 主要由 Section(區塊)、Row(行)、Module(模塊)這 3 者所組成,也代表能個別對這 3 種類型,分別進行儲存。

下面我用簡單幾步驟,示範儲存 Section(區塊)類型,並在不同位置(或是不同頁面)拿來使用。

Step1:儲存重複區塊

將滑鼠移到區塊上,點擊儲存區塊 Icon,下圖示範儲存 Section 類型。

Divi教學 :新增重複區塊
新增重複區塊

命名儲存區塊的名稱,看是否有需要幫區塊設定分類(方便同類型的區塊歸類),點 Save to Library 存到資源庫。

Divi教學 :命名儲存區塊&儲存到資源庫
命名儲存區塊&儲存到資源庫

備註:上圖 Save as Global 功能,是把重複區塊儲存至全網站,並且都共用同一組。

如果勾選的話,假設在 A 頁面修改此區塊,在其他有使用的地方(像是 B 頁面 / C 頁面 ..),這個區塊都會一併進行更改。

Step2:如何呼叫重複區塊

在想要套用的網頁,新增一個 Section 區塊,點選 Add From Library,就會看到剛儲存的區塊,可以直接套用囉:)

Divi中文教學 :使用重複區塊
使用重複區塊

Step3:使用 Divi Library 面板,方便後續管理

前往 Divi > Divi Library,會看到剛儲存的區塊在這裡出現了,相關的新增、編輯、刪除也都能在這裡修改。

你也能在這新增區塊分類,如果之後儲存區塊變多了,也會方便你統整管理。

Divi教學 :Divi Library 資源庫
Divi Library 資源庫

我們也會發現,列表中有幫我們列出區塊的所屬分類、類型,和是否是 Global 全站區塊。


6. Divi Builder 進階小技巧

Divi Builder 因為功能非常多,使用上有一些小技巧可分享給大家,但這裡只先分享部分,不然怕文章會太長。

可按 Shift,一次編輯多個

網頁設計常會有重複圖示 or 文字,如果每個都個別修改速度會太慢,就能按下 Shift 一次選取多個,一次進行批次編輯。

Divi教學 :批量選取多個元素
Divi教學 :批量選取多個元素

我選擇文字顏色修改,就會發現能批次修改樣式囉,是不是快很多呢。

Divi中文教學 :批量修改顏色
Divi中文教學 :批量修改顏色

複製區塊樣式

除了上面分享的批次編輯,也能單獨複製某個已設計的區塊樣式,然後貼到新的區塊上面,就不用重複工作了(Section、Row、Module 都能複製)。

在模塊中點 Copy Module Styles,就能複製模塊樣式。

Divi中文教學 :複製 Module 模塊樣式
Divi中文教學 :複製 Module 模塊樣式

然後在另一個模塊點 Paste Module Styles,就能貼上模塊樣式啦!因為剛好被視窗擋住,但會發現樣式全都複製過去了。

Divi教學 :貼上模塊樣式
貼上模塊樣式

形狀分割線功能

有時候在佈局時,一塊塊長方形會覺得有點制式,就可用「 Dividers 形狀分割線 」進行設計,像是下圖我就用水波的圖形。

Divi教學 :使用形狀分隔線
Divi教學 :使用形狀分隔線

不同裝置,是否顯示設定

如果老闆或是客戶要求,不想在手機版出現某個區塊,就能用這個功能各別對不同裝置做顯示設定。

點選 Advanced > Visibility,勾選要在哪個裝置禁止區塊顯示即可。

Divi中文教學 :不同裝置,是否顯示設定
Divi中文教學 :不同裝置,是否顯示設定

像是上圖的設定,就是在手機版(Phone)的時候,這個區塊就不會出現。

好囉,以上就是幾個 Divi Builder 小技巧分享。


7. Theme Options 主題設定

Theme Options 是 Divi 修改大多數設定項的地方(前往 Divi > Theme Options),像是 General 常規設定、Navigation 導航選單、Divi Builder 設定、Updates 軟體更新等 ..。

如果有相關功能需調整,就能在這選取修改。

Divi教學 :Theme Options 主題設定
Divi教學 :Theme Options 主題設定

下面我會挑選一些功能做些調整分享,但因為 Divi 的功能非常多,有些我沒提到的地方,也能依照自己的需求修改唷!

General 常規設定

General 是 Divi 的常規設定,裡面滿多設定項目的,下圖是調整網站 Logo。

Divi教學 :General 常規設定
General 常規設定

是否開啟社群分享&設定社群連結,像是 FB、IG 等 ..。

Divi教學 :設定社群是否開啟&連結
設定社群是否開啟&連結

開啟使用摘要文字(預防因為顯示全文,而網站頁面過長問題)、回到頂端按鈕等設定項。

Divi教學 :開啟摘要文字&回到頂端按鈕
開啟摘要文字&回到頂端按鈕

SEO 關鍵字優化

Divi 內建有基礎 SEO 關鍵字優化,有分為 Homepage SEO(首頁 SEO)、Single Post Page SEO(單一頁面 SEO)、Index Page SEO(索引頁 SEO),共這 3 個分頁。

  • Homepage SEO 分頁:可以把 SEO 相關功能打開,然後設定首頁的 Title 標題、Meta 描述、Keywords 關鍵字等 ..。
Divi教學 :WordPress SEO 設定
WordPress SEO 設定

備註:Enable canonical URL’s 功能,是因為某些頁面可能具有不同的 URL,但這些 URL都指向相同頁面。

例如 domain.com、www.domain.com、domain.com / index.html 都是指向網站首頁的情況。

而這功能可告訴搜尋引擎,這些重複網址可當作同一個頁面對待,這樣好處是能避免受到 Google 因為重複頁面,而造成頁面的 SEO 權重降低。

  • Single Post Page SEO 分頁:這頁我只有把 Enable canonical URL’s 打開,其他都是用默認值。
  • Index Page SEO 分頁:Enable canonical URL’s 打開Enable meta descriptions 打開。
Divi教學 :Index Page SEO 設定
Index Page SEO 設定

好囉,以上就是分享幾個 Divi 小設定更改,還有許多功能也可照自己需求調整唷。


8. Theme Builder 主題編輯器

Theme Builder 是 Divi 用來打造客製化主題的工具,讓你能在不同網站頁面,呈現不同的頁首、頁尾、佈局內容等 ..,滿足任何客製化需求。

我自己的主要用法有兩種。

  • 新增全站頁首&頁尾:因為 Divi 預設頁首&頁尾比較陽春一點,所以我通常會自行設計(Divi 內建沒提供頁首&頁尾模板,所以通常要自行設計,或是從第三方下載模板)。
  • 在某條件下,單一客製化頁面:Divi 提供許多可選條件,像是在某分類下、某標籤下、某作者下、某文章下等 ..,會自動套用指定模板,達成完全客製效果。

新增全站頁首&頁尾

前往 Divi > Theme Builder,會看到第一個區塊,分別有 Add Global Header(新增全站頁首)、Add Global Body(新增全站內容)、Add Global Footer(新增全站頁尾) 這 3 種。

只要是在第一個區塊進行的設計,就會套用在整個網站中。

Divi中文教學 :Theme Builder 佈局介面
Divi中文教學 :Theme Builder 佈局介面

通常都是新增全站頁首&頁尾比較多,而新增全站內容會比較少(因為不太會全部網站的內容都長得一樣)。

備註:匯入 / 匯出模板功能。

匯入 – 如果有從第三方下載模板 or 自行設計的模板,就能用此工具上傳並使用。

匯出 – 可匯出現有的模板設計,就能在新網站上傳+重複使用。

點選 Add Global Header > Build Global Header,就能新增全局頁首,至於後面的設計方式跟使用 Divi Builder 操作是一樣的,就不多做介紹。

Divi中文教學 :使用 Theme Builder 客製化網頁設計
使用 Theme Builder 客製化網頁設計

至於頁尾也能用一樣的流程新增,新增完畢後會看到框框的顏色改變了,完成後記得儲存一下。

Divi教學 :全站頁首&頁尾設定成功
全站頁首&頁尾設定成功

最後再回到 WordPress 前台看一下,應該會發現網站的頁首&頁尾已經改變了:)

單一客製化頁面

另一種常見的用法,就是自訂客製化模板的顯示條件,下面我示範一下。

首先新增一個區塊,這裡我設定在「 文章內容 」分類下的文章(這分類是我自己新增的),全都採用我自訂的這個佈局。

Divi中文教學 :使用 Theme Builder 自訂客製化頁面
使用 Theme Builder 自訂客製化頁面

建立完成後,在頁首&頁尾應該會同樣出現綠色的區塊(代表同樣套用了剛設計的全站頁首&頁尾)。

假如,在這個條件下的頁首我想讓它長得不一樣,就可把全局頁首刪除,換成自訂的新頁首。

如此一來,只要當前文章是歸類於「 文章內容 」的分類下,就會採用我自訂的新頁首。

Divi教學 :新增 Custom Header 客製化頁首
新增 Custom Header 客製化頁首

至於 Custom Body 自訂內容、Custom Footer 自訂頁尾,也是一樣的操作邏輯,如果有需求也可進行調整。

結合上面分享的功能,就能使用 Divi Theme 打造超客製化的網站了:)


9. Theme Customizer 主題制定器

Theme Customizer 是 Divi 用來調整網站樣式的,它與 WordPress 內建的視覺編輯器整合在一起,是除了 Divi Builder 頁面編輯器以外的網站樣式調整工具。更多 WordPress 後台基礎操作

無論是想修改頁首樣式、頁尾樣式、選單樣式、部落格樣式、手機版樣式等 ..,都能來這裡調整。

前往 Divi > Theme Customizer,就會出現相關設定。

Divi中文教學 :Theme Customizer 主題制定器
Divi中文教學 :Theme Customizer 主題制定器

這裡面的細項功能很多,大家可點一點玩玩看,但有一個操作小建議。

就是調整時,會建議把右側頁面也切換到對應的位置,這樣調整欄位時,才會直接看到調整後的結果(例如調整頁尾,會建議頁面移至尾端,就能看到變化)。

但有些調整,還是需儲存後,再實際到網站前台,才會看到變化。


10. Role Editor 角色權限

Role Editor 是用來做權限分級的,WordPress 預設會有幾個角色權限,像是 Administrator(管理員)、Editor(編輯)、Author(作者)、Contributor(投稿者) 這幾個角色。

如果網站是多人管理,就可能會有權限調整的需求,就能用 Role Editor 進行權限調整,只要把不用的功能關閉即可。

Divi教學 :設定角色權限
Divi教學 :設定角色權限

11. Support Center 支持中心

前往 Divi > Support Center,這是一些 Divi 提供的客戶支持,我列出可能會用到的做分享

System Status 系統狀態

Divi 會幫我們偵測目前系統的支援程度。

舉例下圖就是還沒滿足需求,就會出現相關提示,這時就能到自己主機商做些調整,讓 Divi 和網站相容度更高。

Divi教學 :Divi 系統狀態
Divi 系統狀態

Safe Mode 安全模式

這功能可以用在網站開發,或是網站除錯時,可以開啟此功能,Divi 就會暫時幫忙禁止快取外掛的運作。更多 快取外掛推薦

否則,有時候因為快取還是保存原來的狀態,會導致我們不知道問題解決了沒。

Divi教學 :Safe Mode 安全模式
Safe Mode 安全模式

12. Divi 週邊軟體(Extra / Bloom / Monarch)

Elegant Themes 除了開發 Divi Theme 主題 & Divi Builder 編輯器以外,也同步開發了其他軟體,讓整個 Divi 生態圈變得更豐富,分別是。

  • Extra:部落格 / 雜誌 / 作品集主題
  • Bloom:電子報註冊行銷軟體
  • Monarch:社群分享軟體

Extra

Divi 的 Extra 部落格 / 媒體主題
Divi 的 Extra 部落格 / 媒體主題

Extra 是 Divi 主題的一種延伸,主要是給部落格、出版媒體、作品集網站使用,因為這類型網站,可能會需要許多文章相關功能、客製化分類頁面需求、呈列作品的功能。

WordPress 預設的分類頁面,版面通常單調許多,而 Extra 有特別的 Category Builder 分類頁面編輯器,能打造不同分類的呈現樣式,滿足媒體業多樣的版面設計。

docs image
Extra 的 Category Builder 分類頁面編輯器示範

備註:Category Builder 分類頁面編輯器,算是 Divi Builder 的擴充版本,裡面添加了一些有關於文章相關的模塊,方便站長套用。

除了標準的部落格 / 媒體網站以外,如果你是設計師打算展示你的作品,使用 Extra 同樣是個好選擇,因為除了豐富的文章模組,也能用 Divi Builder 設計展示頁面。

當然,Extra 主題和 WooCommerce 外掛 同樣有良好的支援,支持電子商務的功能。

Bloom

Divi 的 Bloom 電子報註冊行銷軟體
Divi 的 Bloom 電子報註冊行銷軟體

Bloom 是 Divi 開發的一款用來收集訪客 Email 的電子報註冊行銷軟體,目的是幫站長增加 Email List。

它與 WordPress 電子報行銷外掛 完美整合在一起,訪客可以通過使用 Bloom 設計出來的搜集表單,當訪客確認發送後數據會自動傳送到你連結的任一款電子報行銷外掛,簡單來說 Bloom 是一個行銷媒介。

Bloom 有提供多種優質設計的註冊模板,站長可直接套用,減少還需設計的時間。

Bloom 多種收集電子報的模板
Bloom 多種收集電子報的模板

至於如何呈現電子報註冊表單,也是頗重要的,Bloom 同樣提供多種顯示方法。

像是 Popup 彈出式、FlyOut 飛入式、Below Post 帖子下方、Inline 嵌入式、Locked Content 內容鎖定式、Widget 小工具等 ..,幾乎能滿足任何情況。

簡單來說,如果你是有在使用 Divi 的服務,有關電子報蒐集工具,就用 Bloom 準沒錯:)

Monarch

Monarch 社群分享外掛
Monarch 社群分享外掛

Monarch 是一款社群分享軟體,你可以在網站上嵌入不同社群,以變獲得更多關注者&分享。

Monarch 有提供許多顯示方法,加強訪客對你的關注,像是基本的放置在網站左右側、嵌入到文章或頁面中、彈出視窗等 ..。

它也有和 WordPress 小工具整合,這表示你能放置在任何一個側邊欄。Monarch 也有短代碼嵌入的方式,綜合可顯示的方式非常多種。

如果你打算在網站上嵌入社群分享外掛,就用 Monarch 準沒錯:)


13. Divi Marketplace 市集

Divi Marketplace 市集(子主題 / 擴充外掛 / 網站佈局)
Divi Marketplace 市集(子主題 / 擴充外掛 / 網站佈局)

Divi Marketplace 是 Divi 生態圈同樣很重要的一環,這個地方有銷售很多 Divi 相關的子主題、WordPress 外掛、網站佈局等 ..。

且 Divi 有特別聲明這個市集不會放入 Elegant Themes 自家公司開發的軟體(怕惹人詬病),這也市集裡面的軟體,都是第三方個人或公司所開發的。

如果要做舉例,Divi Marketplace 就有點類似蘋果 APP Store 的概念,提供開發者和使用者一個欣欣向榮的環境。

Divi Marketplace 豐富的軟體功能
Divi Marketplace 豐富的軟體功能

如果站長有需求無法達成時,就可以來 Divi Marketplace 選購相關功能,基本上都能完整滿足:)


常見問題

Divi 是什麼呢?

Divi 是由知名 Elegant Themes 公司開發,是許多網頁設計師喜愛的一款軟體,除了功能強大且有很多高質感的元素(和現成模板)。

Elegant Themes 旗下產品,有全功能 Divi Theme 佈景主題、Divi Builder 頁面編輯器、Extra 主題(可用在部落格 / 新聞雜誌 / 作品集 ..)、Bloom 電子報註冊行銷工具、Monarch 社群工具等 ..。

所以使用 Divi 軟體,不會只有一種軟體可用,而是能享受它們公司的所有服務。

Divi 費用是多少呢?

Divi 的年租用方案,定價是 $89 美元 / 年(約 $2,700 台幣 / 年),可應用在無限數量的網站。

Divi 的終身使用方案,定價是 $249 美元(約 $7,500 台幣 / 終身),一次性費用即可終身使用,可應用在無限制數量的網站。

終身方案是一次性費用,購買之後隔年不會有額外費用,你可享有 Divi 軟體終身更新+優先的客戶服務。

Divi Builder 可以和其他主題一起用嗎?

Divi Builder 是頁面編輯器外掛,能和不同的主題搭配使用,都是沒有問題的。

不一定只能用在 Divi 本身的主題身上。

Divi 和 Elementor 哪一款比較好?

這兩款都很棒,我自己兩款都有在用,並在我自己的不同網站上運行。

Divi 嚴格說起來,應該算是完整的服務集合,因為裡面包含主題、頁面編輯器、電子報行銷軟體等 ..。

Elementor Pro 則是偏向頁面編輯器部分,雖然也有 Theme Builder 主題編輯器功能,但還是需搭配一個正式主題,才會比較完整。

如果單就「 頁面編輯器 」來說,Divi Builder 功能性會更多,但 Elementor 比較輕快靈活。

Divi 年租版如果不續約了,功能還會存在嗎?

現有的網站版面&功能還是會存在,但就無法享有 Divi 軟體的版本更新權利。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

18 thoughts on “Divi Themes 中文教學:WordPress 掌握 Divi Builder 就靠這篇(全指南)”

  1. 您好,十分感謝您的無私教學分享,也閱讀了其他部落客關於divi的介紹 但還是不太明白 ,想請問他僅屬於頁面編輯器嗎? 如果我們需要有購物車功能或是線上教學平台。那摸我們還是需要額外購買woocommerce以及LMS或thrive apprentice(線上教學課程管理)的外掛後,再鏈結divi來做頁面排版嗎? 還是divi裡面也提供了相關功能呢? 感謝並期待您的回覆

    1. 嗨,Divi 主要算是主題+頁面編輯器+其他額外功能的集合體。

      如果你想架設的是線上課程網站,你可能需額外加購類似 Learndash 的 WordPress 外掛,這些是沒有整合在主題裡面的,都需額外安裝 or 加購,以此類推~

    1. 小犬網站 - Luna

      嗨,Morris,

      因為你給的資訊好像不太夠,我不太能理解你的問題,這邊我找到一篇 Divi 產品頁面 教學,可以參考看看。

      或者是可以到我們的 Fb 社團 貼上問題跟詳細情況,讓廣大網友一起集思廣益唷:)

  2. 我購買後套用外觀模板,但為何我預覽主頁面會是一片空白呢?
    是否和我之前套用的模板有關呢?
    有點不知該從何下手
    請問該如何解決這個問題啊?
    感謝幫助

    1. 小犬網站 - Luna

      嗨,zhau,

      在套用主題之前,需要先把原本的主題停用,否則會造成衝突唷,

      也有可能是外掛 / 頁面編輯器衝突,可以到後台一一檢查並停用外掛觀察。

      若還無法呈現主頁面,可能就需要詢問 Divi 客服唷。

      因為不確定你的實際情況,也可以到我們的 FB 社團 貼出詳細情況,讓廣大網友一起幫助你找出解決方法:)

  3. 犬哥您好,感謝您得無私分享DIVI的知識,請教您如何在網頁中置入一個給人下載的檔案,如報名表等,格式可能是PDF或WORD類型檔案供下載?

  4. 您好!
    想請問如果用別人的Divi帳號(A帳號)架站後未來自己買了另一個新的帳號(B帳號),可以轉移在A帳號架設的網站到B帳號嗎(相同的網域名稱),一直找不到相關的操作教學和方法,看到這邊有好詳細的介紹所以來詢問您,謝謝!

    1. 犬哥網站 - Luna

      嗨,Qing:

      請問你是在 WordPress.org 上使用,還是在 WordPress.com 呢?

      如果是在 WordPress.org 使用,沒有變更虛擬主機+網域,那就在 Divi 的 A 帳號管理頁面,將原本的網域移除,購買 B 帳號後,新增你現在使用的網域即可。

      如果是在 WordPress.com ,目前我也沒有使用經驗,不過應該大同小異,若是有搬移疑問,也可以詢問 Divi 支援,協助你進行帳號的更換唷。

      1. 您好!謝謝用心的回覆!
        目前是用org架設的,所以是去A帳號的Username&API Keys那邊新增一組,然後在當前網站的Wordpress-Divi-Theme Option貼上,未來轉移時再貼上B帳號的API Keys就好了嗎!

        1. 犬哥網站 - Luna

          嗨,Qing,

          是的唷,這樣就可以成功轉移了!

          暫時移除 API 不會讓網站消失,只是會無法使用該功能而已,重新貼上 API 就 OK 囉!

  5. Divi-Landing-Page-Layout-Pack
    Divi-Theme-Builder-Packs
    Divi-Header-Footer-Packs
    Divi-Product-Layout-Pack
    小犬老师,这些离线包怎么放进网站里去。我们这里网络很慢。

    1. 犬哥網站 - Luna

      嗨,宋卫卫,

      佈景主題安裝教學文章

      外掛安裝教學文章

      可參考以上教學,來分別進行佈景主題+外掛安裝。

      另外,網站速度緩慢,有兩個原因:虛擬主機、網路連線問題。

      虛擬主機的部分,可以考慮升級或更換主機。

      網路連線部分,可能需要洽詢你的網連服務,或是建議你可以購買 VPN 服務,來做相關處理:)

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端