Divi與Elementor：WordPress頁面構建器外掛比較

試圖在Divi與Elementor之間做出決定來搭建您的WordPress網站？

Divi和Elementor是兩個頂級的拖放式WordPress頁面構建器。兩者都讓您無需任何技術知識即可構建100%自定義網站。除了幫助您構建頁面外，它們還支援主題構建和高階動態內容整合。

但是，儘管它們有許多相似之處，但一些重要的差異可能會將您推向一個方向或另一個方向。

在這篇文章中，我們將深入比較Divi與Elementor，以幫助您選擇適合您需求的選項。

我們不專注於挑選一個“贏家”。相反，我們將展示許多相同點和不同點，以幫助您選擇適合您的工具。為此，我們將在六個關鍵領域比較Elementor與Divi。

1. 效能對比
2. 使用者介面對比
3. 獨特功能對比
4. 定價對比
5. 模板對比
6. 技術支援對比
7. 應該選擇哪一個？

Divi與Elementor：效能對比

任何頁面構建器的一個重要考慮因素是效能。也就是說，您建立的設計載入的速度有多快？

為了測試Divi與Elementor的效能，我們使用Divi和Elementor設定了相同的設計，並通過一些速度測試工具執行它們。

為了儘量做到這一點，我們在每個構建器之間使用相同的模組集和每個模組中的相同內容建立了我們的設計。

我們使用的模組是：

• 段落文字
• 按鈕
• 計數器
• 基本聯絡表
• 價格表
• 兩件式手風琴
• 客戶感言

為了使其成為公平競爭，我們正在測試Divi Builder與Elementor和Elementor Pro的外掛版本。我們這樣做是為了使用相同的主題 ( Astra ) 來準確比較這些構建器的效能。

Divi測試頁面

測試站點1：我們的Divi測試頁面

我們的Divi測試頁面是用以下資源製作的：

• Divi Builder外掛
• Astra主題
• 使用上面的模組使用Divi構建的設計

Elementor測試頁面

測試站點2：我們的Elementor測試頁面

我們的Elementor測試頁面是由：

• 免費的Elementor外掛（我們禁用了Elementor的內建樣式以支援繼承主題樣式）
• 元素專業版
• Astra主題
• 使用上面的模組使用Elementor構建的設計

需要注意的一件事是，Divi包含一個內建功能來縮小和組合其CSS和JavaScript，而Elementor則沒有。出於這個原因，Divi更擅長限制其開箱即用的HTTP請求。

但是，您可以（並且應該）使用免費外掛（例如 Autoptimize ）或高階優化外掛（例如WP Rocket）輕鬆地向Elementor新增相同的優化。

因此，我們將執行兩組測試：

1. 沒有額外的效能優化
2. 已安裝Autoptimize以縮小和組合指令碼

使用第二個場景中的數字應該更準確地瞭解這兩種工具在實時、效能優化的WordPress網站上的表現。但是，我們仍然包含未優化的數字，以向您展示當您未實施效能優化​​時它們的比較情況。

除了我們討論的內容之外，我們沒有對預設的WordPress環境進行任何更改。

我們將使用兩個測試工具：

• web.dev：來自Google的使用Lighthouse的工具。它從移動裝置進行測試。
• WebPageTest：流行的速度測試工具。我們已將其配置為從桌面裝置進行測試。

Divi效能

我們將從Divi本身的結果開始（沒有自動優化）。

WebPageTest（沒有自動優化）：

Divi未新增優化下的WebPageTest結果

web.dev（沒有自動優化）：

Divi未新增優化下的web.dev結果

這是安裝了Autooptimize外掛的Divi的結果。

WebPageTest（使用自動優化）：

Divi啟用Autooptimize外掛下的WebPageTest結果

web.dev（使用自動優化）：

Divi啟用Autooptimize外掛下的Divi web.dev結果

Elementor效能

我們還將從Elementor本身的結果開始（無自動優化）。

WebPageTest（沒有自動優化）：

Elementor未新增優化下的WebPageTest結果

web.dev（沒有自動優化）：

Elementor未新增優化下的web.dev結果

這是安裝了Autooptimize外掛的Elementor的結果。

WebPageTest（使用Autooptimize）：

Elementor使用Autooptimize外掛下的WebPageTest結果

web.dev（使用Autooptimize）：

Elementor使用Autooptimize外掛下的web.dev結果

效能結論

為了讓您更輕鬆地使用這些資料，這裡有兩個表格將所有資料放在一起。

沒有自動優化：

使用自動優化：

總體而言，你可以看到，Elementor確實有輕微的優勢迪維以其較小的檔案大小。它還在web.dev的Lighthouse審計中表現更好，並且在兩個測試中的最大內容繪製時間都較短。

不過，差距並不大，迪維做了很多工作來縮小差距。總體而言，Elementor在效能方面略領先。

如果您想知道Divi主題如何與Elementor Pro和Hello主題進行比較，那麼該領域將更加有利於Elementor，因為Hello主題比Divi的主題輕。從本質上講，如果“Elementor + Astra”已經擊敗“Divi Builder + Astra”，那麼如果將“Elementor + Hello”與“Divi Builder + Divi 主題”進行比較，差距只會變得更大。

Divi與Elementor：使用者介面對比

使用者介面很難客觀地進行比較，因為很多都歸結為個人喜好。有些人更喜歡Elementor的介面，而另一些人則更喜歡Divi的介面。

出於這個原因，我們不能在這裡真正宣佈一個贏家。相反，我們只會向您展示每個工具的介面是如何工作的，您可以選擇最喜歡的方法。

客觀的一件事是後端介面的“速度”，因為這將影響您構建設計的速度。過去，Elementor的後端使用者介面絕對讓人感覺“更快”。也就是說，設定面板開啟速度更快，拖放更流暢等。

然而，Elegant Themes在2021年1月為Divi Builder釋出了一個重大的後端效能更新，該更新取得了巨大的改進，將許多重要的後端操作加速了100-700%。在Elegant Themes設定的壓力測試環境中，懸停在模組上的時間從891毫秒下降到383毫秒，提升了155%。

您絕對可以感受到這些變化，現在這兩個構建器在後端都非常快。在此更改之後，很難宣佈某個構建器成為後端效能的贏家。

Divi使用者介面

當您開啟Divi的視覺構建器時，它會向您顯示您網站的全屏實時預覽。底部有一個可摺疊的浮動工具欄，當您將滑鼠懸停在網站的不同部分時會出現浮動圖示。

您可以單擊各種圖示來插入內容或佈局。例如，黑色圖示可讓您插入新模組。

Divi介面

新增內容或佈局元素後，您可以單擊它以開啟包含詳細設定的彈出視窗。您可以調整此彈出視窗的大小或將其拖動到螢幕上的任何位置，讓您可以根據自己的喜好自定義介面。

編輯Divi模組

對於文字內容，您還可以使用內聯編輯，這意味著您只需在頁面的實時預覽中單擊並鍵入即可。

如果單擊頁面底部的 ，可以展開選單以選擇不同的裝置預覽、開啟後端編輯線框檢視以及訪問其他高階設定。

這是線框檢視的樣子：

Divi控制欄和線框檢視

作為線框的替代方案，您還可以使用圖層工具，它可以幫助您將內容組織成不同的結構。

Divi圖層介面

另一個有用的功能是能夠使用右鍵單擊。您可以使用它來快速複製整個模組，或者只是從模組複製和貼上設定配置。您還將獲得其他有用的選項，例如能夠“鎖定”模組以避免意外更改。

在Divi中右鍵單擊

總體而言，Divi介面的所有浮動圖示有時會讓人感到有些不知所措。但它確實擅長為您提供許多有用的工具和自定義選項。

它還為您提供了一些Elementor不提供的介面選項，例如線框檢視。

Elementor使用者介面

Elementor對其介面使用了稍微不同的方法。它在右側顯示您的設計的實時預覽，在左側顯示一個固定的側邊欄（很像本機WordPress主題定製器）。

此側邊欄是您管理設計大部分設定的地方。例如，您可以在側欄中檢視小部件列表並將其中一個拖到您的設計中。

Elementor主介面

然後，您可以使用側欄中的選項自定義小部件的樣式、內容等。

編輯Elementor小部件

對於大多數文字內容，您還可以使用內聯編輯。同樣，這意味著您只需單擊並輸入實時預覽即可。但是，Divi為內聯編輯提供了更多支援，因為Elementor中仍有一些文字不支援此功能。

Elementor沒有為您提供Divi提供的線框檢視，但它確實帶有一個非常有用的導航器工具。此工具為您提供頁面結構的輪廓，很像Divi的圖層工具。您還可以重新命名元素以幫助您記住它們。

Elementor導航功能

在Elementor中使用右鍵單擊

此外，您還將獲得其他有用的工具，例如撤消/重做、裝置預覽、修訂歷史記錄等。並且，與Divi一樣，Elementor支援右鍵單擊以讓您在其他操作之上覆制小部件及其設定。

總體而言，由於Elementor不像Divi那樣依賴浮動圖示，因此Elementor介面感覺更簡潔，不那麼壓倒性。

Divi與Elementor：獨特功能對比

在功能方面，這兩個工具之間有很多重疊。例如，這兩種工具都提供：

• 視覺化拖放介面
• 完整的主題構建支援
• 支援動態資料

然而，每個外掛也有一些特殊的技巧。在本節中，我們將比較每個構建器獨有的功能。

Divi的獨特功能

Divi最獨特的功能之一是內建A/B測試，它使您可以對不同的模組進行拆分測試。例如，您可以測試不同CTA按鈕的效能。

這是一個非常有用的營銷工具，因此在更多以業務為中心的用例中，這是Divi的一大優勢。

您可以使用Google Optimize或第三方Split Test for Elementor外掛將A/B測試新增到Elementor ，但這不是您使用Divi獲得的緊密內建功能。

Divi的內建A/B測試功能

表單模組內部還有一個重要的區別：條件邏輯。雖然Divi和Elementor Pro都提供靈活的表單小部件，但Divi的表單小部件包含內建條件邏輯，而Elementor Pro則沒有。如果您不想使用第三方表單外掛，但又想構建高階表單，那麼這個附加功能非常好。

Divi還包括自己的內建角色編輯器，可讓您控制不同WordPress使用者角色可以訪問的模組和設定。如果您正在構建客戶端站點，您可以使用它來控制您的客戶可以訪問哪些Divi功能，這樣他們就不會破壞某些內容。或者，您可以使用它來控制貢獻者可以在您的站點上執行的操作。

Elementor確實包含一個基本的角色編輯器，用於授予或限制對整個Elementor介面的訪問許可權，但它不像Divi的角色編輯器那樣精細。

最後，Divi有外掛和主題兩種版本，而Elementor只是一個外掛。儘管Elementor團隊確實提供了他們自己的輕量級主題Hello，該主題旨在與Elementor Pro配對。

Elementor的獨特功能

Elementor Pro最獨特的功能之一是它的Popup Builder。使用Popup Builder，您可以使用Elementor介面（及其所有小部件）來設計可在站點上的任何位置顯示的自定義彈出視窗。

Elementor彈出視窗構建器功能

您可以建立不同型別的彈出視窗（模式、通知欄、滑入等），還可以使用常見的彈出視窗觸發器（站點停留時間、滾動深度等）。您還將獲得詳細的定位規則來控制彈出視窗的出現時間。

這是一個超級靈活的功能，您可以將其用於所有型別的潛在客戶生成，從電子郵件選擇加入到彈出式聯絡表單、促銷、登入/註冊等等。您可以前往Elementor的官方Facebook群組獲得超過98,000名成員的社羣支援。對於免費和付費Elementor使用者來說，這都是一個不錯的選擇。

您可以找到向Divi新增彈出視窗構建的第三方附加元件，但這不是核心功能。您購買的Divi還包括Bloom電子郵件選擇加入外掛，其中包含彈出視窗。但是，Bloom沒有為您提供拖放式構建器，因此它不是Elementor Popup Builder的真正匹配項。此外，Divi’s Bloom僅限於選擇加入，而您可以使用Elementor建立任何型別的彈出視窗。

Divi與Elementor：定價對比

比較定價是一個棘手的問題，因為Elementor在某些情況下更便宜，而Divi在其他情況下更便宜。因此，根據您將如何使用每種工具，一種可能比另一種更實惠。

免費版

讓我們從頭開始。Elementor是唯一提供100%免費版本的產品。更重要的是，Elementor的免費版本非常靈活。即使只有免費版本，您也可以構建一些漂亮的設計並訪問最基本的小部件。

因此，如果您的目標是保持免費，那麼Elementor是您唯一的選擇。這是一個偉大的！

高階版本

就高階版本而言，它是如何擺脫困境的：

• 如果您只需要一個網站的構建器，Elementor Pro會更便宜。
• 如果您需要多個網站的構建器，Divi會更便宜。

Elementor Pro提供三個為期一年的許可證選項，每個選項用於不同數量的站點：

• 1個站點：49美元/年
• 3個站點：  99美元/年
• 1,000個站點：199美元/年（基本上無限制，但有上限以避免濫用）

從2021年3月9日起，Elementor將轉向定價更高的新Pro計劃。基本上，前兩個計劃將保持不變，而1,000個站點計劃的費用為999美元/年。兩個新的Pro計劃是25個站點計劃，費用為199美元/年，100個站點計劃費用為499美元/年。

在2021年3月9日之前購買Elementor Pro的1,000個站點計劃的任何人都將擁有舊許可證。這意味著只要他們保持有效的許可證，他們只需支付199 美元/年。

另一方面，Elegant Themes允許無限使用其計劃。對於一年的許可證，您需要支付89 美元才能在無限制的個人和客戶網站上使用。

除此之外，您的購買可讓您訪問所有Elegant Themes產品，而不僅僅是Divi。只需一個價格，您就可以獲得：

• Divi主題
• Divi Builder外掛
• 額外的主題
• Bloom外掛（電子郵件選擇加入）
• Monarch外掛（社交分享）

因此，回顧一下，讓我們看一下三種不同的情況，看看哪個高階構建器會更便宜。如果您需要在以下位置使用構建器：

• 一個站點： Elementor Pro最便宜，為49美元/年，而 Divi為89美元/年。
• 三個站點：兩個構建器幾乎相等，Elementor Pro為99美元/年，Divi為89美元/年。
• 四個站點（或更多）： Divi最便宜，每年89美元，而 Elementor Pro每年199美元。

終身許可證

最後，最後一個重要的考慮因素是許可期限。Elementor僅提供一年的許可證。也就是說，如果您想繼續獲得支援和更新，則需要每年更新您的許可證。此外，如果您不續訂，您將無法再新增新的Elementor Pro小部件。儘管您設計中的所有現有Elementor Pro小部件都將繼續工作。但是您將無法插入新的高階模板。

Elegant Themes提供相同的年度許可以及終身許可選項。使用終身許可證，您只需為終身使用、更新和支援支付一筆固定費用。從價值的角度來看，這很難被擊敗。

終身許可證為249 美元，與一年許可證相比，盈虧平衡點約為2.8年。

Divi與Elementor：模板對比

這兩個構建器的一大優點是它們帶有大型模板庫，因此您無需從頭開始設計。

相反，您只需匯入一個模板，對其進行自定義以滿足您的需求，您就擁有了一個專業設計的網站。

它們都有相當大的模板庫，但Divi在其模板的數量和組織方面具有優勢。

Divi模板

截至2021年3月，Divi附帶了1,500多個預建模板，您可以將這些模板分為199個佈局包。佈局包本質上是圍繞特定網站構建的主題模板集合。例如，您可能會為主頁獲得一個模板，為聯絡頁面獲得另一個模板，等等。

Divi模板庫

您還可以將自己的設計儲存為模板，以便日後重複使用。

Elementor模板

Elementor的模板有很多不同的風格，具體取決於您正在構建的內容型別。在設計頁面方面，您將獲得兩種型別的模板：

• 頁面：這些是整頁模板。使用Elementor Pro，您將獲得大約200個模板。
• 區塊：這些是頁面部分的部分模板。你可以像樂高一樣把它們放在一起來設計一個完整的頁面。

Elementor模板庫

Elementor還將其一些模板組織成模板工具包，這些模板以構建完整網站為主題（就像Divi）。然而，截至2021年3月，Elementor提供的模板套件少於25個，儘管他們每個月都會釋出一個新的模板套件。

您還將獲得用於彈出視窗和主題構建的單獨模板，這在技術上進一步擴充套件了Elementor的模板列表。

最後，您還可以儲存自己的模板，以便日後重複使用。

Divi與Elementor：技術支援對比

Divi和Elementor都為擁有有效許可證的客戶提供24/7支援。不過，總的來說，Divi略有優勢，因為它提供了更靈活的聯絡支援選項。

Divi支援

所有擁有有效許可證的Elegant Themes使用者都可以獲得24/7的高階支援。一大好處是您可以通過對講機獲得實時聊天支援。

這是一個很大的優勢，因為在任何WordPress主題或外掛中找到實時聊天支援是非常罕見的。

此外，如果願意，您還可以訪問他們較舊的論壇支援系統。不過，論壇系統依賴於社羣支援（Elegant Teams工作人員不再在那裡回答問題）。或者，您可以通過詳細的知識庫文件幫助自己。

您還可以通過擁有超過64,200名成員的大型官方Divi主題使用者Facebook群組獲得社羣支援。

Elementor支援

Elementor的付費客戶將通過工單獲得24/7的高階支援。此外，Elementor維護一個詳細的公共知識庫，向您展示如何使用核心功能、解決常見問題等。

Elementor在Facebook上還有一個大型官方群組，您可以在其中獲得超過98,000名成員的社羣支援。對於免費和付費Elementor使用者來說，這都是一個不錯的選擇。

還有一些常見問題的分支組，例如Elementor + 哪個主題？和Elementor + which Plugin，以及專門的Elementor Pro社羣。

由於Facebook社羣中有如此多的人，與提交工單相比，您在Facebook社羣中提問通常會更快地得到答覆。

Divi vs Elementor：你應該選擇哪一個？

最終，沒有明顯的贏家，這就是為什麼這兩種工具都如此成功的原因。這實際上取決於您的預算、您看重的功能以及您喜歡的介面。

Elementor可能是最好的起點，主要是因為如果您剛剛開始，它是免費的。您可以瞭解自己是否喜歡Elementor的免費版本，如果它適合您，那麼您無需花一分錢就能獲得一款出色的工具。

如果你願意付錢，這是一個更艱難的決定。

首先，考慮每個工具的介面。有些人更喜歡其中之一，所以這將是一種選擇方式。您可以通過以下方式測試每個介面：

• 使用Divi Builder的實時網路演示
• 安裝免費版Elementor

兩者都為您提供頂級風格和設計選項，因此很難在那裡宣佈獲勝者。當然，有一些小的功能差異，但這些不會影響大多數人。

其次，考慮是否有可能將您推向一個方向或另一個方向的獨特功能。例如，如果您是營銷人員，您可能真的很看重Divi的內建A/B測試。

另一方面，營銷人員也會重視Elementor Popup Builder，這是一種多功能工具，適用於從電子郵件選擇加入到促銷、調查等的所有內容。

在效能方面，Elementor略有優勢。因此，如果效能對您來說排名第一，那麼這對Elementor有利。

當然，如果效能對您來說至關重要，那麼您可能首先要重新考慮使用視覺化構建器，因為使用本機塊堆疊幾乎肯定會幫助您實現更快的站點。

最後，還有定價。對於單個站點，Elementor Pro更便宜。但是對於多個站點，從長遠來看，Divi在價效比方面有兩大優勢：

1. 入門級89美元Elegant Themes計劃仍然允許在無限站點上使用，而您需要價格更高的199美元Elementor Pro計劃。Elementor Pro的1,000個站點計劃很快將其價格提高到999美元。
2. Elegant Themes提供終身會員資格。如果您知道您將使用此工具多年，那麼從價值的角度來看，很難擊敗終身交易。對於Divi來說，一年許可證和終身許可證之間的盈虧平衡點大約是兩年零九個月。

但是，請記住，具有終身許可證的產品和服務是不可持續的。提供它們的企業必須跟上不斷增加的支援和開發成本。最終，他們降低支援質量，將業務出售給其他人，或者關閉。因此，明智地選擇！

您可以將Elementor與Divi一起使用嗎？

是的，有點。在同一網站上同時使用Elementor和Divi在技術上是可行的。但是，我們強烈建議您不要這樣做。嘗試這樣做會減慢您的網站速度（因為每個構建器都會載入自己的指令碼），增加很多複雜性，並且通常會使您的工作更加困難。

如果您絕對必須同時使用這兩個外掛（同樣，我們真的不推薦它），您可以考慮使用諸如Asset CleanUp之類的外掛來有條件地僅在需要時載入每個構建器的指令碼。當一起使用Divi和Elementor時，它應該會減少效能損失。

不過，在相關說明中，您可以將Divi Builder與Elementor的Hello主題一起使用，如果您打算使用Divi的新主題構建器來設計整個網站，這可能比使用Divi主題更好。

小結

這結束了我們完整的Elementor與Divi比較。我們希望你覺得它有用！

如果這兩個仍然不符合您的要求，請閱讀我們出色的WordPress頁面構建器列表。它包括一些WordPress社羣最喜歡的其他頁面構建器，例如GeneratePress with Sections、Beaver Builder、Oxygen和Brizy。