数字比句子更能说服:5.5K 通知已发送,视频观看次数为 120M。 计数器向上小部件 在 Elementor 的主插件 将这些统计数据放入一排卡片中,当页面加载时,这些卡片从零开始计数,每个卡片都有一个图标、K+ 或 M+ 等后缀以及自己的样式。
本指南从头开始构建了一个四统计部分:项目、数字、图标、布局和卡片样式,以实时页面上完成的计数器结束。
Counter Up 小部件的作用 #
1个小部件持有一组计数器项目,每个项目都是一个stat:一个在页面加载时从零开始计数的数字,它周围有一个前缀或后缀,它下面有一个标题,顶部有一个可选的图标或图像,小部件将项目排列成列,并将它们作为一个组进行样式,因此stats频段保持一致,而不会每张卡片摆弄。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 在基本小部件下的主插件选项面板中启用的计数器向上小部件。
- Your real numbers。stats 部分,其中包含发明的数字,比根本没有统计数据的危害更大。
如何添加 Counter Up 小部件 #
在 Elementor 编辑器中,搜索 元素 面板为 反击 zai页面上拖动,它载入了画布上已经数着的样件,yin此动画从第一秒就可见。
设置每个计数器项目 #
打开 反击内容 he单击列表中的一项, 每一项都携带全套的per stat控件:
- 类型: stat 之上没有、图标、图像。图标打开元素库;图像打开媒体库。
- 标题: 数字下的标签,例如“通知交付”。
- 数字前缀和后缀: 号码周围的文本。 “$”前缀或“K+”后缀将 5.5 变成 $5.5 或 5.5K+。
- 数: 计数器爬升到 的值。小数起作用,因此带有 K+ 后缀的 5.5 读取 5.5K+。
- 背景: 每件卡片颜色,适合何时一项统计数据应该突出显示。
后缀技巧让大数字保持简短:演示不是动画到 120,000,000,而是 M+ 后缀计数到 120。卡片保持更干净,没有人计算要检查的零。
每件商品 背景 colors 只是那张卡片。用于突出显示标题统计, 或者跳过它, 让共享的盒子样式处理所有四个:
选择列和内容位置 #
项列表下方, 列 设置每台设备共享一行(1、2、3、4 或 6)的计数器数量,并具有响应式切换。 内容位置 将标题相对于数字放置:顶部、左侧、右侧或底部。演示尝试 2 列并排的数字和标题,然后返回堆叠的 4 列。
调整图标 #
的 图标设置 节控制每张卡片上的图标块: 图标/图像位置 (统计的左、上、右), 图标尺寸、和 图标圆或图像尺寸 为字形后面的彩色光盘。演示在86个像素圆上运行30个像素图标。
为卡片设计样式 #
在 风格 选项卡, 计数器盒式风格 覆盖共享卡外观: 背景颜色, 填充, 保证金, 边框类型, 边界半径、和 盒子阴影。演示降落在软粉色卡片上,有20个像素填充和边距,这将四个无硬边框的统计数据分开。
样式数字、标题和图标 #
的 内容风格 section 分成四组, 卡片上的每个元素各一组:
- 图标样式: glyph 颜色和后面的圆圈颜色,演示将圆圈变成深紫色,并带有白色图标。
- 编号样式: 统计数据本身的颜色和排版,这是卡片上最大的文本。
- 数字前缀: 它自己的颜色、排版、大小和边距,因此货币符号可以小于数字。
- 标题风格: 标签的颜色、排版和页边距。
页面上的结果 #
Live页面上, 页面加载后大约两秒内数字从零开始计数, 然后确定最终值, 这里是完成带:
常见用例 #
- 公司统计数据带:服务客户、交付项目、营业年限。
- SaaS 证明部分:用户、正常运行时间、集成。
- 投资组合编号:活动运行、产生的收入、编辑时间。
- 非营利影响:送餐、志愿者、筹集资金。
- 课程和社区页面:学生、课程、评论。
更好的计数器的提示 #
- 使用大数字的后缀。 M+ 后缀数到 120 比数到九位数字读起来更干净。
- 将计数器放在页面高处。 当页面加载时,计数会运行一次,因此远低于折叠的计数器可能会在任何人滚动到它们之前完成。
- 将设置保持为三到四个统计数据。 六个计数器竞争;四个被阅读。
- 以最强数字领先。 访客从左向右阅读,可能无法完成该行。
- 将图标圆圈与您的调色板匹配。 圆圈颜色是卡片上最明显的风格选择;演示版的粉红色紫色作品,因为两者都来自一个调色板。
- 检查移动列计数。 手机上的四列挤压数字;响应式列控件一键修复。
视频教程 #
Counter Up 小部件在行动, 这段视频将通过全套设置, 从第一个项目到现场页面上的动画统计频段:
常见问题 #
Master Addons 中的 Counter Up 小部件是什么?
是动画统计部分的 Elementor 小部件,每个项目都保存着一个在页面加载时从零开始计数的数字,外加一个前缀、后缀、标题,以及一个可选的图标或图像列、图标大小和卡片样式,这些数字在整套中共享。
120M+而不是120000000我该如何显示?
Number 设置为 120,Number 后缀设置为 M+,计数器动画为 120,显示 120M+,同样适用于 K+ 千和十进制值,如 5.5,带有 K+ 后缀。
每个计数器可以有自己的图标和颜色吗?
是。每件物品通过类型控件选择自己的图标或图像,每件物品都有自己的背景颜色。共享的图标大小、圆圈大小和卡片样式来自图标设置和样式选项卡。
计数动画什么时候开始?
数字从零数到页面加载后立即设置的值,大约两秒钟。动画播放一次,不会等待小部件滚动到视图中。
我可以改变连续坐多少个柜台吗?
是。Counter Up Content中的列下拉提供1、2、3、4或6列,并带有响应式切换,因此四列桌面频段可以下降到平板电脑上的两列和手机上的一列。
Counter Up 与 Elementor Counter 小部件有何不同?
Elementor Counter 每小部件显示一个数字,并让您设置起始数字、持续时间和千分隔符,当数字滚动到视图中时,它会计数。Counter Up 在一个小部件中容纳许多计数器,其中包含图标、卡片样式和 1、2、3、4 或 6 列,并且在页面加载中计数一次。
包裹起来 #
Counter Up小部件将普通数字变成一个统计频段,移动:每项图标、前缀和后缀、共享列和卡片样式,以及一个计数动画,该动画会完全吸引眼睛一次。浏览全套 主插件小部件和扩展 看看还有什么与插件一起附带。 计数器产品页面 与 Elementor Counter 小部件进行比较。
