WordPress divi主题

如何使用 Divi 的主题生成器创建动画页面过渡

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

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

通常,当访问者在您的 Divi 网站上从一个页面导航到另一个页面时,转换会立即发生。 现在,如果有一种方法可以为这些页面转换设置动画呢? 使用 Divi 的 Theme Builder,无需任何自定义代码! 一旦您的访问者离开页面进入另一个页面,您就可以应用动画。 在今天的教程中,我们将向您展示如何创建这些动画页面过渡。 更重要的是,我们还将分享三个不同的示例,您可以立即将它们应用到您的下一个项目中。 您还可以免费下载模板 JSON 文件!

google广告开户

让我们开始吧。

预览

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

动画页面过渡 #1

桌面

动画页面过渡

移动的

动画页面过渡

动画页面过渡 #2

桌面

动画页面过渡

移动的

动画页面过渡

动画页面过渡 #3

桌面

动画页面过渡

移动的

动画页面过渡

免费下载页面模板

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

WordPress divi主题

1. 前往 Divi Theme Builder 并添加新页面模板

转到 Divi 主题生成器并添加新模板

您需要做的第一件事是转到您的 Divi Theme Builder,然后单击“添加新模板”。

动画页面过渡

在所有页面上使用模板

在所有页面(或您希望应用过渡的页面)上使用新模板。

动画页面过渡

开始构建模板主体

然后,开始构建页面模板的自定义正文。

动画页面过渡

2.使用帖子内容模块创建页面正文

部分设置

间距

进入模板编辑器后,您会注意到一个部分。 打开该部分并删除所有默认的顶部和底部填充。

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

动画页面过渡

能见度

为确保动画发生时不出现水平滚动条,我们需要在部分设置的高级选项卡中隐藏两个部分溢出。

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

动画页面过渡

fiverr建站WordPress程序员

添加新行

立柱结构

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

动画页面过渡

浆纱

在不添加任何模块的情况下,打开行设置并允许行占据部分容器的整个宽度。

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

动画页面过渡

间距

我们还删除了该行的默认顶部和底部填充。 此时,节、行和列容器的大小完全相同。 容器之间没有空格。 这对于下一步的工作很重要; 添加动态页面内容。

独立站选品工具
  • 顶部填充:0px
  • 底部填充:0px

动画页面过渡

将帖子内容模块添加到列

我们需要使页面内容动态显示的唯一模块是发布内容模块。 继续将此模块添加到您的行列中。 由于我们在本文前面部分应用的部分和行设置,动态页面内容将占据部分容器的整个宽度和高度。

动画页面过渡

3.应用您选择的动画页面过渡

重新创建动画页面过渡 #1

动画页面过渡

部分设置

背景颜色

是时候应用动画页面转换了! 我们将分享三个不同的示例,但使用 Divi 的内置选项,动画的可能性是无穷无尽的。 要应用第一个动画页面过渡,请打开部分容器并添加背景颜色。

高质量外链购买
  • 背景颜色:#d8cdbe

动画页面过渡

动画片

我们还将以下动画设置应用于该部分:

  • 动画风格:幻灯片
  • 动画方向:右
  • 动画开始不透明度:100%
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

行设置

背景颜色

接下来打开行设置并添加以下背景颜色:

  • 背景颜色:#e2e2e2

动画页面过渡

JasperAI 10000字免费额度试用
动画片

继续将以下动画应用于该行:

  • 动画风格:幻灯片
  • 动画方向:右
  • 动画延迟:500ms
  • 动画开始不透明度:100%
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

列设置

背景颜色

转到我们将制作动画的下一个容器,即列容器。 打开列设置并添加白色背景颜色。

  • 背景颜色:#ffffff

动画页面过渡

动画片

还将自定义动画添加到列。

WordPress备份工具updrafplus
  • 动画风格:幻灯片
  • 动画方向:左
  • 动画延迟:1200ms
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

发布内容模块设置

动画片

最后但同样重要的是,我们将为发布内容模块(包含所有动态页面内容)设置动画。

  • 动画风格:淡入淡出
  • 动画延迟:2500ms
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

重新创建动画页面过渡 #2

动画页面过渡

部分设置

背景颜色

想要创建第二个动画吗? 打开部分设置并使用以下背景颜色:

  • 背景颜色:#d8cdbe

动画页面过渡

动画片

然后,将自定义动画应用到该部分。

  • 动画风格:幻灯片
  • 动画方向:左
  • 动画开始不透明度:100%
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

行设置

渐变背景

接下来打开行设置并为其使用以下渐变背景:

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

动画页面过渡

动画片

也向您的行添加自定义动画。

  • 动画风格:幻灯片
  • 动画方向:向上
  • 动画延迟:800ms
  • 动画开始不透明度:100%
  • 动画速度曲线:缓入
  • 动画重复:一次

动画页面过渡

列设置

背景颜色

然后,打开行的列设置并使用白色背景色。

  • 背景颜色:#ffffff

动画页面过渡

动画片

继续向列添加动画。

  • 动画风格:幻灯片
  • 动画方向:右
  • 动画延迟:2000ms
  • 动画开始不透明度:100%
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

发布内容模块设置

动画片

最后但同样重要的是,打开 Post Content Module 设置并使用以下动画设置:

  • 动画风格:淡入淡出
  • 动画延迟:3000ms
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

重新创建动画页面过渡 #3

动画页面过渡

部分设置

渐变背景

转到下一个和最后一个动画页面过渡! 打开部分设置并使用以下渐变背景:

  • 颜色 1:#d8cdbe
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:顶部
  • 起始位置:20%
  • 结束位置:20%

动画页面过渡

动画片

转到该部分的设计选项卡并相应地更改动画设置:

  • 动画风格:幻灯片
  • 动画方向:向下
  • 动画强度:10%
  • 动画开始不透明度:100%
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

行设置

渐变背景

然后,打开行设置并应用渐变背景:

  • 颜色1:#ffffff
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:中心
  • 起始位置:50%
  • 结束位置:50%

动画页面过渡

动画片

也修改行的动画设置。

  • 动画风格:幻灯片
  • 动画方向:向下
  • 动画延迟:1000ms
  • 动画开始不透明度:100%
  • 动画速度曲线:缓入
  • 动画重复:一次

动画页面过渡

列设置

背景颜色

继续打开列设置。 更改背景颜色。

  • 背景颜色:#ffffff

动画页面过渡

动画片

也将以下动画设置应用于列:

  • 动画风格:幻灯片
  • 动画方向:向下
  • 动画延迟:1500ms
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

发布内容模块设置

动画片

并通过将以下动画设置应用于发布内容模块来完成第三个动画页面过渡:

  • 动画风格:淡入淡出
  • 动画延迟:3000ms
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

动画页面过渡

6.保存所有主题生成器更改和预览结果

一旦您构建了页面模板的主体并添加了您选择的动画页面过渡,您就可以保存所有 Theme Builder 更改并在您的网站上查看结果!

动画页面过渡

动画页面过渡

预览

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

动画页面过渡 #1

桌面

动画页面过渡

移动的

动画页面过渡

动画页面过渡 #2

桌面

动画页面过渡

移动的

动画页面过渡

动画页面过渡 #3

桌面

动画页面过渡

移动的

动画页面过渡

最后的想法

在这篇文章中,我们向您展示了如何仅使用 Divi 的内置选项和 Theme Builder 创建动画页面过渡。 这是向您的网站添加另一个级别的交互的好方法,而无需额外的代码。 您还可以免费下载示例模板 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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