清徐站点建设：如何用Divi重新创建颜色过滤器、效果和混合模式示例(第2部分)

欢迎来到这个2部分系列的最后一部分关于清徐站点建设如何重新创建我们的颜色过滤器，效果，和混合模式的例子与Divi。你可以看看我们的过滤器演示页看看这些例子，来了解我们将一起创造什么。

在上一篇教程中，我重新创建了过滤器演示页面的#1、#2和#3部分。我强调了如何使用光度，乘法和叠加混合模式，结合一些过滤器和效果，以创建一些鼓舞人心的例子。我很兴奋能跳到右边，在我们停下来的地方结束。

今天，我将向您展示如何重新创建演示的第4和第5节，并突出显示在这些部分中使用的不同的过滤器、效果和混合模式(如包含模式和屏幕模式)。我甚至将回顾如何使用过滤器和效果的地图和视频模块。

我们开始吧。

潜峰

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

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

第4节

混合模式：排斥
使用的过滤器和效果：色调、饱和度、倒置

本节使用排除混合模式与过滤器和效果相结合，以便为不牺牲过多饱和度的背景图像创建一致的灰色颜色。这是一个很好的选择，当您想要维护背景图像的细节时，可以使用覆盖背景。排除在标志上的混合绝对是一个突出的方式，它显示了一个较轻的版本背景颜色。这是你建造它的方法。

增加一个经常科

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

同时，选择使用视差效应以“是”并使用真视差方法。

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

保存设置

编辑行

在您的节背景图像就位后，让我们将行跨度设置为该节的全部宽度，并添加一个背景颜色以用于我们的排除混合。去行设置并更新如下：

内容标签…
背景颜色：#00ffaa

在设计选项卡…下

使用自定义宽度：是
单位：%
定制宽度：100%
自定义填充：288 px顶部，0 px右，288 px底部，0 px左
色调：208度
饱和度：0%
倒置：100%

滤镜和效果突出：倒置滤光器基本上是用彩色轮的另一端的颜色来代替颜色。这就是为什么当你倒置白色时，你会变黑。

混合模式：排斥

混合模式突出显示：排除混合模式基本上从顶层减去底层，将不同的颜色倒置，用灰色替换相似的颜色。在本例中，添加到行中的绿色背景色将在某些地方被去掉，并与其后面的部分背景中的颜色倒置。

添加Logo图像

请记住，您在行中添加的任何内容都将继承在行设置中设置的混合模式。
(在这种情况下，是排除混合模式)。让我们在一列行中输入一个图像模块，然后将徽标添加到该部分的中心。在“内容”选项卡下您的图像设置上传您的徽标图像。这是我用的那个：

在设计选项卡…下
图像对齐：中心
动画：滚动
动画强度：31%
动画启动透明度：100%

正如你所看到的，黑色标志是通过“取消”其背后的任何黑色来继承排斥混和的，其结果是标志的背景更加明亮。凉爽的!

第四部分就是这样。

第五节

混合模式：屏风
使用的过滤器和效果：饱和度、亮度和对比度

这部分清徐站点建设可能是我最喜欢的设计。我可能错了，但这看起来可能需要设计师几个小时，而不是几分钟。我情不自禁地想到这会给自由职业者带来的价值，他们在设计方面挣扎着(就像我一样)。这里的亮点是屏幕混合模式，它将下面的层相乘，并产生比我们在第2节中看到的混合模式更轻的混合模式。这里是如何建造它。

创建一个常规科

创建一个带有2列(1/2 1/2)行的常规部分，并推迟添加任何模块，这样我们就可以更新我们的节设置。

由于我们在演示过程中一直使用相同的基本设计设置，让我们继续使用右键单击选项，复制上一节的样式并将其粘贴到我们的新部分中。现在我们要做的就是改变背景图像。这是我用的…

编辑行

现在我们已经完成了我们的部分，让我们继续编辑我们的行设置。

在Content选项卡下…
第1栏背景颜色：#ffffff
在“设计”选项卡…下
全宽行：是的
使用自定义水槽宽度：是
排水沟宽度：1
等分柱高：是
自定义填充：0 px顶部，0 px右，0 px底部，0 px左
第1栏自定义填充：40 px顶部，40 px右，40 px底部，40 px左

混合模式：屏幕

混合模式突出显示：屏幕混合模式类似于多重混合模式，但它没有显示混合图像的更深的版本，而是显示了更轻的版本。如果在编辑设置时在乘法和屏幕之间切换，这是很明显的。

保存设置

在左列添加文本模块具有以下标题：

<h2>The Only Tool You'll Ever Need</h2>

更新选项在“设计”选项卡…下
选择H2选项卡
标题2字体：Lato
标题2字体重量：沉重
标题2文本对齐：中心
标题2文本大小：9 vw(桌面)、16 vw(平板电脑)、40 px(智能手机)
标题2字母间距：-0.02em

添加按钮

让我们看看，当您添加一个按钮时，屏幕混合模式被选中。在当前文本模块下添加一个按钮模块在“内容”选项卡中输入按钮文本“下载”。

在设计选项卡…下
按钮对齐：中心
为按钮使用自定义样式：是
按钮文本大小：24 px
按钮文本颜色：#ffffff
按钮背景颜色：#a 58461
按钮边框宽度：0 px
按钮字母间距：4PX
按钮字体：Lato
字体重量：重
字体样式：大写(TT)
显示按钮图标：不
按钮遮挡背景色：#000000
按钮Hover字母间距：4PX

自定义页边距：80 px顶部
自定义填充：12 px顶部，24 px右，12 px底部，24 px左

在右列中添加第二个图像

现在，我们准备好了右边列中的第二个图像。在右边的列中添加一个图像模块上传图片在“内容”选项卡下.

在设计选项卡…下
力全宽：是
饱和度：0%
亮度：113%
对比：173%

滤镜和效果突出：亮度只是调整颜色的亮度。对比度控制着不同的光线和黑暗区域的区别；所以，如果你增加对比度的百分比，它会使光线区域变浅，黑暗区域变暗。

在地图和视频上使用过滤器选项

过去，地图和视频模块的设计选择有限。这在很大程度上是因为它们都是嵌入的。地图模块嵌入谷歌地图，视频模块嵌入视频。改变谷歌地图的颜色需要一些高级代码才能让它看起来像你想要的那样。虽然您可以在编辑过程中调整您自己的视频上的颜色设置，但当视频已经创建并嵌入到您的页面上时，这并不容易。但是这些过滤器选项增加了一个强大的设计工具，让你对前面的颜色设置有一些控制。

学习如何在这些模块中使用这些过滤器的最好方法是自己尝试一下。如果您刚刚开始，这有点像调整您的电视或显示器上的显示设置。有时候你得玩它才能让它和你喜欢的完全一样。

注意：您可能会注意到，MapModule在映射设置设计选项卡中有两组过滤器。这是因为一组控制映射的过滤效果，而不更改引脚。另一组也控制引脚。

如果您感到困惑，并想了解更多关于所有这些混合模式和过滤效果的信息，您可以查看以下链接：

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

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

跨浏览器兼容性

视觉构建器中的混合模式选项使用混合模式CSS属性来创建混合效果。混合模式css属性为大多数浏览器都支持。IE目前不支持它，Safari内部也有一些限制。

生成器的筛选器效果使用FilterCSS属性，即几乎所有浏览器都支持(甚至边缘)然而，IE仍然不受支持。

包起来

我希望你喜欢这个两部分的系列。我写这篇文章的首要目标是向你介绍新的设计方案，这将激励你创建更好的网站。这里使用的例子并不是作为一个整体来考虑的，而是作为一个单独的片段来激发您的想象力来探索各种可能性。我选择不处理演示页面上的所有部分，仅仅是因为其他部分使用了相似的混合和过滤技术，并且我不想让帖子超载。

在我走之前，我想鼓励你们熟悉这些混合模式和过滤器。他们可能会变得有点困惑，但我发现，即使是对这些选项的基本理解，将节省时间，并有助于创造过程。

一如既往，我期待着在清徐站点建设评论中听到你的意见。