使用 Divi 的新列过滤器设置创建令人惊叹的混合效果

Divi 的新列过滤器设置可以以多种创造性方式使用。 在这篇文章中，我们将向您展示如何将一个主行背景图像与列内容混合。 我们将为模块添加不同的颜色渐变和列“屏幕”混合模式以创建令人惊叹的效果。 我们希望这个设计能激发您在下一个 Divi 项目中使用列混合模式。 您也可以免费下载 JSON 文件！

让我们开始吧！

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载列混合模式布局

要了解免费的列混合模式布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

让我们开始重建吧！

订阅我们的 YouTube 频道

添加具有 3 列行的新部分

通过添加具有三列行的新部分来开始设计。

截面间距

打开部分设置并调整间距。

• 左右边距：3vw
• 顶部和底部填充：84px

行设置

背景

在添加任何模块之前，我们将修改行设置。 首先添加背景颜色。

• 背景颜色：中灰色#c4c4c4

然后，上传背景图像并使用混合模式将背景颜色与图像混合。

• 背景图像混合：相乘

浆纱

调整下一行的大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡列高：是
• 宽度：100%
• 最大宽度：100%

间距

也删除默认的行填充。

• 顶部和底部填充：0px

盒子阴影

继续向该行添加一个简单的框阴影。

• 框阴影：第一个选项

能见度

在可见性选项卡中调整 Z 索引。

• Z 指数：1

样式列 1

输入第一列的设置。

过滤器

将屏幕混合模式应用于过滤器选项卡中的列。

• 混合模式：屏幕

悬停变换比例

进入变换选项组并修改悬停变换比例设置。

• 变换比例：x 轴和 y 轴均为 105%

能见度

进入列的可见性选项卡并调整溢出设置。

• 水平溢出：可见
• 垂直溢出：可见

过渡

移至过渡选项卡并调整过渡持续时间以创建平滑过渡。

• 转换持续时间：500 毫秒

将文本模块添加到第 1 列

每列包含三个文本模块。 使用您选择的一些 H2 内容将第一个文本模块添加到第 1 列，并按如下方式调整设置。

背景

使用颜色渐变为背景设置样式。

• 背景：渐变
• 渐变色一：#5498ff
• 渐变色二：#16fff3
• 梯度方向：235度
• 起始位置：37%

间距

接下来添加一些自定义间距值。

• 顶部和底部填充：6vw
• 左右填充：3vw

标题文字

输入标题文本设置并相应地设置 H2 文本设置的样式：

• 标题 2 字体粗细：超粗体
• 标题 2 字体样式：TT
• 标题 2 文字颜色：黑色 #oooooo
• 标题 2 文字大小：
  • 台式机：5vw
  • 平板电脑：11vw
  • 电话：13vw
• 标题 2 行高：
  • 台式机：4.3vw
  • 平板电脑：9vw
  • 电话：10.5vw

过滤器

转到过滤器设置并添加屏幕混合模式。

• 混合模式：屏幕

将第二个文本模块添加到第 1 列

继续将第二个文本模块添加到第 1 列，其中包含您选择的一些段落内容。

样式文本模块如下：

背景

添加白色背景色。

• 背景颜色：白色#fffffff

文本

进入设计选项卡并相应地调整文本：

• 文字字体：蒙特塞拉特
• 文本对齐：两端对齐
• 文字颜色：深灰色 #333333
• 字体大小：
  • 台式机：0.8vw
  • 平板电脑：2vw
  • 电话：2.5vw
• 文字字母间距：-0.04vw
• 文本行高：
  • 台式机：2.7vw
  • 平板电脑：5.5vw
  • 电话：6vw

间距

调整间距设置以在文本周围创建空白空间。

• 上下边距：0.5vw
• 顶部和底部填充：
  • 台式机：5vw
  • 平板电脑 + 手机：15vw
• 左填充：5vw
• 右填充：
  • 台式机：5vw
  • 平板电脑 + 手机：25vw

过滤器

最后但并非最不重要的一点是，在过滤器选项卡中应用屏幕混合模式。

• 混合模式：屏幕

将第三个文本模块添加到第 1 列

要完成列设计，请添加带有一些 CTA 副本的第三个文本模块。 我们将整个模块用作按钮。

样式模块如下：

添加链接

在链接设置中添加您选择的链接。 只要有人点击模块上的任何地方，他们就会被重定向到其他地方。

背景

设置背景渐变样式以匹配第一个文本模块。

• 背景：渐变
• 背景渐变色一：#5498ff
• 背景渐变颜色二：#16fff3
• 梯度方向：235度

文本

进入设计选项卡并按如下方式设置文本样式：

• 文字字体：蒙特塞拉特
• 文字字体粗细：重
• 文本字体样式：下划线
• 文本下划线颜色：白色#ffffff
• 文字颜色：黑色#000000
• 字体大小：
  • 台式机：1.5vw
  • 平板电脑：3.3vw
  • 电话：4vw
• 文本行高：1em

间距

调整间距设置，使文本更适合模块。

• 顶部和底部填充：
  • 台式机：2vw
  • 平板电脑：6vw
  • 电话：9vw
• 左填充：3vw

将第一列复制两次

完成第一列后，打开行设置并删除第二列和第三列。 然后，将第一列复制两次。 当然，我们需要对第 2 列和第 3 列中的模块进行一些更改。

第 2 列/文本模块 1 背景

• 背景渐变色一：#c870ff
• 背景渐变颜色二：#ff355a

第 2 列/文本模块 2 框阴影

• 方框阴影：第六个选项
• 框阴影模糊强度：20px
• 框阴影传播强度：17px
• 框阴影颜色：rgba(225,33,255,0.06)

第 2 列/文本模块 3 背景

调整第三个文本模块的背景渐变以匹配第一个模块。

• 背景渐变色一：#c870ff
• 背景渐变颜色二：#ff355a

第 3 列/文本模块 1 背景

进入第三列！ 相应地更改文本模块 1 的渐变背景：

• 背景渐变色一：#ff4800
• 背景渐变颜色二：#fc9a2a

第 2 列/文本模块 3 背景

• 背景渐变色一：#ff4800
• 背景渐变颜色二：#fc9a2a

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

这是一个包裹

在这篇文章中，我们向您展示了如何使用 Divi 的列设置创建具有惊人混合效果的三列设计。 我们结合了模块、列和行设置来实现您可以在您创建的任何网站上使用的精美结果。 我们希望本教程也能激发您创建自己的替代设计。 如果您有任何问题或建议，请务必在下方评论区留言！