Divi教程：如何使用数字计数器模块

数字计数器模块 WordPress主题 Divi 是一种以有趣和引人入胜的方式显示数字的好方法。该模块通常用于显示统计关于您或您的业务。例如，在 Facebook 上显示您的客户或关注者数量是展示社交证明的好方法。

如何添加模块Divi的计数器编号

在您可以将计数器模块添加到您的页面之前，您必须首先跳转到 Divi Builder。一旦 Divi主题安装在您的网站上，您会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。然后点击按钮 使用Visual Builder 以可视模式启动发电机。您也可以点击按钮 使用Visual Builder 如果您已连接到WordPress仪表板，则在前台浏览网站时。

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。新模块只能添加到行内。如果要开始新页面，请记住先向页面添加一行。

在模块列表中找到数字计数器模块，然后单击它以将其添加到页面中。模块列表是可搜索的，这意味着您也可以键入单词“ number counter”，然后单击“ Enter”以自动查找并添加数字计数器模块！添加模块后，模块选项列表将为您打招呼。这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：使用数字计数器模块显示项目结果

使用数字计数器模块的一个好方法是说明统计用于案例研究。只需用数字标记每个计数器，这样用户就可以轻松地看到项目的成功。在这个例子中，我使用数字计数器模块来显示四个项目结果。

如您所见，页面顶部使用模块“ 吧台页面底部包括使用数字计数器模块进行案例研究的结果。

页面上显示使用数字模块进行案例研究的结果的部分，需要使用专门的部分。使用Visual Builder，在页面上添加一个专门的部分，然后选择以下布局：

选择该部分右侧的1列布局，然后输入案例研究结果所需的标题和文本。

在该部分右侧的2列布局的正下方插入1列的布局。

现在，将您的第一个数字计数器模块添加到左列。

更新数字计数器的参数，如下所示：

内容选项

标题：新访客
编号：54210
符号百分比：OFF

德观念选项

文字颜色：黑暗
标题字体：默认
标题字体大小：20px
标题文字颜色：＃405c60
标题行的高度：1em
字符数：默认，粗体
字符数：60px
数字文字颜色：＃e07a5e
数字行高：72px

保存设置

复制Number Counters模块并将其拖到相邻的右列中，并更新Title和Number选项。

复制包含两个数字计数器模块的行，以便在下面显示另外两个数字计数器。

然后更新这些标题和编号选项。现在，您拥有所有四个全数字计数器。

不要忘记在专用部分的左列/侧面添加667 x 320图像。

完成了！此案例研究页面上的数字计数器和条形码计数器的组合真正使内容引人入胜。

数字计数器内容选项

在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。所有控制什么出现在模块中的内容将始终在此标签中找到。

标题

输入计数器的标题。这将以较小的文字显示在数字下方。

名称

这是计数器要计数的数字。当您向下滚动页面并到达计数器时，该数字将从0开始快速计数，直到达到您在此处设置的数字为止。只能在此处放置数值。

百分号

在这里，您可以选择是否在上面定义的数字后添加百分号。

背景颜色

为模块定义自定义背景色，或留空以使用默认颜色。

背景图像

如果设置，此图像将用作此模块的背景。要删除背景图片，只需从设置字段中删除URL。背景图像将出现在背景颜色的顶部，这意味着应用背景图像时背景颜色将不可见。

管理员标签

这将更改构造函数中的模块标签，以便于识别。在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”以更改其单位类型。

使用边框

启用此选项将在模块周围放置边框。可以使用以下条件参数来自定义此边框。

边界的颜色

此选项会影响边框的颜色。从颜色选择器中选择一种自定义颜色，以将其应用于边框。

边界的宽度

默认情况下，边框为1像素宽。您可以通过拖动范围滑块或在滑块右侧的输入字段中输入自定义值来增加此值。支持自定义度量单位，这意味着您可以将默认单位从“ px”更改为em，vh，vw等。

边框样式

边框支持八种不同的样式：实心，点缀，点缀，双点，凹槽，山脊，覆盖和开始。从下拉菜单中选择所需的样式，以将其应用于边框。

自定义填充

填充是在模块内部及其边缘与内部元素之间添加的空间。您可以将自定义填充值添加到模块的四个侧面中的任何一个。要删除自定义边距，请从输入字段中删除添加的值。默认情况下，这些值以像素为单位进行度量，但是您可以在输入字段中输入自定义度量单位。

先进的数字计数器选项

在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。您还可以将自定义CSS类和ID应用于模块，该自定义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规则即可。

能见度

此选项使您可以控制模块所在的设备。您可以选择在平板电脑，智能手机或台式机上分别停用模块。如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。

[vc_row center_row =“ yes”] [vc_column宽度=“ 1/2”] [vcex_button target =“空白” layout =“展开” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃18b69d” custom_hover_background =“＃118d7a” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载主题[/ vcex_button] [/ vc_column] [»vc_column] =» 1/2英寸] [vcex_button url =“ https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target =“ blank” layout =“ expanded” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃c4226e” custom_hover_background =“＃8d184f” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载模板DIVI [/ vcex_button] [/ vc_column] [/ vc_row]