Divi 插件亮点：Divi Background Plus

Divi 有很多背景功能。 您可以添加纯色背景、渐变、图像或视频。 由于图像混合，图像特别有趣，您可以在其中使用纯色或渐变作为叠加层。 但有一个问题是这不适用于视差。 另一个问题是视频根本没有覆盖。

如果您想添加叠加层和视差，则必须使用 CSS。 这可行，但必须手动完成，这意味着所有调整都在代码中完成，这需要更长的时间来处理。 您不希望大多数客户更改您的代码。 幸运的是，有一种更简单、更安全的方法可以解决这个问题。

第三方插件叫 Divi 背景加 为两者添加叠加层。 使用此插件，您可以为视频添加叠加层，并为视差图像添加叠加层。 在这篇文章中，我们将看看 Divi 背景加 看看它能做什么。

您可以在开发者的网站上购买该插件。

安装 Divi Background Plus

首先，解压缩下载的文件。 该文件中包含自述文件和插件的 zip 文件。 自述文件提供了一些关于安装和入门的简短说明。 上传并激活名为 divi-background-plus 的文件。 不需要其他设置。

Divi 背景加模块

一个名为 Background Plus 的新模块被添加到 Divi Builder 中。

该模块包括一个 内容 选项卡和一个 先进的 标签。 “内容”选项卡包括布局级别（选择部分、行或列之间的级别以放置叠加层）和背景（具有标准颜色、渐变、图像和视频选项）的设置。 高级选项卡包括标准的自定义 CSS 功能。

Divi Background Plus 是与背景配合使用的叠加模块。 换句话说，您的背景图片或视频放置在部分、行或列中，而这个新模块会在其上添加一个叠加层。 因此，背景图像或视频位于一个位置，而叠加层位于另一个位置。 如果您知道如何使用颜色和渐变叠加层，那么您已经知道如何创建该模块将生成的叠加层。

要使用 Background Plus 模块，首先要确定要放置图像或视频背景的位置。 您可以将其放置在部分、行或列中。 接下来，将 Background Plus 模块放入该部分、行或列中。 在 布局层次 设置，选择您要定位的背景位置。 让我们来看看。

Divi 背景加图像示例

在这里，我将背景图像放在一行中。 我启用了视差效果并选择了 CSS 作为视差方法。

这是没有叠加层的图像。 这是一个视差图像，正如我们所期望的那样工作。

接下来，我放下了一个 背景加 该列中的模块。

在 背景加 设置 我为级别选择了行并创建了渐变背景。 我将梯度方向更改为 118 度。 我们也可以使用纯色而不是渐变。

我们现在在视差背景上有一个叠加层。 我将在叠加层中添加一些文本，然后我们将看到它的实际效果。

这是文本模块。 我已将它们放在右栏中。 由于 Background Plus 模块在其列位置不显示任何内容，因此看起来好像什么都不存在。 我在右行的左侧添加了填充，将文本从左侧推到一点。 或者我可以使用一列而不是两列。

我减小了图像大小以保持文件较小，但您可以在此处看到图像仍然作为渐变和文本叠加层后面的视差背景。

你了解我和我的好奇心。 我得看看有没有两个 背景加 模块可能会影响相同的背景图像。

第一个模块在左侧使用不透明度为 80% 的红色渐变，在右侧使用透明渐变。 我将起始位置设置为 8%，将结束位置设置为 33%。

下一个模块在左侧使用透明渐变，在右侧使用 74% 不透明度的蓝色渐变。 它使用 56% 的开始位置和 100% 的结束位置。

结果是具有两个叠加层的视差背景 – 每侧一个，颜色不同，中间没有叠加层。 叠加层创造了一个有趣的角度。

对于这个，我将左侧渐变的开始和结束位置更改为 33%。

我将右侧渐变的开始和结束位置更改为 87%。 我还将渐变方向更改为 72 度。 这意味着红色和蓝色将是不对称的（这可能会让我的眼睛抽搐，但无论如何我们都会尝试）。

很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务

结果创建了一条锐线，因此更容易看到渐变。 这个背景仍然存在视差。 因此，您可以在视差中对同一背景图像使用两个模块。 我没有看到对页面速度的影响。

Divi 背景加视频示例

我在一行中添加一个背景视频，并将文本作为叠加层。 由于视频背景本身没有视差选项，因此即使使用 Divi Background Plus 我们也无法创建视差视频背景。 然而，向视频添加叠加层的能力仍然为我们提供了很多设计可能性。

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱？可以免费试用Shopline智能建站工具，一个月都不要一顿火锅的钱！（这里就可以在线申请！） 或者扫描下方二维码

这是带有文本的背景视频的屏幕截图。 文字很难读。 通常我会在文本后面添加背景，但这可能很难获得您想要的外观。

我使用纯色在视频上添加了一个叠加层。 我使用不透明度为 50% 的黑色。

对于这个例子，我创建了一个渐变并将渐变类型更改为具有中心径向方向的径向。 起始位置为 41%，结束位置为 100%。 我将第一种颜色设置为黑色，不透明度为 80%。 第二种颜色是浅灰色，不透明度为 40%。

结果在中心放置了一个黑点，使文本突出。

现在我要添加一个红色覆盖层。 左边的颜色使用 80% 的不透明度，而右边的颜色有 56%。 我已将渐变类型设置回线性，并将方向设置为 162 度，开始位置设置为 42%，结束位置设置为 75%。

它创建了一个浓红色，在渐变范围内有变化。

当然我不得不尝试两个 背景加 带视频的模块。 这次我将背景视频移动到该部分并用背景定位它，然后放置另一个定位文本模块的行。

对于针对该部分的模块，我在左侧放置了红色，在右侧放置了蓝色，两者的不透明度均为 70%。 梯度方向为162度，起始位置为40%，结束位置为60%。

对于以行为目标的模块，我创建了一个与该部分的渐变相反的渐变。 它在左侧使用蓝色，在右侧使用红色，两者的不透明度均为 70%。 渐变方向为 158 度，起始位置为 0%，结束位置为 100%，以创建更柔和的颜色混合。 对于行设置，我在所有边上添加了 50 像素的填充并添加了一个框阴影。

其结果是叠加层叠加显示背景视频。

将 Divi Background Plus 与 Extra 一起使用

所有设置与 Divi 背景加 是标准的 迪维生成器 设置，它适用于 额外的. 这是上面示例中背景视频的屏幕截图。 所有设置仍然存在。 叠加层上的叠加层允许背景视频按预期浏览。

Divi Background Plus 许可证和文档

该插件售价 10 美元，您可以在任意数量的网站上使用它。 文档以下载文件中的文档形式提供（尽管实际上并不多），并以发布者产品页面上的视频演练形式提供。 我强烈建议您观看视频，因为它演示了插件的运行情况。

结束的想法

Divi Background Plus 开启了一些有趣的设计可能性。 它易于使用——如果您知道如何使用颜色、渐变、图像和视频的背景设置，那么您已经具备使用此插件的技能。 唯一的区别是这个插件创建了一个与背景分开的叠加层。 如果您有兴趣在视差图像或视频上创建背景叠加，这个插件值得一看。

我们希望收到你的来信。 您是否尝试过 Divi Background Plus？ 在评论中让我们知道您的想法。

特色图片来自 Lepusinensis / shutterstock.com