WordPress divi主题

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

by | May 11, 2022 | Divi主题使用教程 | 0 comments

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

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

google广告开户

让我们开始吧!

预览

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

桌面

混合模式桌面预览

移动的

混合模式 gif 响应式

免费下载列混合模式布局

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

让我们开始重建吧!

订阅我们的 Youtube 频道

添加具有 3 列行的新部分

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

添加三列行

WordPress divi主题

截面间距

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

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

设置部分样式

行设置

背景

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

  • 背景颜色:中灰色#c4c4c4

为背景添加灰色

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

  • 背景图像混合:相乘

添加图像并在乘法时设置混合模式

浆纱

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

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

设置部分的背景样式

间距

也删除默认的行填充。

  • 顶部和底部填充:0px

设置行的背景样式

fiverr建站WordPress程序员

盒子阴影

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

向该部分添加框阴影

能见度

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

行的可见性索引

样式栏 1

输入第一列的设置。

独立站选品工具

选择第 1 列

过滤器

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

应用屏幕混合模式

悬停变换比例

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

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

变换悬停或第一列

高质量外链购买

能见度

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

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

行的可见性

过渡

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

  • 转换持续时间:500 毫秒

过渡持续时间

将文本模块添加到第 1 列

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

JasperAI 10000字免费额度试用

在第一列中插入文本模块

背景

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

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

带背景的文本模块一

间距

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

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

样式化模块的间距

WordPress备份工具updrafplus

标题文字

输入标题文本设置并相应地设置 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

第二个文本模块的间距

过滤器

最后但同样重要的是,在过滤器选项卡中应用屏幕混合模式。

混合模式屏幕文本模块 2

将第三个文本模块添加到第 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

模块三列三

预览

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

桌面

混合模式桌面预览

移动的

混合模式 gif 响应式

这是一个包装

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

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