圆形计数器允许您以美观的方式显示单个统计数据。 当您向下滚动时，数字倒计时并且饼图逐渐填充以匹配百分比值。 尝试在一个页面上组合多个圆形计数器模块，让您的 游客 一种了解您的业务或个人技能的有趣方式。
如何将圆形仪表模块添加到您的页面
在您可以将圆形计数器模块添加到您的页面之前，您必须首先访问 Divi Builder。 一旦 Divi主题 安装在您的网站上，您会注意到一个按钮 使用Divi Builder 每次创建新页面时，位于发布商上方。
通过单击此按钮，您将能够激活Divi Builder，这将使您可以访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。
您也可以点击按钮 使用Visual Builder 当您登录到WordPress仪表板时浏览网站时。
一旦输入Visual Builder，您可以单击灰色加号按钮将新模块添加到页面。 新模块只能添加到行内。 如果您要开始一个新页面，请不要忘记先在页面上添加一行。
在模块列表中找到圆形仪表模块，然后单击将其添加到页面中。 模块列表是可搜索的，这意味着您也可以键入单词“ circle counter”，然后单击Enter以自动搜索并添加圆圈计数器模块！
添加模块后，将为您提供模块选项列表。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .
用例显示案例研究中的项目目标
使用循环计数器模块的最佳方法之一是说明 统计 用于案例研究或投资组合项目。
只需识别具有特定项目功能或目标的每个圆形流量计，即可使用户知道项目中包括哪些服务。 在此示例中，我将使用“圆形计数器”模块显示三个项目目标。
如下图所示，页面顶部使用Bar Counter模块包含项目的三个目标，页面底部包含使用Counter Number模块进行案例研究的结果。
让我们开始。
使用视觉生成器添加具有全宽（1列）布局的标准部分。 然后将一个圆形计数器模块添加到该行。
更新圆计数器设置，如下所示：
内容选项
标题：动画
编号：80
％签名：是的
栏背景颜色：#e07a5e
德观念选项
圆圈颜色：#e07a5e
文字颜色：黑暗
标题字体：默认
标题字体大小：26px
标题文字颜色：#405c60
字体号：默认
大小字体大小：46px
数字文字颜色：#405c60
保存设置
现在，将圆圈计数器模块复制两次，并将每个副本拖到行的第二和第三列。
由于您的设计元素已经转移到重复的模块中，因此您只需要更新圆形仪表的标题和编号即可。
这就是它！
访问该页面。
循环柜台内容选项
在“内容”选项卡中，您将找到模块的所有内容，例如文本，图像和图标。 所有控制 什么 出现在模块中的内容将始终位于此选项卡中。
标题
输入圆圈计数器的标题。 这通常是代表您正在查看的统计信息的单词。 它将显示在饼图中的数字下方。
名称
为循环计数器设置一个数字。 选择一个小于100的数字将使圆形图填充到与您输入的数字相等的百分比。 例如，输入数字20将用您的强调色填充20％的圆圈。
百分号
在这里，您可以选择是否在上面定义的数字后添加百分号。
酒吧背景色
这将更改条形的填充颜色。 填充颜色的数量由上面选择的“数字”控制。 如果您选择数字50和蓝色，则您的圆圈将用蓝色填充50％。
行政标签
这将更改发生器中的模块标签，以便于识别。 在Visual Builder中使用WireFrame视图时，这些标签将显示在Divi Builder界面的模块块中。
圆形柜台设计选项
在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。 此选项卡允许您修改模块的外观。 每个Divi模块都有一长串的设计设置，您可以用来调整几乎所有内容。
圆的颜色
这是将用于圆的未填充部分的颜色（负数，该空白未被“内容”选项卡中定义的条形的背景颜色填充）。
圆圈颜色的不透明度
您可以使用此设置降低圆角填充部分的不透明度。
文字颜色
在这里，您可以选择文字应为浅色还是深色。 如果您使用的是深色背景，则文本应为浅色。 如果背景较浅，则文本应为黑色。
标题字体
您可以通过从下拉菜单中选择所需的字体来更改文本的字体。 Divi随附了数十种由Google字体支持的超酷字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写和下划线选项来自定义文本样式。
标题字体大小
您可以在此处调整标题文本的大小。 您可以拖动时间间隔滑块以增加或减小文本的大小，也可以直接在滑块右侧的输入字段中输入所需的文本大小值。 输入字段支持不同的度量单位，这意味着您可以根据自己的大小输入“ px”或“ em”以更改其单位类型。
标题文字颜色
默认情况下，Divi中的所有文本颜色显示为白色或深灰色。 如果要更改标题的文本颜色，请使用此选项从颜色选择器中选择首选颜色。
标题字母的间距
字母间距会影响每个字母之间的间距。 如果要增加标题文本的每个字母之间的间隔，请使用间隔滑块调整间隔或在滑块右侧的输入字段中输入所需的间隔大小。 输入字段支持不同的度量单位，这意味着您可以根据自己的大小输入“ px”或“ em”以更改其单位类型。
标题行的高度
行高会影响标题文本每行之间的间隔。 如果要增加每行之间的间隔，请使用间隔滑块调整间隔或在滑块右侧的输入字段中输入所需的间隔大小。 输入字段支持不同的度量单位，这意味着您可以根据自己的大小输入“ px”或“ em”以更改其单位类型。
警察号码
您可以通过从下拉菜单中选择所需的字体来更改文本的字体。 Divi随附了数十种由Google字体支持的超酷字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写和下划线选项来自定义文本样式。
数字字体大小
您可以在此处调整带编号文本的大小。 您可以拖动时间间隔滑块以增加或减小文本的大小，也可以直接在滑块右侧的输入字段中输入所需的文本大小值。 输入字段支持不同的度量单位，这意味着您可以根据自己的大小输入“ px”或“ em”以更改其单位类型。
数字文字的颜色
默认情况下，Divi中的所有文本颜色显示为白色或深灰色。 如果要更改文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。
编号字母的间距
字母间距会影响每个字母之间的间距。 如果要增加文本的每个字母之间的间距，请使用间隔滑块调整间距或在滑块右侧的输入字段中输入所需的间距大小。 输入字段支持不同的度量单位，这意味着您可以根据自己的大小输入“ px”或“ em”以更改其单位类型。
数字线的高度
行高会影响数字文本每行之间的间距。 如果要增加每行之间的间隔，请使用范围滑块调整间隔或在滑块右侧的输入字段中输入所需间隔的大小。 输入字段支持不同的度量单位，这意味着您可以根据自己的大小输入“ px”或“ em”以更改其单位类型。
高级循环计数器选项
在“高级”选项卡上，您会找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。 在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。 您还可以将自定义CSS类和ID应用于模块，该模块可用于在子主题的style.css文件中自定义模块。
CSS ID
输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。
CSS类
输入用于此模块的可选 CSS 类。 CSS 类可用于创建自定义 CSS 样式。 您可以添加多个类，以空格分隔。 这些类可以在您的 Divi主题 使用 Divi 主题选项或 Divi Builder 页面设置添加到页面或网站的子 CSS 或自定义 CSS。
自定义CSS
自定义CSS也可以应用于模块和模块的任何内部元素。 在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将CSS添加到每个元素。 这些设置中的CSS条目已经嵌入了样式标签。 因此，您只需要输入用分号分隔的CSS规则即可。
能见度
此选项使您可以控制模块所在的设备。 您可以选择分别在平板电脑，智能手机或台式机上停用模块。 如果要在不同设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。
本教程就是这样。
