下载并使用 6 个免费的 Divi 模块分隔器

到目前为止，我们都已经习惯了 Divi 中包含的部分分隔符。 在过去的教程中，我们还向您展示了如何将这些部分分隔符应用于模块和行。 但是如果你想使用只连接到模块而不是其他设计元素的模块分隔器，这篇文章适合你。 我们将分享 6 个免费的模块分隔器，您可以将它们用于您构建的任何类型的 Divi 网站。 这些模块分隔符将包含在一个插画文件中，您可以在这篇文章中进一步下载该文件。 本教程还将帮助您创建自己的模块分隔符。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下您可以下载的 6 种不同的模块分隔器，以及它们在不同屏幕尺寸上的外观。

桌面

电话

免费下载模块分隔线

要将您的手放在模块分隔器上，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您将在每周一和周五收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

让我们开始吧！

订阅我们的 YouTube 频道

在 Illustrator 中更改分隔线颜色

在下载的文件夹中打开 Illustrator 文件

在本教程的第一部分，我们将准备我们需要的模块分隔器。 在下载文件夹中，您可以找到一种特定调色板的模块分隔符。 但是，如果您想使用其他调色板，则需要使用可在下载文件夹中找到的 Illustrator 文件来创建所需的模块分隔线。

选择模块分隔线样式，解锁图层并启用可见性

打开 illustrator 文件后，继续并在图层选项卡中选择您选择的分隔线。 解锁图层并启用可见性选项，以便您可以立即开始使用。

单击模块分隔符并更改颜色

现在，根据您要为其创建分隔器的模块数量，您需要的模块分隔器数量可能会有所不同。 例如，要重新创建我们在文章开头向您展示的示例，我们需要四种不同颜色的模块分隔器。 从第一个开始，将分隔线颜色更改为白色。

• 分隔线颜色：#ffffff

为 Web 导出 PNG 模块分隔线

更改颜色后，您可以继续将图像模块保存为 Web 的 PNG 图像文件。

对所需的每种颜色重复步骤 (x4)

如前所述，您将需要各种模块分隔器。 对每种颜色重复前面的步骤。

• 颜色 1：#ffffff
• 颜色 2：#2759f6
• 颜色 3：#97adf4
• 颜色 4：#b2ceff

创建分区设计

后端预览

保存所有模块分隔符后，就可以切换到 Divi 了！ 我们正在创建的最终结果在后端将如下所示：

添加新部分

添加新页面或打开现有页面并向其添加常规部分。

添加新行

列结构

继续使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并对大小设置进行一些更改。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

将图像模块添加到第 1 列

上传白色模块分隔线

在第 1 列中，我们需要的第一个模块是图像模块。 上传您可以在下载文件夹中找到的第一个模块分隔符，或者选择您已修改为您自己的调色板的那个。

背景颜色

然后，为图像模块添加背景颜色。 此颜色需要与接下来出现的任何模块的背景颜色相匹配。

• 背景颜色：#2759f6

浆纱

然后，转到大小设置并启用“强制全角”选项。

• 强制全角：是

将 Blurb 模块添加到第 2 列

添加内容

我们在第 1 列中需要的第二个模块是 Blurb 模块。 首先添加一些选择的内容。

选择图标

然后，选择一个选择的图标。

背景颜色

继续添加用于模块分隔器图像模块的相同背景颜色。

• 背景颜色：#2759f6

图标设置

接下来，转到图标设置并进行一些更改。

• 图标颜色：#ffffff
• 图像/图标放置：顶部
• 使用图标字体大小：是
• 图标字体大小：50px

文字设置

还要修改文本设置。

• 文字方向：居中
• 文字颜色：浅

标题文字设置

也更改标题文本的外观。

• 标题字体粗细：超粗
• 标题字体样式：大写

间距

并使用自定义填充为模块创建一些空间。

• 顶部填充：50px
• 底部填充：50px
• 左填充：50px
• 右填充：50px

克隆图像模块 3 次和模糊模块两次

完成修改第一个图像模块（包含模块分隔器）和 Blurb 模块后，您可以继续克隆 Image Module 3 次和 Blurb Module 两次。 这将在后端给出以下结果：

按正确顺序放置重复项

更改重复项的顺序以确保从图像模块开始，然后是模糊模块，如下所示：

更改模糊模块重复项的背景颜色

然后，更改 Blurb 模块的背景颜色。

• 模糊模块 #2：#97adf4
• 模糊模块 #3：#b2ceff

更改图像模块中的模块分隔线

打开第一个重复的图像模块并上传您创建的第二个模块分隔符（或选择一个可以在下载文件夹中找到的分隔符）。

更改模块分隔线图像模块背景颜色（与下一个模糊模块的背景颜色匹配）

上传新的模块分隔符后，您还需要更改该图像模块的背景颜色。 确保您将此颜色与接下来的 Blurb 模块的背景颜色相匹配。

• 模块分隔符 #2：#2759f6

对剩余的两个分频器模块重复步骤

对列中剩余的两个模块分隔器重复前面的步骤，您就完成了！

• 模块分隔线 #3 背景颜色：#97adf4
• 模块分隔线 #4 背景颜色：#b2ceff

预览

现在我们已经完成了所有步骤，让我们最后看看您可以在本文开头下载的 6 种不同的模块分隔器！

桌面

电话

最后的想法

在这篇文章中，我们分享了 6 个免费的模块分隔器，您可以将它们用于您正在构建的任何类型的网站。 这些模块分隔器可以帮助您创建更有趣的设计并创建独特而有趣的模块。 如果您有任何问题或建议，请务必在下方评论区留言！