WordPress divi主题

自定义 Divi 标题 CTA 的 8 个延迟按钮动画

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

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

向任何 CTA 添加延迟按钮动画可以成为吸引访问者注意力的有效方式,进而增加获得点击的可能性。 在本教程中,我们将向您展示如何使用 Divi 为自定义标题 CTA 创建 8 个延迟按钮动画。 为此,我们将以您可能从未考虑过的方式组合动画设置。 此外,这些动画几乎可以应用于整个网站的任何 CTA 按钮。

google广告开户

让我们开始吧。

抢先看

这是我们将添加到 Divi 中的自定义标题 CTA 的 8 个延迟按钮动画的一瞥:

Divi 延迟按钮动画

免费下载 8 个延迟标题按钮动画布局

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

要将布局导入您的页面,只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们来看看教程好吗?

你需要什么开始

首先,您需要安装并激活 Divi 主题。 确保您拥有最新版本的 Divi。

您将需要下载第二个主题构建器包,因为我们将在本教程的该包中使用 404 页面模板上的自定义页眉。

之后,您就可以出发了。

WordPress divi主题

从第二个主题构建器包导入模板

从 WordPress 仪表板,导航到 Divi > Theme Builder。 在主题构建器中,选择页面右上角的可移植性图标。 在可移植性弹出窗口中,选择导入选项卡,选择 theme-builder-pack-2-404-page-template.json 文件并单击导入按钮。 (此导入文件将位于 Second Theme Builder Pack 文件夹中)

Divi 延迟按钮动画

您还可以选择将全局页眉和页脚导入为静态布局的选项。

滚动触发的弹出窗口

导入模板后,单击图标以编辑自定义标题区域。

Divi 延迟按钮动画

这将带您进入正文模板布局编辑器,我们将在其中将延迟动画添加到预制标题上的按钮。

自定义标题 CTA 的 8 个延迟按钮动画

下面的 8 个延迟按钮动画包括内置 Divi 动画选项和透视 CSS 属性的独特组合。 当按钮动画包含翻转或折叠效果时,透视属性会添加 3D 效果。 对于这些动画中的大多数,我们将为按钮及其父列添加动画,以获得更复杂的运动。

他们来了…

#1 下拉弹跳

Divi 延迟按钮动画

fiverr建站WordPress程序员

按钮设置:

下拉弹跳延迟按钮动画简单有效。 要构建它,请打开按钮模块的设置并更新以下内容:

  • 动画风格:弹跳
  • 动画方向:向下
  • 动画时长:1100ms
  • 动画延迟:1500ms
  • 动画开始不透明度:100%

Divi 延迟按钮动画

#2 3D垂直翻转

Divi 延迟按钮动画

要构建 3D 垂直翻转延迟按钮动画,您必须首先将透视属性添加到按钮的父列(第 2 列)。

列设置

要向列添加透视,请打开行设置,然后单击以编辑第 2 列设置。 在高级选项卡下,将以下自定义 CSS 添加到主元素:

独立站选品工具
perspective: 150px

Divi 延迟按钮动画

按钮设置:

  • 动画风格:翻转
  • 动画方向:中心
  • 动画时长:1500ms
  • 动画延迟:1000ms
  • 动画强度:400%
  • 动画开始不透明度:100%

Divi 延迟按钮动画

#3 3D水平翻转

Divi 延迟按钮动画

3D 水平翻转延迟按钮动画类似于垂直翻转。 唯一真正的区别是动画方向。

列设置:

首先,通过将以下自定义 CSS 添加到主元素,确保您已将透视图添加到第 2 列:

高质量外链购买
perspective: 150px

Divi 延迟按钮动画

按钮设置:

打开按钮模块设置并更新以下内容:

  • 按钮对齐方式:居中

这确保水平翻转以父透视属性为中心。

Divi 延迟按钮动画

  • 动画风格:折叠
  • 动画方向:中心
  • 动画时长:1000ms
  • 动画延迟:2000ms
  • 动画强度:400%
  • 动画开始不透明度:100%
  • 动画速度曲线:线性

Divi 延迟按钮动画

JasperAI 10000字免费额度试用

#4 下拉弹跳 + 3D 垂直翻转

Divi 延迟按钮动画

这个延迟的按钮动画是通过结合反弹动画(添加到列)和翻转动画(添加到按钮)来实现的。

这是构建它的方法。

列设置:

打开行设置,并使用以下内容更新第 2 列设置:

  • 动画风格:弹跳
  • 动画方向:向下
  • 动画延迟:2000ms
  • 动画开始不透明度:100%

然后将透视css添加到主元素中,如下所示:

WordPress备份工具updrafplus
perspective: 150px;

Divi 延迟按钮动画

按钮设置:

列设置到位后,更新按钮模块设置如下:

  • 动画风格:翻转
  • 动画方向:中心
  • 动画时长:1500ms
  • 动画延迟:1000ms
  • 动画强度:400%
  • 动画开始不透明度:100%

Divi 延迟按钮动画

这里的技巧是确保在列动画完成后延迟翻转开始。

#5 向下俯冲(向下滑动 + 旋转)

Divi 延迟按钮动画

为了获得下一个“俯冲”动画,我们需要结合滑动动画(添加到列)和滚动动画(添加到按钮)。

我们开始做吧。

列设置:

打开行设置并更新第 2 列设置,如下所示:

  • 动画风格:幻灯片
  • 动画方向:向下
  • 动画延迟:1000ms
  • 动画开始不透明度:100%

然后将以下自定义 css 添加到主元素:

perspective: 150px

Divi 延迟按钮动画

按钮设置:

然后更新按钮设置如下:

  • 动画风格:滚动
  • 动画方向:向下
  • 动画时长:1500ms
  • 动画延迟:1000ms
  • 动画开始不透明度:100%

Divi 延迟按钮动画

#6 放大(缩放+变换比例)

Divi 延迟按钮动画

这种延迟按钮动画的独特之处在于它涉及使用变换比例缩放按钮。 然后我们给按钮添加缩放动画。

这是如何做到的。

按钮设置:

打开按钮模块设置并更新以下内容:

  • 变形比例:175%
  • 动画风格:缩放
  • 动画方向:中心
  • 动画时长:1500ms
  • 动画延迟:1000ms
  • 动画开始不透明度:100%

Divi 延迟按钮动画

#7 脉冲(放大+缩小)

Divi 延迟按钮动画

此延迟脉冲动画是通过组合缩小动画(添加到列)和放大动画(添加到按钮)来创建的。

我们开始做吧。

列设置:

打开行设置并更新第 2 列的设置,如下所示:

  • 动画风格:缩放
  • 动画方向:中心
  • 动画时长:1000ms
  • 动画延迟:2000ms
  • 动画强度:-100%
  • 动画开始不透明度:100%

Divi 延迟按钮动画

请注意,我们为动画强度添加了一个负值 (-100%)。 这会导致列具有相反的效果,这将缩小列/按钮(或缩小)。

按钮设置:

然后更新按钮设置如下:

  • 动画风格:缩放
  • 动画方向:中心
  • 动画时长:1500ms
  • 动画延迟:1000ms
  • 动画强度:50%
  • 动画开始不透明度:100%

Divi 延迟按钮动画

请注意,动画延迟设置为在列动画之前 1000 毫秒,以便按钮在缩小之前先放大。

#8 螺旋(向左滑动 + 旋转)

Divi 延迟按钮动画

这个最终的延迟按钮动画结合了滑动动画(添加到列)和 720 度翻转动画(添加到按钮)。

这是如何做到的。

列设置:

首先,打开行设置并更新第 2 列的设置,如下所示:

  • 动画风格:幻灯片
  • 动画方向:左
  • 动画时长:2000ms
  • 动画延迟:2000ms
  • 动画强度:100%
  • 动画开始不透明度:100%

Divi 延迟按钮动画

按钮设置:

然后更新按钮模块设置如下:

  • 动画风格:翻转
  • 动画方向:中心
  • 动画时长:2000ms
  • 动画延迟:2000ms
  • 动画强度:800%
  • 动画开始不透明度:100%

Divi 延迟按钮动画

注意这里动画强度设置为 800%。 这将导致按钮翻转三次以创建旋转效果。

最终结果

让我们最后看一下 8 个延迟按钮动画。

Divi 延迟按钮动画

最后的想法

我希望这 8 个延迟按钮动画将有助于提高您的自定义标题 CTA 的转化率。 您还可以使用这些示例来获得灵感,并为您自己的网站探索其他设计和应用程序!

有最爱吗?

我期待在评论中收到您的来信。

干杯!

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