吕梁网站开发：如何用Divi重新创建颜色过滤器、效果和混合模式示例(第1部分)

欢迎来到我们的吕梁网站开发2部分系列如何重新创建我们的颜色过滤器，效果，和混合模式的例子与Divi。你可以看看我们的过滤器演示页看看这些例子，来了解我们将一起创造什么。

最近发布了Divi的新过滤器、效果和混合模式，您可以在VisualBuilder中拥有完整的设计工具库。现在，您不必每次都去Photoshop进行这种调整，因为这些新选项可以应用于Divi中的任何元素。我喜欢你如何在你的浏览器上进行直观的调整，而不必破坏设计过程。

今天，我将向您展示如何重新创建演示的前3部分，并突出显示不同的过滤器，效果和混合模式使用整个章节。留心整个帖子中的亮点，这将让你更深入地了解这些新选项是如何工作的。

我们开始吧。

潜峰

以下是我们今天将要创建的两个部分。

设计要素

由于我将重新创建我们的演示的例子，我将使用相同的图像和设计设置。您将需要的唯一设计元素是我将在本教程中使用的图像，我将在我们继续的过程中提供这些图像。要使用嵌入在这篇文章上的图像，只需将其从页面上拖到您选择的桌面或文件夹上即可。

除此之外，您所需要的只是Divi的更新安装，而且您可以继续使用。

如何用Divi重新创建颜色过滤器、效果和混合模式示例(第1部分)

用Divi重新创建第1节

区段要点

混合模式：光度
使用的过滤器和效果：饱和度、不透明度和模糊

本节重点介绍了光度混合模式和模糊效果的使用。其结果是一组图像，似乎浮动和一定的深度与匹配的颜色混合在一起，真正拉到一起的设计。这里是如何建造它。

创建一个常规科

我们将使用VisualBuilder从空白画布开始。您应该已经有一个列行的常规节了。首先编辑该节并更新以下内容：

在ContentTab…下面
背景渐变颜色：#1300bf，#ff00a1
梯度方向：120度

在“设计”选项卡…下
自定义填充：130 px顶部，130 px底部

保存设置

改变行列式的柱结构

现在，我们有一个行的一个列结构。将其转换为1/4半1/4列结构。

添加标题部分的文本模块

让我们为我们的部分添加一个标题。在行的中间列中插入一个文本模块，并按以下方式更新设置：

在Content选项卡下…
内容：

在“设计”选项卡…下
文本颜色：光
文本字体：Poppin
文本大小：16 px
文本线高度：2EM
文本取向：居中
选择H2选项卡
标题2字体：Poppin
标题2文本大小：56 px
标题2线高：1.3em
自定义页边距：10 px底部
动画风格：幻灯片
动画强度：20%
动画启动透明度：100%

为图像添加三列行

单击此处可直接添加上一行下的三列(1/3、1/3/3)行。这将是我们展示我们的三个形象。在行设置中，转到设计标签并更新如下：

使用自定义水槽宽度：是
排水沟宽度：2
第1栏：顶部3%，右3%，底部3%，左3%
第3栏：顶部5%，右5%，底部5%，左5%

混合模式：光度

混合模式突出显示：光度与光有关。如果你熟悉“照明”这个词，这应该不会让你感到惊讶，因为它本质上意味着点燃一些东西。以类似的方式，光度指的不是颜色的混合，而是某物的亮度。因此，如果您有一个图层或行位于一个区域的顶部，并有一个背景图像，并且您将该行设置为具有亮度的混合模式，那么它将继承下面部分的颜色，并保留或混合顶部行的亮度值。在这个例子中，原始图像的橙色和黄色被剥离掉，只有下面颜色的不同阴影被用顶层图像的保留光值显示出来。

将图像添加到第一列

在第一列中，添加一个图像模块，并在Contenttab设置下上传/插入图像。下面是我正在使用的图像(如果您想使用它，请将它拖到桌面上)：

由于为行设置的亮度混合效果，您的图像在将其添加到行列时将自动呈现新的“混合”颜色。这是因为图像包含在混合层或行中。

去设计标签并更新如下：

自定义页边距：60 px底部，-6px左侧(对于平板电脑和智能手机，取出-6px左边距)
框影：第一选择
盒影垂直位置：16 px
盒影模糊强度：100 px

饱和度：64%
不透明度：49%
模糊：4PX

滤镜和效果突出：饱和控制颜色的强度或添加多少灰色来去除某物的颜色。不透明度定义什么东西应该是透明的还是不透明的。模糊定义某物在视觉上模糊的像素值。这三个过滤器结合在一起，创造了图像坐在远处的效果。

动画风格：幻灯片
动画方向：向上
动画持续时间：1250 ms
动画强度：9%
动画启动透明度：100%

复制图像#1模块在第二列中创建第二个图像

没有必要比我们更努力地工作。因此，让我们将刚才创建的图像模块复制并通过第二列，然后单击选项右侧的RESTORE默认图标，将下面的内容还原到默认设置中。

饱和：64%(恢复为默认状态)
不透明度：49%(恢复为默认)
模糊：4PX(恢复为默认)

然后更新以下动画设置：

动画持续时间：1300 ms
动画强度：19%

保存更改

复制图像#1模块，在第三列中创建第三个图像

再次复制第一列中的图像模块，并将其粘贴到第三列中，并在“设计”选项卡中更新图像模块设置，如下所示：

饱和度：48%
不透明度：24%
模糊度：10%

效果亮点：降低不透明度值，增加模糊值，使人感觉到图像在背景中更深，因此更不易看见。

动画持续时间：1350 ms
动画强度：7%

保存设置

添加按钮

若吕梁网站开发要在三个图像下面添加匹配按钮，只需创建一个列行，添加一个按钮模块并更新以下内容：

为按钮使用自定义样式：是
按钮文本大小：14 px
按钮文本颜色：#4444ff
按钮字母间距：1 px
按钮字体：Poppin
字体重量：半粗体
按钮Hover字母间距：1 PX
自定义填充：12 px顶部，24 px右，12 px底部，24 px左

查看新的过滤效果：

第二节

下一节展示了多重混合模式，将两幅背景图像混合在一起，产生美丽的设计和视差效果。这里是如何建造它。

创建一个常规科

首先，添加一个带有一列行的新规则节。在我们添加第一个模块之前，跳到节设置中，在Content选项卡下添加一个背景图像。这是我正在使用的…

同时，选择to使用视差与真视差方法。这将创造一个凉爽的外观运动的山脉时，滚动下来的页面。

然后去设计标签并更新如下：

自定义填充：0 px顶部，0 px右，0 px底部，0 px左

编辑行设置

这里的目标是使您的行跨度达到区段的全部宽度和高度，这样行背景图像就可以与您的区段背景图像混合。为此，请编辑行的设置并向行添加新的背景图像。这是我用的…

选择以使用CSS视差方法。

现在，我们需要将行扩展到区段的全宽度，并添加我们的混合模式。我们可以在设计标签详情如下：

使用自定义宽度：是
单位：%
定制宽度：100%
定制填充：20%顶部，0 px右，20%底部，0 px左

混合模式：倍增

混合模式突出显示：乘法混合模式是此示例的亮点。这种混合模式基本上是将当前层/行(背景和文本)与下面的层(区段的山区背景)相乘。一个简单的思考效果的方法是想象两张幻灯片放在一个幻灯片投影仪上，一个放在另一个后面。如果你在一个屏幕上投影这两个图像，你会得到两者的混合，稍微暗一点。

添加标题的文本模块

现在您的行已经设置好了，继续向您的列中添加一个文本模块，并更新以下内容：

在内容设置下…
内容：

在设计设置下…
文本颜色：光
文本字体：Lato
文本字体重量：沉重
文字间距：9PX
文本定位：中心
选中此复选框可编辑h2选项卡。
标题2字体：Lato
标题2字体重量：沉重
标题2文本大小：12 vw
标题2字母间距：-0.02em
标题2线高：1.4em

看看结果。

第3节

下一节使用一些自定义的html/css，但最终的结果肯定是灵感的火花。即使没有动画，不同颜色的文字在梯度背景上的工作真的很好地一起展示了一个独特的设计选项的大文本显示。

添加带有一列行的常规区段

首先，添加一个带有一列行的新规则节。现在返回并编辑该节设置，如下所示：

在Content选项卡下…
渐变背景色：#0ac9ff，#4600 bf
梯度方向：164德克

在“设计”选项卡…下
自定义填充：0 px顶部，0 px右，0 px底部，0 px左

更新行设置

现在，我们需要稍微扩展行设置。使用以下内容更新行设置在设计标签下。

使用自定义宽度：是
单位：%
定制宽度：100%
使用自定义水槽宽度：是
排水沟宽度：3
自定义填充：200 px顶部，60 px右，200 px底部，60 px

混合模式：覆盖

混合模式突出显示：叠加混合模式是多层和屏幕混合模式的组合，当与其他层相结合时，它将使暗区(如乘)和较轻的区域(如屏幕)更暗。在本例中，您将能够看到与该部分背景混合的不同颜色字母的效果。

添加第一个文本模块

现在让我们添加一些文本。添加一个文本模块，如下所示：

在Content选项卡下…
内容：“Divi主题”

在“设计”选项卡…下
文本颜色：光
文本字体：Nunito
文本字体重量：超粗体
文本字体样式：大写(TT)
文本大小：22 px
文字间距：9PX
文本定位：中心

为大文本添加第二个文本模块

下面这个文本模块是本节的亮点。添加一个文本模块并更新以下内容：

内容：

在“设计”选项卡…下
单击H2选项卡…
标题2字体：Nunito
标题2字体重量：粗体
标题2文本对齐：中心
标题2文本大小：16 vw
标题2文本颜色：RGBA(0，0，0，0.36)
标题2：-0.2em

在高级选项卡…下
CSS类：字母间距

注：此CSS类将用于添加一些自定义CSS以添加扩展动画。

添加按钮

但是，在添加自定义CSS之前，让我们使用以下设置添加Button模块：

内容标签…
按钮文本：现在加入

在设计选项卡…下
按钮对齐：中心
文本颜色：光
为按钮使用自定义样式：是
按钮字母间距：3 px
按钮字体：Nunito
字体重量：粗体
字体样式：大写(TT)
按钮Hover字母间距：3 px
自定义填充：10 px 30 px 10 px 30 px

保存设置

将自定义CSS添加到“页面设置”模式

现在，让我们添加我们的自定义CSS动画我们的字母。打开以展开底部的“设置”菜单，然后单击以打开页面设置。在“页面设置模式”中，单击“高级”选项卡并添加以下自定义CSS：

注：在页面设置中使用自定义CSS是在不使用子主题的情况下将外部CSS添加到特定页面的方便方法。因为我们不需要这个CSS在任何其他页面，这是最有意义的。

想知道更多吗？

请查看这些链接，以获得有用的Photoshop参考资料，这些参考有助于解释过滤器、效果和混合模式之间的差异：

http：/Photoblogtop.com/Photoshop/Photoshop-混合模式-解释

https：/helx.adbe.com/premiere-pro/use/育成-modes.html

即将到来

在本教程的下一部分中，我将向您展示如何重新创建演示示例的第4节和第5节，并讨论整个过程中使用的过滤器和混合模式。希望在那里见到你！

请随意在吕梁网站开发下面添加您的评论。

直到下一次…