如何使用 Divi 的背景设置创建渐变背景叠加

在今天的教程中，我们将探索新的 Divi 背景设计功能为您的网站带来的新的优雅的可能性，更具体地说； 通过使用渐变背景叠加。

通过此新的后台更新，Divi 构建器中添加了许多新选项，这将帮助您在设计自己的或为客户的网站时满足您的需求。 这些新选项让您可以随意调整网站的外观和感觉。

在此更新发布之前，大多数更改（现在可以在 Divi 构建器中进行）必须通过自定义 CSS 代码进行。 对您的背景进行设计更改现在变得比以往任何时候都容易。 只需点击几下，您就可以为网站的所有不同部分创建漂亮的背景。

渐变背景叠加示例

我们创建了三个带有前后图像的部分，它们将向您展示新选项如何增强您的网站所反映的整体感觉，并赋予它某些“je ne sais quoi”因素。

英雄部分

这是仅添加背景图像时英雄部分的样子：

当我们将渐变背景叠加添加到上图中使用的相同背景图像时，我们的最终结果将是这样的：

模糊部分

这是使用单色背景时模糊部分的样子：

这就是当我们将渐变背景叠加添加到图案背景时最终结果的样子：

定价部分

当我们使用一种颜色（较浅和较深的色调）时，定价部分是这样的：

这就是使用渐变背景叠加后最终结果的样子：

它们中的每一个都有不同的设置，我们将准确地向您展示——并逐步向您展示如何创建这种外观，以便您可以在自己的网站上使用它。

循序渐进：英雄部分

对于这篇文章的第一部分，我们将重新创建一个英雄部分。 此示例将反映背景设计功能如何更改图像中使用的颜色。 虽然我们使用了渐变背景叠加，但我们所做的更改非常微妙。 我们结合不同颜色的天空为图像添加了较暗的色调。

开始创作

让我们首先在您的 WordPress 网站上创建一个新页面。 现在，向该页面添加一个带有全角行的标准部分。 接下来，将不同的模块放在您的行中。 我们使用了两个文本模块和一个按钮模块。

第一个文本模块设置

第一个文本模块是您的英雄部分的标题将出现的地方。在内容选项卡的文本子类别中的内容框中键入要显示的文本，然后移至设计选项卡。

在“设计”选项卡中，对“文本”子类别进行以下修改：

• 文字方向：居中
• 文字字体大小：30
• 文字字体颜色：#FFFFFF

第二个文本模块设置

现在，打开下一个文本模块并在内容框中输入文本。 接下来，转到“设计”选项卡并对“文本”子类别进行以下修改：

• 文字方向：居中
• 文字字体大小：16
• 文字字体颜色：#FFFFFF

向下滚动相同的选项卡，并将“500px”添加到“大小”子类别中的“最大宽度”，并将“2%”添加到“间距”子类别中的底部边距。

按钮设置

最后但并非最不重要的是，打开按钮模块的设置。 在“内容”选项卡的“文本”子类别中键入要链接到按钮的 CTA，然后转到“设计”选项卡。

在“设计”选项卡中，对“按钮”子类别进行以下调整：

• 为按钮使用自定义样式：是
• 按钮文字大小：20
• 按钮文字颜色：#FFFFFF
• 按钮背景颜色：rgba(0,0,0,0)
• 按钮边框宽度：2
• 按钮边框颜色：#FFFFFF
• 按钮边框半径：7

现在，打开行部分并在设计模块的间距子类别中进行以下调整：

最高利润率：15%
底边距：10%

渐变背景叠加设置

现在我们进入有趣的部分； 将渐变背景叠加添加到背景图像。 继续并打开该部分的设置。 接下来，转到背景子类别并开始添加渐变背景。

对于我们制作的示例，我们使用了以下设置：

• 第一种颜色：#3730ff
• 第二种颜色：#e02b20
• 渐变类型：线性
• 梯度方向：272deg
• 起始位置：40%
• 结束位置：100%

现在，转到背景图像选项卡并添加您选择的图像。 我们特意选择了一个包含天空的图像来增强我们试图创造的效果。

现在，向下滚动相同的选项卡。 将背景图像居中并激活背景图像混合下拉菜单中的乘法选项。 您还有很多其他选项可以帮助您达到所需的确切结果。

而且，你有最终的结果：

一步一步：模糊部分

我们将向您展示如何创建的第二个示例是简介部分。 我们希望将注意力集中在简介的内容上，这就是为什么我们没有选择繁忙的背景而是选择图案背景的原因。

本例中使用的背景图案来自 Toptal。 你可以下载你喜欢的模式，将它们用于各种目的——包括商业目的。 只是不要忘记按照他们的常见问题解答中的说明将它们记入您网站的来源。

我们还使模糊图标稍微透明，以使渐变颜色通过。 尽管每个宣传语都具有相同的设置，但通过图标显示的颜色略有不同，并且与我们使用的渐变颜色一致。

开始创作

首先将标准部分添加到新页面或现有页面。 在该部分中，我们需要一行三列。

继续在行的第一列中添加一个 Blurb 模块。 我们将在每一列中使用相同的模糊模块设置。 这就是为什么我们只需要制作一次 blurb 模块并为其他两列克隆它。

模糊设置

打开 Blurb 模块的设置，然后在内容选项卡的文本子类别中键入标题和内容。 转到“设计”选项卡并对“图像和图标”子类别进行以下调整：

• 图标颜色：rgba(255,255,255,0.36)
• 圆形图标：是
• 圆圈颜色：rgba(255,255,255,0)
• 显示圆形边框：是
• 圆形边框颜色：rgba(255,255,255,0.36)
• 图像/图标放置：顶部
• 使用图标字体大小：是
• 图标字体大小：96px

向下滚动相同的选项卡并将文本方向置于“文本”子类别中的“居中”。

继续滚动并打开标题文本子类别。 继续并使用以下设置：

• 标题字体大小：18
• 标题文本颜色：#FFFFFF
• 标题行高度：1em

现在，唯一需要更改的是正文子类别。 确保以下设置适用：

• 正文字体大小：14
• 正文颜色：#FFFFFF
• 车身线高：1.5em

不要忘记克隆 Blurb 模块两次，将它们放在其他两列中并相应地更改内容。

行设置

打开行设置并转到“设计”选项卡中的“间距”子类别。 您唯一需要做的就是将顶部和底部边距更改为“5%”。

渐变背景叠加设置

最后但并非最不重要的一点是，我们将添加带有渐变叠加的背景图像。 打开您的部分的设置，然后转到内容选项卡的背景子类别。

接下来，对渐变选项进行以下更改：

• 第一种颜色：#52009b
• 第二种颜色：#0edeed
• 渐变类型：径向
• 径向：右
• 起始位置：28%
• 结束位置：100%

转到背景选项，上传选择的图案并进行以下更改：

• 背景图片位置：中心
• 背景图像重复：重复（取决于您的模式）
• 背景图像混合：相乘

就是这样！ 你现在应该有以下惊人的结果：

循序渐进：定价部分

这篇文章的最后一个例子是定价部分。 在本节中，我们想向您展示您可以在任何地方使用渐变背景。 它不仅可以在部分中使用，还可以在列中使用。 我们将只对两列使用渐变背景，并为第二列进行渐变背景叠加。

我们这样做的原因是为了强调特色定价包。 我们使用比其他两列更强烈的颜色，我们还添加了图案背景。 这两件事相结合，增加了吸引人们使用您最想推广的特色定价套餐的几率。

开始创作

首先将新的标准部分添加到您网站上的新页面或现有页面。 该部分需要一行三列。 我们将使用的模块对于每一列都是相同的，并且包含相同的设置。 这就是为什么我们要为第一列制作它们，然后将它们克隆到其他两列。

第一个文本模块设置

将新的文本模块添加到第一列，将价格包的类型添加到内容选项卡的文本子类别中的内容框中，然后移至设计选项卡。

将以下更改应用于“设计”选项卡的“文本”子类别：

• 文字方向：居中
• 文字字体大小：24
• 文字字体颜色：#FFFFFF
• 文本行高：1.5em

向下滚动相同的选项卡并对 Spacing 子类别进行以下修改：

• 上边距：50px
• 下边距：20px

第二个文本模块设置

将另一个文本模块添加到同一列。 在“内容”选项卡的“文本”子类别中的内容框中记下包装的价格，然后转到“设计”选项卡。

在“设计”选项卡中，进行以下调整：

• 文字方向：居中
• 文字字体大小：82px
• 文字字体颜色：#FFFFFF
• 文本行高：1.1em

向下滚动相同的选项卡并将“10px”添加到底部边距。

第三个文本模块设置

对于我们的最后一个文本模块，将文本添加到内容选项卡的文本子类别中的内容框中。 然后，转到“设计”选项卡并对“文本”子类别进行以下更改：

• 文字方向：居中
• 文字字体大小：16
• 文字字体颜色：#FFFFFF
• 文本行高：1.1em

向下滚动相同的选项卡并将“33px”添加到“间距”子类别的底部边距。

按钮设置

我们将添加到此列的下一个模块是按钮模块。 在“内容”选项卡的“文本”子类别中的内容框中键入要显示的 CTA，然后移至“设计”选项卡。

在“设计”选项卡中，将“对齐”子类别中的“按钮对齐”置于“居中”，并对“按钮”子类别进行以下更改：

• 为按钮使用自定义样式：是
• 按钮文字大小：13
• 按钮文字颜色：#FFFFFF
• 按钮背景颜色：rgba(255,255,255,0.11)
• 按钮边框宽度：2
• 按钮边框颜色：#FFFFFF
• 按钮边框半径：4
• 按钮字母间距：1

分隔线设置

最后，我们将向列添加分隔线以创建空间。 在“内容”选项卡中选择“不显示分隔线”，然后转到在高度字段中放置“25px”的设计选项卡。

既然我们已经添加了所有模块，请确保克隆它们并将它们也放在其他列中。

渐变背景叠加设置

对于此示例，我们将为不同的列使用两种不同的背景设置。 第一列和最后一列相同，第二列略有不同。

转到行设置并将以下更改应用于“内容”选项卡的“背景”子类别中第一列和第三列的渐变选项：

• 第一种颜色：rgba(10,122,178,0.57)
• 第二种颜色：rgba(142,0,142,0.47)
• 第 1 列渐变类型：径向
• 第 1 列径向：左上角
• 第 1 列起始位置：0
• 第 1 列结束位置：100%

接下来，转到第 2 列并对梯度选项进行以下更改：

• 第一种颜色：#0a7ab2
• 第二种颜色：#8e008e
• 第 2 列梯度类型：线性
• 第 2 列梯度方向：180 度
• 第 2 列起始位置：0
• 第 2 列结束位置：100

转到背景图片选项，上传背景图片并更改设置：

• 第 2 列背景图像位置：左上角
• 第 2 列背景图像重复：重复
• 第 2 列背景图像混合：相乘

最后的想法

我们在这篇博文中向您展示的示例只是您在使用新的背景设计功能时可以获得的结果的一小部分。 在即将发布的帖子中，我们肯定还会处理其他示例，这些示例将帮助您为您制作的网站创建出色的设计。 如果您有任何问题、意见或建议； 在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！