使用圆形计数器动画的图标在 Divi 中设计独特的功能部分

大多数网站都需要精心设计的功能部分来展示产品或服务的功能。 因此，在本教程中，我将向您展示如何在 Divi 中创建一个独特的功能部分。 为此，我们将通过 Divi 的 Circle Counter 模块获得一些创意，为您的简介图标添加动画。 通过使用一些自定义间距，我将向您展示如何轻松定位您的宣传语，使其与分隔线背景完美吻合。 最终的设计既干净又独特。 只需稍加改动，它就可以成为您下一个项目的重要补充。

让我们开始吧！

抢先看

这是设计和 gif 的一些先睹为快，以帮助说明动画元素。

创建新页面并部署可视化构建器

要开始，请转到您的 WordPress 仪表板，然后转到页面 > 添加新内容。 然后为您提供页面标题并单击以使用 Divi Builder。 然后单击以使用 Visual Builder。 系统将提示您三个选项。 选择“从头开始构建”选项。

您的空白画布等待着您！

创建特征部分标题

您的功能部分的顶部标题非常简单。 独特的元素是显示在下方的微妙框阴影，为设计增添了一点深度。

要创建它，请在常规部分插入一列行。

然后向该行添加一个文本模块并按如下方式更新设置：

内容：

<h1>Our Features</h2>
Everything you need.

文字字体：蒙特塞拉特
文字字体粗细：半粗体
文字文字大小：22px
文字方向：居中
标题字体粗细：超粗
标题文字大小：6vw（桌面）、50px（平板电脑）、30px（智能手机）

现在保存您的设置并跳转到部分设置并添加一个框阴影，如下所示：

盒子阴影：见截图
框阴影垂直位置：19px
框阴影模糊强度：80px
框阴影扩散强度：-16px
阴影颜色：rgba(136,150,171,0.13)

保存设置。

很简单的东西。 现在让我们进入有趣的部分。

创建主要特征部分和背景设计

我们需要添加一个新部分来保存我们的功能。 通常，您可以简单地向上一节添加一个新行，但在这种情况下，我们需要添加一个可在 Section 元素中使用的分隔线背景。

继续并直接在您刚刚完成的部分下添加一个新部分。 然后向该行添加一个四列布局。

我们将向这些列添加简介，但现在让我们更新我们的部分设置。

对于本节，我们需要给它一个自定义的最大宽度。 这对于将设计保持在较大的浏览器尺寸上很重要。 我们还需要添加一个部分分隔线作为背景，与我们的宣传语的排列相吻合（稍后会详细介绍）。

转到部分设置并更新以下内容：

宽度：1080px
截面对齐：居中
分隔线：顶部
分隔线样式：见截图
分隔线颜色：rgba(136,150,171,0.07)
分隔高度：52%

保存设置。

为该部分提供 1080 像素的自定义宽度（或最大宽度）基本上是您的行在一个部分中的默认设置方式。 因此，本质上，我们将整个部分设为默认行的大小。

向四列行添加模糊

在这一点上，我们可以继续并开始将我们的简介添加到四列中的每一列。 单击第一列中的灰色图标以添加您的第一个简介。 更新框中的内容以包含更少的文本（2 个句子），然后选择使用图标而不是图像（我选择了图像图标）。

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

图标颜色：#974450
圆圈图标：是
圆圈颜色：rgba(255,255,255,0.5)
使用图标字体大小：是
图标字体大小：48px
文字方向：居中

保存设置。

现在将简介模块复制并粘贴到剩余的每一列中，以便在每一列中都有一个简介。

如果您愿意，此时您可以返回并更新图标，但您不必这样做。

添加圆形计数器以重叠模糊图标

要将动画添加到我们的模糊图标中，我们将用具有不同数值的圆形计数器重叠每个图标。 这将导致圆形动画随着每个图标逐渐增加以显示进展。 但是，您可以对每个圆形计数器使用您想要的任何数字值。

单击第一列中模糊模块下的灰色“添加新模块”图标，然后添加计数器模块。

在开始编辑圆模块设置之前，请继续将其拖动到模糊模块上方。 现在您可以按如下方式更新内容设置：

删除标题框中的文字
数量：25

然后更新设计选项卡设置如下：

条形背景颜色：#974450（与您的简介图标颜色相同）
数字文本颜色：rgba(0,0,0,0)（这是完全透明的，以便隐藏数字）
数字文本大小：0px（去除圆圈内任何不需要的文本空间）
宽度：109px（这是根据将重叠的图标的大小设置的）
模块对齐：居中
底部边距：-102px（这将与图标完美重叠）

保存设置。

现在您需要做的就是将圆形计数器模块复制并粘贴到剩余的每一列中，然后将其拖到每个简介的顶部。 复制的圆形计数器就位后，将第二个圆形计数器编号更新为 50，将第三个计数器编号更新为 75，将第四个计数器编号更新为 100。动画完成后的结果应如下所示。

使用行填充来定位图标以与分隔线重合

此设计的最后一步是将图标定位为与分隔线背景的弧线重合。 为此，我们需要在行中添加一些自定义填充。 打开行设置并更新以下内容：

使这一行全宽：是
第 2 列自定义填充：9% 顶部（桌面），0% 顶部（平板电脑）
第 3 列自定义填充：9% 顶部（桌面），0% 顶部（平板电脑）

就是这样！

查看最终结果。

请注意图标现在如何通过具有不同数值的圆形计数器进行动画处理。 并且图标与分隔线背景重合。

功能部分在移动设备上的外观

以下是该设计在​​平板电脑和智能手机显示屏上的外观。

最后的想法

此功能部分设计的独特元素轻巧而微妙，这应该使您可以通过一些细微的调整轻松地将其合并到自己的布局中。 如果圆形计数器动画不适合您，请随意将它们排除在外，只需使用简介模块的圆形图标即可。 或者，您可以选择仅使用带有数字值的圆形计数器，用于创意布局的特色统计。 如果有的话，我希望这会给你一些想法，让你自己探索。

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

干杯!