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