WordPress divi主题

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

by | Apr 30, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

特色插件现已在 Divi 市场上出售

Divi Background Plus 可在 Divi Marketplace 购买! 这意味着它已通过我们的审查,并符合我们的质量标准。 您可以在市场上访问 Superfly 以查看他们所有可用的产品。 从 Divi Marketplace 购买的产品具有无限的网站使用和 30 天退款保证(就像 Divi)。

google广告开户

在 Divi 市场购买

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

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

让我们开始吧。

抢先看

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

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

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

标准 Divi 视差和视频背景

标准 Divi 视差和视频背景

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

WordPress divi主题

标准 Divi 视差和视频背景

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

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

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

安装 Divi Background Plus

安装 Divi Background Plus

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

安装 Divi Background Plus

在您的 WordPress 仪表板中,转到 插件 并选择 添新. 点击 上传插件 在屏幕顶部。

安装 Divi Background Plus

选择 选择文件,导航到计算机上的压缩文件,选择文件,然后单击 现在安装.

安装 Divi Background Plus

fiverr建站WordPress程序员

文件上传后,点击 激活插件. 无需其他设置。 该插件现在可以使用了。

安装 Divi Background Plus

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

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

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

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

独立站选品工具

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

在内容设置中打开图像选项卡。 使能够 使用视差效果. 我正在使用 True Parallax,这是默认设置。 CSS Parallax 也可以。

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

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

如果您想使用已用于本节的相同渐变(就像我一样),请选择渐变选项卡并右键单击渐变上的某个位置。 点击 复制背景渐变颜色.

高质量外链购买

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

选择以将新模块添加到带有背景图像的部分,然后选择 迪维背景加.

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

在里面 布局 内容选项卡中的设置,选择将设置应用到部分、行或列。 我在选择 部分.

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

JasperAI 10000字免费额度试用

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

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

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

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

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

WordPress备份工具updrafplus

为 Divi 视频背景添加颜色叠加

为 Divi 视频背景添加颜色叠加

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

为 Divi 视频背景添加颜色叠加

我计划使用号召性用语部分的文本。 使用 Divi 的图层工具很容易做到这一点。 为此,请右键单击要复制的部分并选择 转到图层.

为 Divi 视频背景添加颜色叠加

右键单击要复制的行并选择 复制行.

为 Divi 视频背景添加颜色叠加

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

为 Divi 视频背景添加颜色叠加

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

为 Divi 视频背景添加颜色叠加

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

为 Divi 视频背景添加颜色叠加

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

为 Divi 视频背景添加颜色叠加

向下滚动到背景选项卡并选择颜色选项。 当然,您的颜色会因您的视频而异。 我想给视频一个红色的色调。 我用过:

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

这是手机上的相同布局。

为 Divi 视频背景添加颜色叠加

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

为 Divi 视频背景添加颜色叠加

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

设置部分分隔线的样式

设置部分分隔线的样式

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

设置部分分隔线的样式

转到设计选项卡,选择 分隔线并选择 最佳 或者 底部,具体取决于您要添加分隔线的位置。 我只在底部添加了一个分隔线。 单击标记为的下拉框 分隔线样式 选择你的分隔线。

设置部分分隔线的样式

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

设置部分分隔线的样式

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

设置部分分隔线的样式

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

结果

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

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

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

结束的想法

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

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

我们希望收到你的来信。 您是否使用 Divi Background Plus 为您的视差图像和视频创建了颜色和渐变叠加? 在评论中让我们知道您对此的看法。

特色图片来自 Lauritta / shutterstock.com

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题