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 仅允许您创建最多两种颜色的渐变。 无论您最终选择哪个选项，请确保它们能够满足您完成项目的需求。