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

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

让我们开始吧！

预览

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

桌面

移动的

免费下载列混合模式布局

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

让我们开始重建吧！

订阅我们的 Youtube 频道

添加具有 3 列行的新部分

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

截面间距

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

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

行设置

背景

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

• 背景颜色：中灰色#c4c4c4

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

• 背景图像混合：相乘

浆纱

接下来调整行的大小设置。

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

间距

也删除默认的行填充。

• 顶部和底部填充：0px

盒子阴影

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

能见度

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

样式栏 1

输入第一列的设置。

过滤器

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

悬停变换比例

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

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

能见度

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

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

过渡

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

• 转换持续时间：500 毫秒

将文本模块添加到第 1 列

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

背景

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

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

间距

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

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

标题文字

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

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

过滤器

继续过滤器设置并添加屏幕混合模式。

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

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

设置文本模块的样式如下：

背景

添加白色背景颜色。

• 背景颜色：白色#ffffff

文本

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

• 文字字体：蒙特塞拉特
• 文本对齐方式：两端对齐
• 文字颜色：深灰色 #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 框阴影

然后，在文本模块 2 中添加一个内部 box-shadow。

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

第 2 栏/文本模块 3 背景

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

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

第 3 列/文本模块 1 背景

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

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

第 2 栏/文本模块 3 背景

第三个文本模块使用相同的渐变背景。

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

预览

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

桌面

移动的

这是一个包装

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