如何使用 Divi 的 Theme Builder 创建动画页面过渡
已发表: 2020-01-22通常，当访问者在您的 Divi 网站上从一个页面导航到另一个页面时，转换会立即发生。 现在，如果有一种方法可以为这些页面过渡设置动画呢？ 使用 Divi 的 Theme Builder 确实可以，无需任何自定义代码！ 一旦您的访问者离开一个页面进入另一个页面，您就可以应用动画。 在今天的教程中，我们将向您展示如何创建这些动画页面过渡。 更重要的是，我们还将分享三个不同的示例，您可以立即将它们应用于下一个项目。 您也可以免费下载模板 JSON 文件！
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
动画页面过渡 #1
桌面
移动的
动画页面过渡 #2
桌面
移动的
动画页面过渡 #3
桌面
移动的
免费下载页面模板
要使用免费页面模板，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
1.转到Divi Theme Builder并添加新页面模板
转到 Divi 主题生成器并添加新模板
您需要做的第一件事是转到您的 Divi 主题生成器，然后单击“添加新模板”。
在所有页面上使用模板
在所有页面（或您希望应用过渡的页面）上使用新模板。
- 用于：所有页面
开始构建模板主体
然后，开始构建页面模板的自定义正文。
2.使用帖子内容模块创建页面正文
部分设置
间距
进入模板编辑器后，您会注意到一个部分。 打开该部分并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
能见度
为了确保在动画发生时没有水平滚动条出现，我们需要在部分设置的高级选项卡中隐藏两个部分溢出。
- 水平溢出：隐藏
- 垂直溢出：隐藏
添加新行
列结构
继续使用以下列结构向该部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并允许行占据部分容器的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
我们还将删除该行的默认顶部和底部填充。 此时，节、行和列容器具有完全相同的大小。 容器之间没有空格。 这对于下一步将要发生的事情很重要； 添加动态页面内容。
- 顶部填充：0px
- 底部填充：0px
将帖子内容模块添加到列
我们需要使页面内容动态显示的唯一模块是 Post Content Module。 继续将此模块添加到您行的列中。 由于我们在本文前面部分应用的部分和行设置，动态页面内容将占据部分容器的整个宽度和高度。
3. 应用您选择的动画页面过渡
重新创建动画页面过渡 #1
部分设置
背景颜色
是时候应用动画页面过渡了！ 我们分享了三个不同的例子，但有了 Divi 的内置选项，动画的可能性是无穷无尽的。 要应用第一个动画页面过渡，请打开部分容器并添加背景颜色。
- 背景颜色：#d8cdbe
动画片
我们还将以下动画设置应用于该部分：
- 动画风格：幻灯片
- 动画方向：右
- 动画开始不透明度：100%
- 动画速度曲线：渐入渐出
- 动画重复：一次
行设置
背景颜色
接下来打开行设置并添加以下背景颜色：
- 背景颜色：#e2e2e2
动画片
继续对行应用以下动画：
- 动画风格：幻灯片
- 动画方向：右
- 动画延迟：500ms
- 动画开始不透明度：100%
- 动画速度曲线：渐入渐出
- 动画重复：一次
列设置
背景颜色
到下一个我们将设置动画的容器，即列容器。 打开列设置并添加白色背景色。
- 背景颜色：#ffffff
动画片
还将自定义动画添加到列。
- 动画风格：幻灯片
- 动画方向：左
- 动画延迟：1200ms
- 动画速度曲线：渐入渐出
- 动画重复：一次
发布内容模块设置
动画片
最后但并非最不重要的一点是，我们将为 Post Content Module（包含所有动态页面内容）设置动画。
- 动画风格：淡入淡出
- 动画延迟：2500ms
- 动画速度曲线：渐入渐出
- 动画重复：一次
重新创建动画页面过渡 #2
部分设置
背景颜色
想要创建第二个动画吗？ 打开部分设置并使用以下背景颜色：
- 背景颜色：#d8cdbe
动画片
然后，将自定义动画应用于该部分。
- 动画风格：幻灯片
- 动画方向：左
- 动画开始不透明度：100%
- 动画速度曲线：渐入渐出
- 动画重复：一次
行设置
渐变背景
接下来打开行设置并为其使用以下渐变背景：
- 颜色 1：rgba(255,255,255,0)
- 颜色 2：#ffffff
- 渐变类型：线性
- 梯度方向：90度
- 起始位置：50%
- 结束位置：50%
动画片
也向您的行添加自定义动画。
- 动画风格：幻灯片
- 动画方向：向上
- 动画延迟：800ms
- 动画开始不透明度：100%
- 动画速度曲线：缓入
- 动画重复：一次
列设置
背景颜色
然后，打开行的列设置并使用白色背景色。
- 背景颜色：#ffffff
动画片
继续向列添加动画。
- 动画风格：幻灯片
- 动画方向：右
- 动画延迟：2000ms
- 动画开始不透明度：100%
- 动画速度曲线：渐入渐出
- 动画重复：一次
发布内容模块设置
动画片
最后但并非最不重要的一点是，打开 Post Content Module 设置并使用以下动画设置：
- 动画风格：淡入淡出
- 动画延迟：3000ms
- 动画速度曲线：渐入渐出
- 动画重复：一次
重新创建动画页面过渡 #3
部分设置
渐变背景
进入下一个也是最后一个动画页面过渡！ 打开部分设置并使用以下渐变背景：
- 颜色 1：#d8cdbe
- 颜色 2：#ffffff
- 渐变类型：径向
- 径向：顶部
- 起始位置：20%
- 结束位置：20%
动画片
转到该部分的设计选项卡并相应地更改动画设置：
- 动画风格：幻灯片
- 动画方向：下
- 动画强度：10%
- 动画开始不透明度：100%
- 动画速度曲线：渐入渐出
- 动画重复：一次
行设置
渐变背景
然后，打开行设置并应用渐变背景：
- 颜色 1：#ffffff
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
- 起始位置：50%
- 结束位置：50%
动画片
也修改行的动画设置。
- 动画风格：幻灯片
- 动画方向：下
- 动画延迟：1000ms
- 动画开始不透明度：100%
- 动画速度曲线：缓入
- 动画重复：一次
列设置
背景颜色
继续打开列设置。 更改背景颜色。
- 背景颜色：#ffffff
动画片
也将以下动画设置应用于列：
- 动画风格：幻灯片
- 动画方向：下
- 动画延迟：1500ms
- 动画速度曲线：渐入渐出
- 动画重复：一次
发布内容模块设置
动画片
并通过将以下动画设置应用于 Post Content Module 来完成第三个动画页面过渡：
- 动画风格：淡入淡出
- 动画延迟：3000ms
- 动画速度曲线：渐入渐出
- 动画重复：一次
6. 保存所有主题生成器更改和预览结果
一旦您构建了页面模板的正文并添加了您选择的动画页面过渡，您就可以保存所有主题生成器更改并在您的网站上查看结果！
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
动画页面过渡 #1
桌面
移动的
动画页面过渡 #2
桌面
移动的
动画页面过渡 #3
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项和 Theme Builder 创建动画页面过渡。 这是向您的网站添加另一个级别的交互的好方法，无需额外的代码。 您还可以免费下载示例模板 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。