如何使用 Divi 的内置动画设置有说服力地引导访问者向下浏览页面
已发表: 2019-02-01英雄部分的主要目的之一是说服人们继续向下滚动页面并发现您共享的更多内容和信息。 使用 Divi 的内置动画选项，您可以向页面添加交互式动画，这将帮助您有说服力地引导访问者浏览页面。 在本教程中，我们将使用引导访问者进入服务部分的箭头图标来激励访问者向下滚动到服务部分。
让我们开始吧！
预览
在我们深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸下的结果。
桌面
移动的
让我们开始创作吧！
订阅我们的 YouTube 频道
添加第 1 节
背景颜色
创建一个新页面并向其添加常规部分。 打开部分设置并更改背景颜色。
- 背景颜色：#0f0f0f
底部分隔线
继续向该部分添加底部分隔线。
- 分隔线样式：在列表中查找
- 分隔线颜色：#ffffff
- 分隔线高度：30px
- 分隔线水平重复：10x（台式机），4x（平板电脑和手机）
间距
添加一些自定义填充值。
- 顶部填充：269 像素（桌面）、100 像素（平板电脑和手机）
- 底部填充：674 像素（桌面），200 像素（平板电脑和手机）
添加行
列结构
然后，使用以下列结构添加新行：
浆纱
尚未添加任何模块，打开行设置，转到大小设置并启用“将此行设为全宽”选项。
- 使这一行全宽：是
添加文本模块
添加内容
我们在这一行中唯一需要的模块是文本模块。 继续添加一些选择的 H1 内容。
标题文字设置
接下来更改标题文本设置。
- 标题字体：Didact Gothic
- 标题字体粗细：粗体
- 标题文本对齐方式：居中
- 标题文字颜色：#ffffff
- 标题文字大小：170 像素（桌面）、50 像素（平板电脑和手机）
- 标题线高度：0.8em
- 标题文字阴影垂直长度：1.5em
- 标题文字阴影颜色：rgba(0,0,0,0.11)
添加第 2 节
背景颜色
继续将第二部分添加到页面。 在部分设置中更改背景颜色。
- 背景颜色：#0f0f0f
顶部分隔线
也向该部分添加一个顶部分隔线。
- 分隔线样式：在列表中查找
- 分隔线颜色：#ffffff
- 分隔线高度：30px
- 分隔线水平重复：10x（台式机），4x（平板电脑和手机）
间距
并在间距设置中增加间距值。
- 顶部填充：245px
- 底部填充：245px
添加行
列结构
继续向该部分添加具有以下列结构的新行：
浆纱
打开行设置，转到大小设置并进行一些更改。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：2
添加模糊模块
选择图标
第一列中我们需要的第一个模块是 Blurb 模块。 我们需要的 Blurb 模块元素的唯一部分是图标。 选择指向下方的箭头图标。
图标设置
然后，转到设计选项卡并更改图标设置。
- 图标颜色：#4ffcff
- 图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：150px
间距
为了增加图标的覆盖范围，我们需要添加一些负上边距。 这将允许 Blurb 模块与上一部分重叠，并使两个部分之间的动画顺利发生。 为了弥补自定义边距，我们还将添加自定义顶部填充。 这将确保图标保持与以前完全相同的位置。 唯一改变的是整个模块的大小和范围。
- 上边距：-550px
- 顶部填充：550px
动画片
最后但并非最不重要的一点是，使用以下设置向 Blurb 模块添加动画：
- 动画风格：幻灯片
- 动画方向：下
- 动画持续时间：3000ms
- 动画延迟：1200ms
- 动画强度：100%
- 动画开始不透明度：100%
- 动画速度曲线：渐入渐出
- 图像/图标动画：无动画
将文本模块 #1 添加到第 1 列
添加内容
第一列中我们需要的下一个模块是文本模块。 添加一些选择的内容。
文字设置
继续更改文本设置。
- 文字字体：Didact Gothic
- 文字字体粗细：粗体
- 文字颜色：rgba(255,255,255,0.03)
- 文字大小：350px
- 文字方向：居中
将文本模块 #2 添加到第 1 列
添加内容
将第二个文本模块添加到第一列，并选择一些 H3 内容。
标题文字设置
并在设计选项卡中更改标题文本设置。
- 标题 3 字体：Didact Gothic
- 标题 3 文本对齐：居中
- 标题 3 文本颜色：#ffffff
- 标题 3 文字大小：40 像素（桌面）、30 像素（平板电脑和手机）
- 标题 3 字母间距：-1px
将分频器模块添加到第 1 列
能见度
第一列中需要的下一个模块是分频器模块。 确保启用了“显示分隔线”选项。
- 显示分隔线：是
颜色
继续更改设计选项卡中的分隔线颜色。
- 颜色：#ffffff
浆纱
也对大小设置进行一些更改。
- 宽度：59%
- 模块对齐：居中
动画片
并向模块添加动画。
- 动画风格：幻灯片
- 动画方向：中心
- 动画持续时间：2000ms
- 动画强度：10%
- 动画速度曲线：渐入渐出
将文本模块 #3 添加到第 1 列
添加内容
我们在第一列中需要的下一个也是最后一个模块是另一个文本模块。 添加一些选择的内容。
文字设置
继续更改文本设置。
- 文字字体粗细：轻
- 文字颜色：#b7b7b7
- 文字大小：18px
- 文本行高：1.8em
- 文字方向：居中
动画片
并为模块添加动画。
- 动画风格：幻灯片
- 动画方向：向上
- 动画强度：20%
- 动画速度曲线：渐入渐出
克隆模块 3 次并在剩余列中放置重复项
现在我们已经完成了对第 1 列中所有模块的修改，我们可以将第 1 列中的所有模块克隆 3 次，并将重复项放在剩余的列中。
更改模块内容
更改重复项的内容。
将动画延迟添加到重复项的分隔模块
也为每个 Divider Module 副本添加一些动画延迟。
- 第 2 列中的分频器模块：400 毫秒
- 第 3 列中的分频器模块：800ms
- 第 4 列中的分频器模块：1200 毫秒
将动画延迟添加到文本模块 #3 重复项
对每列中的最后一个文本模块执行相同的操作。
- 第 2 列中的最后一个文本模块：400 毫秒
- 第 3 列中的最后一个文本模块：800 毫秒
- 第 4 列中的最后一个文本模块：1200 毫秒
自定义模糊图标 #2
图标颜色
我们还为每个副本修改了模糊图标的颜色和动画。 打开第 2 列中的 Blurb 模块并更改图标颜色。
- 图标颜色：#ff6b86
动画片
还要更改动画设置。
- 动画类型：幻灯片
- 动画方向：下
- 动画持续时间：2000ms
- 动画延迟：800ms
- 动画强度：62%
- 动画开始不透明度：100%
- 图像/图标动画：无动画
自定义模糊图标 #3
图标颜色
继续打开第 3 列中的 Blurb 模块并更改图标颜色。
- 图标颜色：#ffe500
动画片
还要修改动画设置。
- 动画类型：幻灯片
- 动画方向：下
- 动画持续时间：1000ms
- 动画延迟：600ms
- 动画强度：69%
- 动画开始不透明度：100%
- 图像/图标动画：无动画
自定义模糊图标 #4
图标颜色
打开第 4 列中的最后一个 Blurb 模块，并更改图标颜色。
- 图标颜色：#00ff9d
动画片
并通过更改设计选项卡中的动画设置来完成设计。
- 动画类型：幻灯片
- 动画方向：下
- 动画持续时间：3000ms
- 动画延迟：400ms
- 动画强度：100%
- 动画开始不透明度：100%
- 图像/图标动画：无动画
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的动画设置有说服力地引导访问者浏览页面。 基本的想法是你使用 Blurb 模块作为他们的图标，并增加他们的动画对英雄部分的影响。 您可以在您构建的任何类型的网站上使用这种方法，并根据需要获得尽可能多的创意。 如果您有任何问题或建议，请务必在下方评论区留言！