如何为 Divi 视差和视频背景添加颜色和渐变叠加

颜色和渐变叠加是出色的设计元素，可以吸引观众的注意力并使您的内容脱颖而出。 它们适用于背景图像。 将背景图像添加到部分、行或列，添加颜色或渐变叠加，然后将您的内容放在上面。 但是，一个问题是颜色和渐变叠加默认不适用于 Divi 中的视差和视频背景。

在本教程中，我们将向您展示如何使用我们市场中的第三方插件为具有视差图像或视频的背景添加颜色和渐变叠加。 我们还将看到与部分分隔符一起工作的叠加层。 这通常需要代码，但使用正确的工具，任何人都可以实现。

让我们开始吧。

抢先看

下面是我们将在本教程中构建的内容。

我正在创建一个布局，其中一个部分具有视差背景，另一部分具有视频背景。 视差背景将具有渐变，视频背景将具有单色叠加。 我们还将设置部分分隔符的样式。 我正在使用 Pizzeria Layout Pack 中的登录页面，因为，嗯，披萨。 这是它在桌面上的样子。

这就是相同设计在手机上的外观。

标准 Divi 视差和视频背景

标准的 Divi 工具允许您将背景图像和视频添加到部分、行和列，但它们的叠加是有限的。 对于背景图像，您可以添加渐变叠加，但不能为纯色添加叠加。 视频选项不包括叠加。

背景图像的选项确实包括视差，但如果您为背景图像启用视差，则叠加层将不再显示在图像上。 它已关闭，即使您已选择它来显示叠加层。

如何为 Divi 视差和视频背景添加颜色和渐变叠加

我们将使用名为 Divi Background Plus 的第三方插件为视差和视频背景添加颜色和渐变叠加。 我们还将看到如何使用此插件设置部分分隔符的样式。

安装 Divi 背景加

Divi Background Plus 可在 Divi Marketplace 中获得。 让我们看看如何开始。 首先，购买并下载 Divi Background Plus 到您的计算机。

在您的 WordPress 仪表板中，转到Plugins并选择Add New 。 单击屏幕顶部的上传插件。

选择“选择文件” ，导航到计算机上的压缩文件，选择该文件，然后单击“立即安装” 。

文件上传后，单击Activate Plugin 。 不需要其他设置。 该插件现在可以使用了。

Divi Builder 中添加了一个名为 Divi Background Plus 的新模块。 我们将使用此模块为视差广告视​​频背景创建渐变和颜色叠加。 这个插件和各部分中的背景是本教程所需要的。

将渐变叠加添加到 Divi 视差背景

打开您将上传背景图片的部分设置。 在此示例中，我将背景图像与 Pizzeria 布局包中的第一部分一起使用，但您可以将其上传到所需的任何部分、行或列。

在内容设置中打开图像选项卡。 启用使用视差效果。 我正在使用 True Parallax，这是默认设置。 CSS 视差也有效。

启用视差效果会禁用渐变，但渐变的设置仍然存在。 我们将在 Divi Background Plus 模块的设置中添加渐变，而不是在该部分的设置中使用渐变。

如果您想使用本节已经使用的相同渐变（就像我一样），请选择“渐变”选项卡并右键单击渐变上的某处。 单击复制背景渐变颜色。

选择将新模块添加到带有背景图像的部分，然后选择Divi Background Plus 。

在内容选项卡的布局设置中，选择将设置应用于部分、行或列。 我正在选择Section 。

打开背景设置并选择渐变选项卡。 自动应用默认渐变。 您可以调整不透明度以显示背景、创建自己的渐变或使用布局中的渐变。

要使用布局中的一种，请右键单击并选择粘贴背景渐变颜色。 这不仅会应用颜色，还会应用渐变类型、方向、开始位置、结束位置以及将渐变放置在背景图像上方的设置。

结果如下。 我现在有一个包含相同图像和叠加层的原始版本，但它现在以真正的视差显示背景。

以下是相同布局在手机上的外观。

将颜色叠加添加到 Divi 视频背景

在第一部分下添加一个新的常规部分。 我们将在此部分添加背景视频，为叠加添加一个 Divi 背景加模块，并添加文本模块以在叠加中显示消息、联系信息和 CTA。

我打算使用“行动呼吁”部分中的文字。 使用 Divi 的图层工具很容易做到这一点。 为此，右键单击要复制的部分并选择转到图层。

右键单击要复制的行并选择Copy Row 。

然后，选择要放置行的部分，右键单击并选择Paste Row 。 我正在为要从此部分复制的两行执行此操作。 或者，我可以复制此部分并将 Divi Background Plus 模块添加到其中。

我现在有一个带有 Divi Background Plus、几个文本模块和一个 CTA 的新部分。

接下来，将视频添加到该部分的背景中。 视频中的颜色与文本中的颜色配合得很好，但我想添加一个叠加层，使它们更加突出。 对于我的背景视频，我使用的是来自 Pexels 的免费视频 Tima Miroshnichenko's Mixed Toppings Over a Pizza。

打开 Divi Background Plus 设置并为布局选择部分。

向下滚动到“背景”选项卡并选择颜色选项。 当然，根据您的视频，您的颜色会有所不同。 我想给视频一个红色调。 我用过：

• RGBA(150,0,0,0.15)

这是带有我的红色覆盖层的背景视频在桌面上的外观。

这是手机上的相同布局。

再举几个例子，这里是标准的紫色背景，不透明度为 30%。

这是不透明度为 80% 的标准橙色。

设置分区分隔线的样式

叠加层也适用于部分分隔线。 要添加节分隔符，请打开节的设置。

转到设计选项卡，选择分频器，并选择顶部或底部，这取决于你想添加一个分频器。 我只在底部添加了一个分隔线。 单击标有分隔线样式的下拉框以选择您的分隔线。

选择您想要的分隔线样式。 我选择了第五种风格，它用两种颜色创建了一个角度。

选择编辑图标以添加自定义颜色。 这是出现在分隔线未显示的部分中的颜色。 默认颜色为白色，如上例所示。 将颜色添加为十六进制代码或从颜色选择器中选择颜色。 我正在添加颜色 #0d0d0d，这是视频下方部分中的颜色之一。

• 颜色 #0d0d0d

该视频现在在该部分的底部有一个样式分隔符。 您可以通过分隔器的透明部分看到视频，它与两个部分很好地融合在一起。

结果

让我们来看看布局在桌面和移动设备上的外观。

下面来看看桌面版。 它有一个真正的视差背景，第一部分有一个渐变叠加。 第二部分包括带有颜色叠加的背景图像和将其与下一部分分开的部分分隔符。

这是布局在手机上的外观。 所有元素都在移动设备上运行良好。

结束的想法

这就是我们对如何将颜色和渐变叠加添加到 Divi 视差和视频背景的看法。 Divi Background Plus 使它们易于构建和使用。 它适用于部分、行和列，并且很容易在它们之间进行选择。 所有的自定义都是标准的 Divi 工具和设置，所以他们很熟悉。

现在您的背景可以包含颜色和渐变叠加，而无需禁用视差和视频！

我们希望听到您的意见。 您是否使用 Divi Background Plus 为视差图像和视频创建了颜色和渐变叠加？ 请在评论中告诉我们您对此的看法。

精选图片来自 Lauritta/shutterstock.com