如何在 Divi 中将背景蒙版与部分分隔线相结合

在 Divi 中将背景蒙版与部分分隔线相结合，为已经强大的背景设计选项库增添了另一层创造力。 如果您对 Divi 的背景选项没有太多经验，那么您肯定会错过。 一个方便但功能强大的选项使您只需单击几下即可将背景蒙版添加到背景渐变（或图像）中。 除了背景选项外，部分分隔线还使用户能够增强他们的背景设计。

在本教程中，我们将向您展示如何在 Divi 中将背景蒙版与部分分隔符结合起来。 我们将为您提供有关如何使用此技术完成 Divi 部分的背景设计的分步说明。 另外，我们甚至会介绍如何通过一些简单的调整来创建一些替代设计。

享受！

抢先看

这是本教程中的设计的快速浏览。

这个概念

本教程的基本概念是结合背景蒙版和部分分隔线来创建更加独特的蒙版形状。

首先，我们添加一个背景蒙版。

然后我们添加部分分隔线以创造性的方式补充蒙版形状。

免费下载布局

要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 获得
访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为一个新
订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果你已经在
列表，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

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

下载

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

要将部分布局导入 Divi 库，请执行以下操作：

1. 导航到 Divi 库。
2. 单击页面顶部的导入按钮。
3. 在可移植性弹出窗口中，选择导入选项卡
4. 从您的计算机中选择下载文件（确保先解压缩文件并使用 JSON 文件）。
5. 然后点击导入按钮。

完成后，部分布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

要开始，您需要执行以下操作：

1. 如果您还没有，请安装并激活 Divi 主题。
2. 在 WordPress 中创建一个新页面，并使用 Divi Builder 在前端（可视化构建器）编辑页面。
3. 选择“从头开始构建”选项。
4. 现在有一块空白画布可以开始在 Divi 中进行设计！

如何在 Divi 中组合背景蒙版和分隔线

1.添加截面尺寸和间距

首先，我们将为构建器中的现有部分添加大小和间距。 我们将推迟添加一行或任何内容，以便我们可以专注于该部分的背景设计

打开该部分的设置。 在设计选项卡下，更新大小和间距，如下所示：

• 最小高度：50vw
• 内边距：0px 顶部，0px 底部

使用大众长度单位表示高度可能看起来很奇怪。 然而，由于我们将使用 VW 长度单位来调整背景元素的大小，这将确保设计在不同的浏览器宽度上流畅地缩放。

2.创建背景渐变

一旦该部分具有一定的高度，我们就可以将背景渐变添加到该部分。 这将为我们提供一些背景颜色，以便我们稍后可以展示背景蒙版和分隔线组合。

在内容选项卡下，单击背景选项下的背景渐变选项卡。 然后添加渐变如下：

• 颜色停止 1：#1a2a6c（20%）
• 颜色停止 2：#b21f1f（60%）
• 颜色停止 2：#fdbb2d（100%）

3.创建背景蒙版

现在我们有了颜色渐变，我们准备创建背景蒙版。

在背景蒙版选项卡下，更新以下内容：

• 面具：雪佛龙
• 面具颜色：#000
• 蒙版变换：反转
• 遮罩纵横比：见截图

4.添加部分背景分隔线

一旦我们的蒙版就位，我们可以通过使用部分分隔线进一步修改蒙版形状。 在此示例中，我们将在顶部和底部添加一个半圆形部分分隔线。 这将挤压背景蒙版，使其看起来更像一个花哨的箭头设计。

为此，请单击设计选项卡并添加以下分隔线：

首先，在“顶部”选项卡下添加一个顶部分隔线。

• 分隔线样式：见截图
• 分隔线颜色：#000
• 分隔器高度：10vw

接下来，在底部选项卡下添加底部分隔线。

• 分隔线样式：见截图
• 分隔线颜色：#000
• 分隔器高度：10vw
• 分频器翻转：垂直翻转

结果

这是迄今为止的结果。

调整背景选项和分隔线以获得更多设计

现在您已经有了基本的想法，我们可以轻松地使用背景选项部分分隔线来创建更多设计。

替代设计#1

对于我们的第一个替代设计，我们将旋转现有的背景蒙版并用三角形替换半圆形部分分隔线。

为此，请打开现有的部分设置，单击背景蒙版选项卡，然后更新以下内容：

• 蒙版变换：垂直翻转、旋转
• 遮罩纵横比：见截图

接下来，更新 Section Dividers 如下：

顶部分隔线

• 分隔线样式：见截图
• 分隔器高度：13vw

底部分隔线

• 分隔线样式：见截图
• 分隔器高度：13vw
• 分频器翻转：禁用

结果

这是结果。

替代设计#2

对于我们的第二个也是最后一个替代设计，我们将用 Diagonal Bars 2 Mask 替换 Chevrons Mask，并为其添加一个新的顶部分隔线，为设计添加微妙的嗖嗖声效果。

为此，请打开现有的部分设置，单击背景蒙版选项卡，然后更新以下内容：

• 面具：对角线 2
• 蒙版变换：左右翻转
• 遮罩纵横比：见截图

接下来，更新 Section Dividers 如下：

顶部分隔线

• 分隔线样式：见截图
• 分频器翻转：水平翻转

底部分隔线

• 分隔线样式：无

结果

这是结果。

最终结果

为了让您更好地了解这些背景与某些内容的外观，我添加了一个单列行，其中一个大标题位于该部分的中心。 我还为每个包含具有混合模式的图像添加了一个额外的设计。

去看一下！

要探索用于内容和图像的设置，请随时下载本教程的免费布局（见上文），其中包括每个设计。

最后的想法

为背景设计结合蒙版和部分分隔线为为这些内置蒙版创建独特形状开辟了更多可能性。 随意探索不同的组合。 希望这对您自己的网站或下一个项目会派上用场。

我期待在评论中收到您的来信。

干杯!