跳至正文
帮助
编辑器版块与区块

如何展示带动画的数字和统计数据(数据指标版块)?

使用数据指标版块展示满意顾客数、已送达订单数或经营年限等关键数字:顾客滚动到这里时数字会向上计数,可设置前缀和后缀(+、%、K)、标签在上方或下方、每行项目数、字体大小、粗体以及分隔线。

阅读时间 3 分钟

数据指标版块显示一排数字,例如“10,000+ 满意顾客”或“98% 好评”。顾客滚动到这里时,每个数字都会从零开始向上计数。

添加版块

  1. 打开建站工具,在页面标签中选择首页。
  2. 在版块标签中,点击添加新版块,在内容分组中选择数据指标。
  3. 选择该版块并点击添加新区块,添加一个统计数据(一个数字)。您也可以添加分隔线,把统计数据分成几组。

它只在首页提供,每页最多 2 个。每个数据指标版块最多容纳 8 个统计数据和 7 条分隔线。

版块设置

  • 每行项目数(1 到 8):并排显示的统计数据数量。在小屏幕上每行可能会显示得更少,以免数字被挤压。
  • 方向:垂直把标签放在数字的上方或下方,水平把两者并排放置。
  • 字体大小:数字的大小,单位为像素。
  • 粗体:让数字加粗。
  • 版块宽度、配色方案、内边距以及自定义 CSS标签。

每个统计数据

  • 值:数字。只能填写整数。大数字会带有千位分隔符,例如 10,000。
  • 前缀:数字前面的短文字,例如 $。
  • 后缀:数字后面的短文字,例如 +、% 或 K。
  • 文本位置:顶部或底部,把标签放在数字上方或下方。
  • 间距:数字与其标签之间的空白。

标签是统计数据中的一个文本区块(每个统计数据一个)。点击它可以修改文字、大小或对齐。请参阅组、文本、按钮和分隔线区块:布局组件设置如何运作?

分隔线

此版块中的分隔线会占满版块的整个宽度。它不会夹在同一行的两个数字之间,而是横向画一条线,让它前面和后面的统计数据各成一组。把它拖到您想要的位置。它的粗细、长度和内边距与其他分隔线的设置方式相同,线条使用配色方案的边框颜色。

示例

  • 大数字:要显示“250K+ 订单”,在值中输入 250,在后缀中输入 K+。这样更短,也更易读。
  • 百分比:值 98,后缀 %,标签例如“的顾客推荐我们”。
  • 年份:值 12,标签例如“年经营经验”。
  • 整齐的一行:每行项目数等于您的统计数据个数,并开启粗体,让数字更醒目。
  • 两组数据:四个关于顾客的统计数据,一条分隔线,再接四个关于配送的统计数据。

小贴士

  • 计数动画只在版块第一次进入视野时播放一次。
  • 某个统计数据只有数字没有标签?它的文本区块已被隐藏或删除。选择该统计数据,点击添加新区块即可重新添加。
  • 数字在手机上换成了两行?这是正常的:屏幕太窄时,版块每行会显示更少的统计数据。
  • 在设备上开启了减少动态效果的顾客会直接看到最终数字,没有计数动画。
  • 只展示真实的数字。数字不真实时,顾客会察觉。

仍需帮助?

给我们留言,我们会回复你。

联系我们