到目前为止，我们都已经习惯了 Divi 中包含的部分分隔符。 在过去的教程中，我们还向您展示了如何使这些部分分隔符应用于模块和行。 但是，如果您想使用仅连接到模块而不连接到其他设计元素的模块分隔器，那么这篇文章适合您。 我们将分享 6 个免费模块分隔符，您可以将它们用于您构建的任何类型的 Divi 网站。 这些模块分隔符将包含在一个 Illustrator 文件中，您可以在本文后面进一步下载。 本教程还将帮助您创建自己的模块分隔符。
让我们开始吧！
预览
在深入学习本教程之前，让我们快速浏览一下您可以下载的 6 个不同的模块分隔符，以及它们在不同屏幕尺寸下的外观。
桌面
电话
免费下载模块分隔符
要将您的手放在模块分隔器上，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一和周五收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
让我们开始吧！
订阅我们的 Youtube 频道
在 Illustrator 中更改分隔线颜色
在下载的文件夹中打开 Illustrator 文件
在本教程的第一部分，我们将准备我们需要的模块分隔符。 在下载文件夹中，您可以找到一个特定调色板的模块分隔符。 但是，如果您想使用其他调色板，则需要使用可在下载文件夹中找到的 illustrator 文件创建所需的模块分隔符。
选择模块分隔线样式，解锁图层并启用可见性
打开 illustrator 文件后，继续并在图层选项卡中选择您选择的分隔线。 解锁图层并启用可见性选项，以便您立即开始。
单击模块分隔线并更改颜色
现在，根据您要为其创建分隔器的模块数量，您需要的模块分隔器数量可能会有所不同。 例如，要重新创建我们在文章开头向您展示的示例，我们需要四种不同颜色的模块分隔符。 从第一个开始，将分隔线颜色更改为白色。
为 Web 导出 PNG 模块分隔符
更改颜色后，您可以通过将图像模块保存为 Web 的 PNG 图像文件来继续。
为所需的每种颜色重复步骤 (x4)
如前所述，您将需要各种模块分隔符。 对每种颜色重复前面的步骤。
- 颜色1：#ffffff
- 颜色 2：#2759f6
- 颜色 3：#97adf4
- 颜色 4：#b2ceff
创建 Divi 设计
后端预览
保存所有模块分隔符后，就该切换到 Divi 了！ 我们正在创建的最终结果在后端将如下所示：
添加新部分
添加新页面或打开现有页面并向其中添加常规部分。
添加新行
立柱结构
继续使用以下列结构添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并对大小设置进行一些更改。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
将图像模块添加到第 1 列
上传白色模块分隔线
在第 1 列中，我们需要的第一个模块是图像模块。 上传您可以在下载文件夹中找到的第一个模块分隔符，或者选择您已修改的模块分隔符到您自己的调色板中。
背景颜色
然后，为图像模块添加背景颜色。 这种颜色需要与任何模块的背景颜色相匹配。
- 背景颜色：#2759f6
浆纱
然后，转到尺寸设置并启用“强制全宽”选项。
将 Blurb 模块添加到第 2 列
添加内容
第 1 列中我们需要的第二个模块是 Blurb 模块。 首先添加一些选择的内容。
选择图标
然后，选择一个图标。
背景颜色
继续添加用于模块分隔器图像模块的相同背景颜色。
- 背景颜色：#2759f6
图标设置
接下来，转到图标设置并进行一些更改。
- 图标颜色：#ffffff
- 图像/图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：50px
文字设置
修改文本设置。
- 文本方向：中心
- 文字颜色：浅色
标题文本设置
更改标题文本的外观。
- 标题字体粗细：超粗体
- 标题字体样式：大写
间距
并使用自定义填充为模块创建一些空间。
- 上边距：50px
- 底部填充：50px
- 左填充：50px
- 右内边距：50px
克隆图像模块 3 次和模糊模块两次
完成第一个图像模块（包含模块分隔器）和模糊模块的修改后，您可以继续克隆图像模块 3 次和模糊模块 2 次。 这将在后端给出以下结果：
按正确顺序放置重复项
更改重复项的顺序以确保从图像模块开始，然后是模糊模块，如下所示：
更改模糊模块重复的背景颜色
然后，更改模糊模块的背景颜色。
- 模糊模块 #2：#97adf4
- 模糊模块#3：#b2ceff
更改图像模块中的模块分隔符
打开第一个重复的图像模块并上传您创建的第二个模块分隔符（或选择您可以在下载文件夹中找到的一个）。
更改模块分隔线图像模块背景颜色（与下一个模糊模块的背景颜色匹配）
上传新模块分隔线后，您还需要更改该图像模块的背景颜色。 确保将此颜色与接下来出现的 Blurb 模块的背景颜色相匹配。
- 模块分隔器 #2：#2759f6
对剩余的两个分频器模块重复这些步骤
对列中剩余的两个模块分隔符重复前面的步骤，您就完成了！
- 模块分隔线 #3 背景颜色：#97adf4
- 模块分隔线 #4 背景颜色：#b2ceff
预览
现在我们已经完成了所有步骤，让我们最后看看您在本文开头可以下载的 6 个不同的模块分隔器！
桌面
电话
最后的想法
在这篇文章中，我们分享了 6 个免费的模块分隔符，您可以将它们用于您正在构建的任何类型的网站。 这些模块分隔器可以帮助您创建更有趣的设计并创建独特而有趣的模块。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
