WordPress divi主题

如何使用 Divi 的滚动效果创建信封动画

| 5月 6, 2022 | Divi主题使用教程 | 0 条评论

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

每次出现新的 Divi 功能时,我们都会尝试分享一些很酷且有用的教程,这些教程将帮助您跳出框框思考并使用 Divi 发挥创意。 今天的教程正是这样做的。 我们将向您展示如何使用 Divi 的滚动效果创建响应式信封动画。 例如,这是强调号召性用语块的好方法,但您也可以将其用于其他目的。 您也可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

信封动画

移动的

信封动画

订阅我们的 Youtube 频道

免费下载信封动画布局

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

重新创建元素结构

将新部分添加到页面中间或底部

背景颜色

首先在页面中间或底部的某处添加一个新部分。 打开部分设置并将背景颜色更改为白色。

  • 背景颜色:#FFFFFF

信封动画

WordPress divi主题

间距

接下来修改间距设置。

  • 顶部填充:5vw
  • 底部填充:0px

信封动画

溢出

并隐藏部分溢出。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

信封动画

添加第 1 行

立柱结构

继续使用以下列结构向该部分添加新行:

信封动画

背景颜色

尚未添加任何模块,打开行设置并更改背景颜色。

  • 背景颜色:#FFFFFF

信封动画

浆纱

接下来转到行的设计选项卡并更改尺寸设置,如下所示:

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

信封动画

fiverr建站WordPress程序员

间距

然后,在不同的屏幕尺寸上添加一些自定义填充值。

  • 顶部填充:14vw(桌面)、11vw(平板电脑和手机)
  • 底部填充:14vw(桌面)、11vw(平板电脑和手机)
  • 左填充:20vw(桌面),10vw(平板电脑和手机)
  • 右填充:20vw(桌面)、10vw(平板电脑和手机)

信封动画

边界

也添加一些边界半径。

信封动画

盒子阴影

我们还使用了一个微妙的盒子阴影。

独立站选品工具
  • 盒子阴影垂直位置:38px
  • 盒子阴影模糊强度:80px
  • 阴影颜色:rgba(0,0,0,0.08)

信封动画

Z 指数

通过增加高级选项卡中的 z 索引来完成行设置。

信封动画

将文本模块 #1 添加到列

添加H2含量

是时候添加模块了,从第一个文本模块开始。 输入您选择的一些 H2 内容。

信封动画

高质量外链购买

H2 文本设置

更改模块的 H2 文本设置如下:

  • 标题 2 字体:Poppins
  • 标题 2 文本大小:2vw(桌面)、4vw(平板电脑)、5vw(手机)

信封动画

将文本模块 #2 添加到列

添加内容

在前一个文本模块的正下方添加另一个文本模块,并插入您选择的一些描述内容。

信封动画

文字设置

转到模块的设计选项卡并更改文本设置。

JasperAI 10000字免费额度试用
  • 文字字体:Open Sans
  • 文字大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 文字行高:2.6em

信封动画

间距

在不同的屏幕尺寸上添加一些自定义的顶部和底部值。

  • 顶部填充:2vw(桌面)、4vw(平板电脑)、5vw(手机)
  • 底部填充:2vw(桌面)、4vw(平板电脑)、5vw(手机)

信封动画

将按钮模块添加到列

添加副本

我们将在这一行中放置的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本。

信封动画

WordPress备份工具updrafplus

按钮设置

然后,相应地设置按钮样式:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#0f33ff
  • 按钮边框宽度:0px

信封动画

  • 按钮边框半径:100px
  • 按钮字体:Poppins

信封动画

间距

并通过添加一些跨不同屏幕尺寸的自定义填充值来完成模块的设置。

  • 顶部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 底部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 左填充:2vw(桌面)、4vw(平板电脑)、6vw(手机)
  • 右填充:2vw(桌面)、4vw(平板电脑)、6vw(手机)

信封动画

添加第 2 行

立柱结构

现在我们已经有了行动号召行,是时候开始创建信封形状了。 为此,请使用以下列结构添加新行:

信封动画

浆纱

通过更改尺寸设置,允许行占据整个部分的宽度,如下所示:

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

信封动画

间距

也删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

信封动画

展示

为了确保列在较小的屏幕尺寸上彼此相邻,我们将在行的主要元素中添加一行 CSS 代码。

display: flex;

信封动画

将图像模块添加到第 1 列

将图像框留空

将图像模块添加到第 1 列并将图像框留空。

信封动画

渐变背景

相反,我们使用渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色 2:#e8e8e8
  • 渐变类型:线性
  • 渐变方向:150度
  • 起始位置:50%
  • 结束位置:50%

信封动画

间距

相应地更改模块的填充值:

  • 顶部填充:15vw
  • 底部填充:15vw

信封动画

在第 1 列中克隆图像模块并在第 2 列中放置重复项

完成第 1 列中的图像模块后,您可以克隆整个模块并将副本放在第 2 列中。

信封动画

更改渐变背景

改变渐变背景如下:

  • 颜色1:rgba(255,255,255,0)
  • 颜色 2:#efefef
  • 渐变类型:线性
  • 渐变方向:210度
  • 起始位置:50%
  • 结束位置:50%

信封动画

添加第 3 行

立柱结构

要创建信封的底部,我们需要另一行具有以下列结构:

信封动画

浆纱

打开行设置并更改大小设置,如下所示:

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

信封动画

间距

接下来删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

信封动画

展示

并通过将一行 CSS 代码添加到行的主要元素来允许两列彼此相邻出现。

display: flex;

信封动画

Z 指数

通过增加高级选项卡中的 z 索引来完成行设置。

信封动画

将图像模块添加到第 1 列

将图像框留空

将图像模块添加到第 1 列,然后再次将图像框留空。

信封动画

渐变背景

请改用渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色 2:#efefef
  • 渐变类型:线性
  • 渐变方向:213度
  • 起始位置:40%
  • 结束位置:40%

信封动画

间距

并通过添加一些顶部和底部填充来增加模块的大小。

  • 顶部填充:20vw
  • 底部填充:20vw

信封动画

在第 1 列中克隆图像模块并在第 2 列中放置重复项

完成第 1 列中的图像模块后,您可以克隆它并将副本放在第 2 列中。

信封动画

更改渐变背景

确保更改副本的渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色 2:#e8e8e8
  • 渐变类型:线性
  • 渐变方向:147度
  • 起始位置:40%
  • 结束位置:40%

信封动画

将垂直运动添加到第 1 行

现在,使信封动画工作的最后一部分是在您的部分的第一行添加响应式垂直运动滚动效果,您就完成了!

  • 启用垂直运动:是
  • 起始偏移量:
    • 桌面版:0(68%)
    • 平板电脑:0.5(61%)
    • 电话:0.5(43%)
  • 中偏移:
    • 桌面:6.5(81%)
    • 平板电脑和手机:21.5(82%)
  • 结束偏移:
    • 桌面:16(95%)
    • 平板电脑和手机:21.5(82%)

信封动画

预览

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

桌面

信封动画

移动的

信封动画

最后的想法

在这篇文章中,我们向您展示了如何利用 Divi 的滚动效果发挥创意。 更具体地说,我们向您展示了如何组合信封动画。 您可以将此动画用于多种用途,例如突出您的 CTA 块。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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