如何使用 Divi 创建滚动动画数字计数器

动画数字计数器作为一种显示数字数据以突出服务、案例研究等价值的手段，在整个网络中都很流行。 Divi 有一个专用的数字计数器模块，可用于轻松生成动画数字计数器。

但是，在本教程中，我们将向您展示如何使用 Divi 创建滚动动画的数字计数器。 使用 Divi 的位置选项和滚动效果，我们将设计一个简单的布局来显示带有滚动数字的日期。

一探究竟！

抢先看

这是我们将在 Divi 中设计的滚动动画计数器的快速浏览。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

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

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

第 1 部分：创建标题部分

在第一部分中，我们将为布局创建一个简单的标题。

首先，向该部分添加一列行。

然后向该行添加一个新的文本模块。

使用以下内容更新文本模块内容：

<h2>Save The Date<h2>

然后更新标题文字样式如下：

• 标题 2 字体：Prata
• 标题 2 文字大小：130 像素（桌面）、70 像素（平板电脑）、40 像素（手机）

第 2 部分：使用滚动动画创建计数器

在下一部分中，我们将创建三个计数器，它们将滚动滚动数字直到停止显示日期（月、日和年）。 每个计数器将使用总共 5 个文本模块和一个分隔模块构建。 第一个文本模块将作为计数器的标签（即月、日、年）。 接下来的四个文本模块将分别包含不同的数字（在进行中），这些数字将使用 Divi 中的垂直运动偏移在滚动时进行动画处理。 底部分隔器模块将有助于隐藏数字溢出。

这是如何做到的。

添加第二行

在现有行下，添加另一个单列行。

行设置

在添加任何模块之前，请按如下方式更新行设置：

• 天沟宽度：1
• 填充：0px 顶部，0px 底部

列设置

然后打开列的设置并更新填充如下：

• 填充（桌面）：底部 100 像素
• 填充（平板电脑和手机）：底部 0px

添加文本模块

然后在列中添加一个文本模块。

内容/标签

对于文本模块内容，添加“月”一词。

文字设计设置

添加内容后，按如下方式更新设计设置：

• 背景颜色：#ffffff
• 文字字体：Prata
• 文字文字大小：40px
• 文本行高：2em
• 宽度：100%
• 填充：顶部 20 像素，底部 20 像素，左侧 20 像素，右侧 20 像素
• 底部边框宽度：5px
• 底部边框颜色：#eeeeee

位置

然后在高级选项卡下，更新位置选项如下：

• 职位：相对
• Z 索引 1

为第一个数字添加文本模块

一旦第一个文本模块就位，我们就可以开始添加将滚动移动的数字。 要添加第一个数字，请在现有的“Month”文本模块下添加一个新的文本模块。

添加号码/内容

然后将文本模块标签更新为“num1”以方便参考。 然后用数字“01”更新内容。

数字的设计设置

在设计选项卡下，更新以下内容：

• 文字字体：Prata
• 文字文字颜色：#8ab2d3
• 文字文字大小：70px
• 文字字母间距：4px
• 文本行高：1.5em
• 填充：左20px

注意：数字的文本大小为 70px，行高为 1.5em，这意味着文本模块的总高度将接近 100px。 每当我们开始添加垂直运动偏移时，记住这一点很重要。 例如，向文本模块添加垂直偏移“1”将使文本模块精确移动 100px，即文本模块的高度。

第一个数字的滚动效果

将以下滚动效果添加到文本模块。

在垂直运动选项卡下，更新以下内容：

• 启用垂直运动：是
• 起始偏移：1（10%）
• 中间偏移：0（20%）
• 结束偏移：-1（30%）

在淡入淡出选项卡下，更新以下内容：

• 启用淡入淡出：是
• 起始不透明度：0%（10%）
• 中等不透明度：100%（在 20% 时）
• 结束不透明度：0%（在 30% 时）

确保将运动效果触发器设置到元素的顶部：

• 运动效果触发器：元素顶部

为第二个数字创建文本模块

重复第一个数字

创建第一个数字后，复制它以创建第二个数字的文本模块。 然后更新图层视图中的标签以获得更好的参考。

更新编号/内容

打开第二个数字文本模块的设置，用数字“02”更新内容。

更新位置

然后按如下方式更新位置选项：

• 位置：绝对
• 垂直偏移：126px

更新滚动效果

然后更新滚动效果如下：

在垂直运动选项卡下，更新以下内容：

• 起始偏移：1（20%）
• 中间偏移：0（30%）
• 结束偏移：-1（40%）

在淡入淡出选项卡下，更新以下内容：

• 起始不透明度：0%（20%）
• 中等不透明度：100%（在 30% 时）
• 结束不透明度：0%（40%）

为第三个数字创建文本模块

重复的第二个数字

要为第三个数字创建文本模块，请复制第二个数字的文本模块。

更新编号/内容

用数字“03”更新内容。

更新滚动效果

然后更新滚动效果：

在垂直运动选项卡下，更新以下内容：

• 起始偏移：1（在 30% 时）
• 中间偏移：0（40%）
• 结束偏移：-1（50%）

在淡入淡出选项卡下，更新以下内容：

• 起始不透明度：0%（在 30% 时）
• 中等不透明度：100%（在 40% 时）
• 结束不透明度：0%（50%）

为第四个数字创建文本模块

重复的第三个数字

要为滚动计数器创建第四个数字，请复制第三个数字的文本模块。

更新编号/内容

用数字“04”更新内容。

更新滚动效果

然后更新滚动效果：

在垂直运动选项卡下，更新以下内容：

• 起始偏移：1（40%）
• 中间偏移：0（50%）
• 结束偏移：0（60%）

在淡入淡出选项卡下，更新以下内容：

• 起始不透明度：0%（40%）
• 中等不透明度：100%（在 50% 时）
• 结束不透明度：100%（60%）

添加底部分隔线

在最后一个文本模块下，添加一个新的分隔线模块。 这将用于隐藏将滚动到视图中的文本的底部溢出。

然后选择不显示分隔线。

风格和位置设置

更新分频器的设计如下：

• 背景颜色：#ffffff
• 宽度：100%
• 高度：100px
• 顶部边框宽度：5px

在高级选项卡下，更新以下内容：

• 禁用：手机和平板电脑
• 位置：绝对
• 位置：左下角

重要提示：分隔线将占用的空间是通过向列添加 100 像素的底部填充而创建的。 如果您不添加该填充，分隔符将与数字重叠。

创建更多计数器和列

复制第 1 列并更新内容

要创建新计数器，请复制第 1 列。这将创建第二列，其中所有元素自动就位。

然后您需要做的就是使用新文本和数字更新所有文本模块的内容。

复制第 2 列并更新内容

在第 2 列中更新所有文本模块的内容后，复制第 2 列以创建年份的第三个计数器。 然后根据需要更新每个文本模块的内容。

最后结果

这是最终结果。

最后的想法

这种带有滚动动画数字计数器的简单布局应该可以派上用场，以新颖独特的方式显示数字数据。 随意放弃约会的概念，用柜台做任何你能想到的事情！

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

干杯!