Elementor vs Divi：設計功能比較

Elementor 和 Divi 是使用 WordPress 創建網站的兩個很棒的工具，特別是對於那些想要創建一個專注於設計的網站的人。 無論是 Elementor 還是 Divi 都帶有可視化編輯器，可讓您輕鬆在 WordPress 網站上創建頁面。

在上一篇文章中，我們寫了一篇比較兩個頁面構建器的一般特性的文章。 這次，我們將比較 Elementor 和 Divi 提供的詳細設計功能。

先說第一件事。 Elementor 和 Divi 都帶有一個可視化編輯器，您可以在其中設計您的頁面。 編輯器具有響應式編輯功能。 這意味著您可以針對所有設備類型（台式機、平板電腦和智能手機）優化您的設計。 無論是 Elementor 還是 Divi，您都可以為每種設備類型使用不同的設置（例如，邊距值）。

Elementor 和 Divi 提供的響應式編輯功能允許您在您的網站上採用移動優先的設計方法。

Elementor 和 Divi 提供了數十種設計功能。 為了便於您了解差異，我們將比較分為六個部分。

資產和媒體

- 圖標庫

對於一些設計師來說，圖標集合的可用性是他們在選擇頁面構建器時考慮最多的方面。 在網頁設計中，圖標就像排版一樣起著至關重要的作用。

從一開始，Elementor 就依靠 Font Awesome 為用戶提供圖標集合。 雖然圖標的數量足夠多，但它們並不能真正滿足設計師的需求。 特別是如果你想添加瘦圖標。 您需要升級到 Font Awesome 專業版才能訪問瘦圖標和其他高級圖標集。

如果您從 Fontello、IcoMoon 或 Fontastic 下載了自己的圖標集，Elementor 允許您使用它們。

迪維呢？

與 Elementor 不同，Divi 有自己的圖標集合。 老實說，我們不知道 Divi 提供的圖標的確切數量，但您可以輕鬆找到薄圖標以及一般圖標，例如社交媒體圖標到品牌圖標。

最近，Divi 還集成了 Font Awesome。 這意味著您還可以添加 Font Awesome 提供的圖標，就像在 Elementor 上一樣。 換句話說，Divi 有兩個圖標提供者：Divi 的原生圖標庫本身和 Font Awesome。 與 Elementor 不同，Divi 不允許您上傳自定義圖標集。

- 背景視頻

無論是 Elementor 還是 Divi，您都可以將視頻添加為部分的背景。 不同的是，Divi 不允許您從外部來源（例如 YouTube）添加背景視頻。 您只能通過上傳 MP4 格式或 Webm 格式的視頻文件來使用視頻背景。

同時，Elementor 允許您添加來自第三方來源（YouTube 和 Vimeo）的背景視頻。 您甚至可以使用 ACF 或 JetEngine 等自定義字段插件添加動態視頻。

- 背景幻燈片

除了視頻，Elementor 還允許您使用幻燈片作為部分的背景。 Divi 中沒有相同的功能。

設置背景幻燈片時，您可以添加任意數量的圖像。 為了不干擾您網站的加載速度，Elementor 提供了延遲加載選項。

- 背景蒙版

Divi 具有添加背景蒙版的本機功能。 使用該功能，您可以在當前背景中添加特定形狀。 是純色背景、漸變、圖像或視頻。 借助該功能，您無需上傳透明的 PNG 圖像即可將形狀添加到背景中。 您可以選擇 23 種形狀選項。

以下是該功能的工作原理：

Elementor呢？

到目前為止，Elementor 還沒有原生背景蒙版功能。

- 背景圖案

為了進一步裝飾部分的背景，Divi 還允許您添加圖案。 與蒙版一樣，圖案也適用於純色背景、漸變、圖像和視頻。 Divi 提供 24 種模式供您選擇。

Elementor 還沒有向背景添加圖案的原生功能。

- 形狀分隔線

形狀分隔器允許您通過添加特定形狀來裝飾部分的底部或頂部區域。 Divi 和 Elementor 都允許您向部分添加形狀分隔符。

Elementor 和 Divi 提供了 20 多種形狀分隔器選項。 在 Elementor 中添加形狀分隔線時，您只會看到分隔線名稱的列表。 在 Divi 中，您會看到分隔線的預覽。

- 圖像掩蔽

在 Elementor 中，借助原生圖像遮罩功能，您可以將正方形或矩形圖像轉換為特定形狀。 您可以選擇六種默認形狀：圓形、花朵、素描、三角形、博客、六邊形。 您還可以通過創建 SVG 圖像來創建自定義形狀。

Divi 沒有原生圖像遮罩功能。

顏色和效果

– 全局顏色

全局顏色是一項有用的功能，尤其是當您經常創建由大量頁面組成的網站時。 通過使用全局顏色，您可以通過單擊更改多個元素的顏色（無論是在同一頁面上還是在不同頁面上）。

Elementor 和 Divi 都具有全局功能。 您可以閱讀這篇文章以了解如何在 Elementor 中使用全局顏色。 而對於 Divi，您可以閱讀這篇文章。

- 漸變

如果你喜歡玩漸變，Divi 可能是更合適的選擇。 原因是 Divi 允許您在漸變中添加多種顏色（兩種以上）。 Divi 的高級漸變功能可用於任何支持漸變的元素。 從部分背景、行背景、列背景到按鈕。

Elementor 的漸變功能只支持兩種顏色。

- 背景疊加

在 Divi 中設置部分或列的樣式時，您可以添加圖像作為背景。 要使部分或列的內容更加可見，您可能需要添加疊加層。

Elementor 在設置面板上有一個設置塊，專門用於添加背景覆蓋。 您可以使用純色或漸變色。 Divi 還允許您像 Elementor 一樣添加背景疊加（純色和漸變）。

- 混合模式

如果您經常使用 Photoshop 等圖像編輯工具，那麼您一定已經熟悉術語“混合模式”。 此功能允許您混合兩種元素，使它們混合成相同的色調。

Elementor 和 Divi 具有此類功能，可讓您將兩種元素混合成相同的色調。 在 Elementor 中，添加混合模式的選項僅在“標題”小部件上可用。 在 Divi 上，您可以在背景圖像、圖像模塊、文本模塊和其他模塊上添加混合模式。

– CSS 過濾器

CSS 過濾器是一項功能，可讓您將某些效果應用於設計中的圖像。 使用該功能，您無需使用 Photoshop 編輯圖像即可添加模糊、棕褐色等效果。 相反，您只需要調整圖像大小，然後立即上傳。

在 Elementor 中，您有五個 CSS 過濾器選項。 在 Divi 中，您可以選擇 8 個 CSS 過濾器選項：

- 盒子陰影

上圖是可以在 Elementor 和 Divi 上設置的盒子陰影示例。 盒子陰影本身可以添加到所有元素，無論是在 Elementor 還是 Divi 上。 從部分、列到小部件（在 Divi 中稱為模塊）。

排版

- 全球排版

全局排版與全局顏色一樣有用。 當您創建一個包含多個頁面的網站時，您會發現它是多麼有用。 使用全局排版，您只需單擊一下即可更改許多區域的排版設置。

全局排版，以及我們前面提到的全局顏色，可以為您節省大量編輯網站的時間。

Elementor 是具有此類功能的頁面構建器。 不幸的是，Divi 目前還沒有這樣的功能。

- 排版控制

自定義字體的能力是您將從 Elementor 和 Divi Builder 等頁面構建器插件中獲得的功能。 實時編輯功能可讓您實時查看更改。 在 Elementor 和 Divi 中，您可以通過設置大小、粗細等來自定義字體。

以下設置選項可用於自定義 Elementor 和 Divi 中的字體：

• 顏色
• 尺寸
• 重量
• 變換（大寫、小寫、大寫）
• 樣式（正常、斜體、斜體）
• 裝飾（下劃線、上劃線、穿線）
• 線高
• 字母間距
• 字間距

無論是在 Elementor 還是 Divi 上，字體預覽都可以讓您在使用之前預覽字體系列。

- 自定義字體

當今絕大多數設計工具都使用 Google 字體將字體庫添加到其編輯器中。 Elementor 和 Divi 也不例外。 在 Divi 中，您可以選擇禁用 Google 字體以簡化字體選項。

對於某個網站項目，您可能希望改用自定義字體。 如果您想使用自己的字體，Elementor 和 Divi 都可以。 在 Divi 中，自定義字體允許的文件類型是 TTF 和 OTF。 在 Elementor 中，您可以上傳 TTF 和 WOFF。

如果您使用 Adob​​e Fonts，Elementor 支持與 Adob​​e Fonts 集成，以允許您使用 Adob​​e Fonts 中的字體，而無需先下載字體文件。 Divi 不支持與 Adob​​e Font 的集成。 因此，您需要先下載字體文件才能使用 Adob​​e Fonts 中的字體。

佈局

- 頁面佈局

在 Elementor 中，在開始創建頁面設計之前，您可以先設置頁面佈局。 您可以選擇四種頁面佈局選項：

• 默認值：您在站點設置中設置的默認頁面佈局
• Elementor Canvas：空白頁面佈局。 沒有頁眉和頁腳
• Elementor Full-width：類似於 Elementor Canvas，但帶有頁眉和頁腳
• 主題：主題的默認頁面模板

Divi 沒有設置選項來從其編輯器設置頁面佈局。 在 Divi 中，容器（部分）自動設置為全寬。 如果您希望您的頁面具有特定的大小（例如，1200 像素），您可以設置行的大小（您可以通過 Theme Customizer 設置行的默認寬度）。

Divi 還允許您創建一個空白頁面（沒有頁腳和側邊欄）。 但是，您需要通過 Gutenberg 設置面板而不是 Divi Builder 設置面板進行設置。

- 自定義定位

自定義定位允許您將元素放置在設計的任何位置。 使用此功能，您可以實現一定的設計佈局。 這是示例：

正如您在上面的屏幕截圖中看到的那樣。 中心區域的圖像周圍有五個元素。 由於自定義定位，可以實現上述佈局。

自定義定位的工作原理是根據設備屏幕的垂直和水平位置放置元素，而不是容器。 無論是在 Elementor 還是 Divi 中，您都可以實現上述設計佈局。

– 邊距和填充

邊距和填充是設置功能，可用於設置某個元素與其周圍其他元素之間的空間。 在 Elementor 和 Divi 中，您可以設置所有元素的邊距和填充。 從部分、列到小部件（模塊）。

– Z-索引

Z-index 是一個 CSS 屬性，用於指定元素的堆棧順序。 具有較大堆棧順序的元素始終位於具有較低堆棧順序的元素之前。 Elementor 和 Divi 都允許您設置元素的 z-index 值。

- 彈性盒對齊

Flexbox 對齊允許您在一個部分的每一列中垂直或水平對齊和分佈元素。

在 Elementor 中，您可以從設置列設置 flexbox 對齊方式。 您可以選擇內置的設置選項，如下所示：

Divi 還支持 flexbox 對齊。 但是需要添加一定的CSS代碼，對於初學者來說比較麻煩。 特別是對於那些沒有 CSS 知識的人。

- 內聯定位

內聯定位允許您將兩個元素並排放置在列內。 看看下面的截圖。

如您所見，有兩個按鈕並排放置。 這些按鈕——以及它們上面的圖像——在同一列中。 由於內聯定位功能，可以實現上述設計佈局。

在 Elementor 中，您可以毫不費力地設置元素的內聯定位，因為 Elementor 有一個內置的設置選項可以做到這一點。 在 Divi 中，您需要添加 CSS 代碼來設置元素的內聯定位。

響應式設計

– 自定義斷點

每個設備上的網頁佈局都不同。 它遵循屏幕設備的大小。

在 Elementor 和 Divi 中，您可以在三種設備類型（台式機、平板電腦和設備）上優化設計佈局。 如果您想針對具有特定屏幕尺寸的設備（例如，大屏幕桌面）優化您的設計怎麼辦？

在 Elementor 中，您可以添加自定義斷點，如果您需要針對具有特定屏幕尺寸的設備類型優化設計，這將非常有用。 添加新的自定義斷點後，您將在編輯器上有一個新的設備選項來優化您的設計。

與 Elementor 不同，Divi 沒有添加自定義斷點的原生功能。 您只能針對編輯器上可用的默認設備類型優化您的設計：台式機、平板電腦和智能手機。

供您參考，以下是設備類型的屏幕尺寸：

• 寬屏：2400px
• 桌面：1209px
• 筆記本電腦：1025px
• 平板電腦：881 像素
• 手機（智能手機）：360px

- 反向列

當您有一個包含兩列（或更多列）的部分時，第一列（最左側）將放置在移動設備的頂部。 看看下面的動畫 GIF。

出於某種原因，您可能希望將第二列放在頂部。 在 Elementor 中，由於內置的列反轉功能，您可以毫不費力地實現它。

Divi 還允許您在部分上設置列反轉。 但是，您需要處理 CSS 代碼。

- 顯示/隱藏元素

使用 Elementor 或 Divi 創建響應式設計時，由於屏幕區域有限，並非所有元素都需要在移動設備上顯示。 無論是 Elementor 還是 Divi，您都可以在特定設備類型上隱藏某個元素（部分、列或小部件/模塊）。

動作和交互

- 滾動效果

滾動效果允許您為基於頁面滾動的元素添加一個或多個效果。 這意味著效果只會在頁面向下或向上滾動時發生。 Elementor 和 Divi 都具有此功能。 您可以將以下滾動效果應用於您的設計：

滾動效果可以應用於部分、列和小部件/模塊。

- 鼠標效果

鼠標效果允許您為設計中的某個元素添加額外的效果，從而根據光標的移動產生效果。 Elementor 具有此功能，而 Divi 沒有。

您可以在 Elementor 中應用兩種鼠標效果：Mouse Track 和 3D Tilt

- 懸停動畫和 CSS 變換

想要添加僅在鼠標懸停時發生的效果？

Elementor 和 Divi 帶有內置的懸停效果，您可以使用這些效果將懸停效果應用於部分、列和小部件/模塊。 例如，您可以對處於正常狀態和懸停狀態的圖像應用不同的不透明度級別。 您還可以毫不費力地添加懸停效果，如收縮、脈衝等。

此外，Elementor 和 Divi 還帶有 CSS 變換，您可以將其應用於兩種狀態（正常和懸停）。

- 入口和出口動畫

入口和出口動畫是頁面構建器上可用的標準功能。 在 Elementor 中，您有十多種進出動畫可供選擇。 在 Divi 中，您只有七個選項（淡入淡出、滑動、反彈、縮放、翻轉、折疊和滾動）。 無論是 Elementor 還是 Divi，您都可以設置動畫的速度。

– 視差

視差是指以比前景更慢的速度移動的背景行為。 您可以將視差應用到部分和列。

Divi 僅提供一種視差效果，而 Elementor 提供以下六種視差效果：

• 垂直滾動
• 水平滾動
• 透明度
• 模糊
• 旋轉
• 規模

- 粘性效果

使用粘性效果，您可以將元素設置為在頁面向下滾動時始終可見。 該功能在使用主題生成器創建自定義標題時特別有用。

Elementor 和 Divi 都允許您向元素添加粘性效果。 您可以將元素設置為粘在底部還是頂部。 您還可以設置要應用的粘性效果的偏移值。

底線

Elementor 和 Divi 是創建 WordPress 網站項目的絕佳工具。 由於廣泛的設計功能，它們允許您以更少的努力創建漂亮的網站。 無論是在 Elementor 還是 Divi 中，您都可以輕鬆設置元素之間的填充和邊距、設置大小、應用動畫效果等等。 所有更改都在編輯器上實時應用。 此外，由於兩者提供的響應式編輯功能，您還可以在任何設備類型上優化您的設計。

在選擇要用於項目的頁面構建器之前，您可能需要先了解兩者提供的詳細功能。

正如您在上面所讀到的，Elementor 和 Divi 都具有相似的設計特徵——在一些細節上有所不同。 例如，Elementor 允許您設置全局排版設置，而 Divi 不允許。 相反，Divi 允許您創建多色漸變，而 Elementor 僅允許您創建最多兩種顏色的漸變。 無論您最終選擇哪個選項，請確保它們能夠滿足您完成項目的需求。