Wordpress插件与设计 - Elementor 基础教程 17 - 计数器小工具的设置和使用方法 - 特色图片

Elementor 基础教程 17 - 计数器小工具的设置和使用方法

Elementor计数器小工具是一种常用的数字展示工具,用于传递特定信息。

该工具不仅可以生成动态数字计数展示效果,还允许你设置数字的字体,颜色,大小,粗细等属性。这样既可以统一页面设计,又能吸引用户注意并直观地传递特定信息。

在需要用数字展示特定成果,项目,案例,合作伙伴,会员数等信息时,它可以发挥显著的效果。

本教程将说明计数器小工具的功能设置和使用方法。

Elementor 计数器小工具

首先,将计数器小工具拖放到编辑栏内,如下图所示。

将小工具拖放到编辑栏后,就会看到如下画面。

1.计数器小工具的内容标签

计数器的内容标签只有计数器设置项。其主要设置选项如下:

  1. 开始数字和结束数字
  2. 数字前缀和数字后缀
  3. 动画持续时长
  4. 千位数分隔
  5. 分隔器
  6. 标题

1-1.开始数字和结束数字

开始数字和结束数字是用来指定计数器数字开始和结束数值的设置选项。

刚拖放计数器小工具到编辑栏时,可以看到数字从0计数到100的动画效果。这是因为默认的开始数字是0,结束数字是100。所以会有计数从0到100的动态效果。

如果将开始数字设置为300,结束数字设置为800,计数器将从300开始计数,到数字800时结束计数。

反之,如果将开始数字设置为800,结束数值设置为300,计数器将从800开始计数,到数字300时结束计数。

开始数字和结束数字可根据传递给用户的信息进行设置。

1-2.数字前缀和数字后缀

数字前缀和数字后缀是在计数器数字的前后添加特定的数字或单位,文字等信息的设置选项。

如果在数字前缀输入人民币符号(¥),后缀输入《人民币》后,效果如下。

除了符号,文字,还可以输入特定的数字和英语字母。比如,1.2.3,或者A,B,C等。

1-3.动画持续时长

动画持续时长是用来指定计数器从开始数字到结束数字之间显示动态效果的时长的设置选项。

最低可设置数值为100,最高无限制。默认数值是2000。数值1000相当于1秒,所以默认的动画时长是2秒。

关于动画持续时长的设置,不建议设置得过长。动画展示效果过长会给人一种拖拉的感觉。建议设置在2-3秒之间。

1-4.千位数分隔

千位数分隔是用来显示或不显示千位分隔符号的设置选项。

选择显示后,当数值超过1000时会出现千位数分隔符。如下图所示。

1-5.分隔器

分隔器是用来指定千位分隔符表现形式的设置选项。符号的种类如下。

  • Default:逗号『,』
  • Dot:点『.』
  • Space:空格『空白』
  • Underline:下划线『 _ 』
  • Apostrophe:省略符号『 ‘ 』

关于使用哪个符号,可根据传递的内容进行选择。

1-6. 标题

标题是指定计数器计数数字的设置选项。

2. 计数器小工具的样式标签

计数器的样式标签有数字和标题的设置选项

2-1 数字

数字的主要设置选项如下:

  • 文本颜色:给计数数字指定或替换颜色的设置选项
  • 排版:给计数数字指定或替换字体,粗细,行高,装饰等排版设置选项
  • Text Storke:给计数数字添加描边效果的设置选项。可选择颜色和线的粗细。
  • 文本阴影:给计数数字添加阴影效果的设置选项。

2-2 标题

标题的主要设置选项如下:

  • 文本颜色:给计数器标题指定或替换颜色的设置选项
  • 排版:给计数器标题指定或替换字体,粗细,行高,装饰等排版设置选项
  • Text Storke:给计数器标题添加描边效果的设置选项。可选择颜色和线的粗细。
  • 文本阴影:给计数器标题字添加阴影效果的设置选项。

关于样式标签的数字和标题都是文本类的设置选项。所以详细的说明请参考《Elementor基础教程 – 文本编辑器 小工具的设置和使用方法》。

3. 计数器小工具的高级设置

高级设置是所有小工具通用的设置项,具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是计数器小工具的功能设置和使用方法。希望本篇内容对您使用Elementor有帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

快速 搜索
相关 文章
Wordpress插件与设计 - Elementor 专业教程 32 - Progress Tracker小工具的设置和使用方法 - 特色图片
Elementor 专业教程 32 - Progress Tracker小工...
Wordpress插件与设计 - WP教程 19 - 从选择主题到自定义设置,小白也能轻松掌握 - 特色图片
WP教程 19 - 从选择主题到自定义设置,小白也能...
Wordpress插件与设计 - Elementor 基础教程 13 - 星级小工具的设置和使用方法 - 特色图片
Elementor 基础教程 13 - 星级小工具的设置和使...
Wordpress插件与设计 - WP教程 18 - 设置自定义静态首页,打造吸引眼球的网站门面! - 特色图片
WP教程 18 - 设置自定义静态首页,打造吸引眼球...
Wordpress插件与设计 - WP教程 7 - 掌握添加、编辑图片以及常规设置的技巧 - 特色图片
WP教程 7 - 掌握添加、编辑图片以及常规设置的...
Wordpress插件与设计 - Elementor 通用教程 5 - 如何拷贝和粘贴不同网站的设计元素 - 特色图片
Elementor 通用教程 5 - 如何拷贝和粘贴不同网...
Wordpress插件与设计 - WP教程 15 - 新手小白也能轻松创建和管理页面 - 特色图片
WP教程 15 - 新手小白也能轻松创建和管理页面
Wordpress插件与设计 - Elementor 专业教程 27 - Lottie小工具的设置和使用方法 - 特色图片
Elementor 专业教程 27 - Lottie小工具的设置和...
Wordpress插件与设计 - Elementor 专业教程 21 - Blockquote小工具的设置和使用方法 - 特色图片
Elementor 专业教程 21 - Blockquote小工具的设...
Wordpress插件与设计 - Elementor 基础教程 3 - 标题小工具的设置和使用方法 - 特色图片
Elementor 基础教程 3 - 标题小工具的设置和使...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

从关键词到内容优化,提升博客流量的SE...

WP教程 与设计
Wordpress插件与设计 - JetEngine 使用教程 1 - 如何制作自定义文章类型以及进行具体设置和使用方法 - 特色图片

JetEngine 使用教程 1 - 如何制作自定...

Wordpress插件与设计 - Elementor 专业教程 17 - Review小工具的设置和使用方法 - 特色图片

Elementor 专业教程 17 - Review小工具...

Wordpress插件与设计 - WP教程 24 - 掌握WordPress的排版艺术,让你的内容展示方式更具吸引力! - 特色图片

WP教程 24 - 掌握WordPress的排版艺术...

Wordpress插件与设计 - Elementor 基础教程 8 - 间隔小工具的设置和使用方法 - 特色图片

Elementor 基础教程 8 - 间隔小工具的...

Wordpress插件与设计 - WP教程 1 - 为什么WordPress是小白建站的不二之选? - 特色图片

WP教程 1 - 为什么WordPress是小白建站...

Wordpress插件与设计 - WP教程 14 - 如何在文章概览中快速编辑和管理文章? - 特色图片

WP教程 14 - 如何在文章概览中快速编辑...

AI工具 与服务
AI工具与服务推荐 - flowith - AI生产力工具 - 特色图片

flowith - 革新沟通方式,与AI合作,创...

AI工具与服务推荐 - Visla - AI视频创作编辑平台 - 特色图片

Visla - AI赋能,轻松创作与编辑专业级...

YYP-2024-06-28-14-01-07

Supermanage AI - AI赋能,让你的一对...

YYP-2024-07-01-13-14-24

Brand24 - 聆听客户与受众的声音,专业...

AI工具与服务推荐 - SciSpace - 科研AI助手 - 特色图片

SciSpace - AI解构科研论文,快速理解...

AI工具与服务推荐 - andLLM平台 - AI应用开发服务 - 特色图片

andLLM - 多模态AI开发服务,为创新提...

Canva教程 与技巧
Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片

Canva新手指南4 – 告别平庸!用Canva打...

Canva使用教程 - Canva 新手指南 1 - 全面解析Canva文本框的基本功能! - 特色图片

Canva新手指南1 - 全面解析Canva文本框...

Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片

Canva 使用教程 9 - 如何巧妙地利用建...

Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片

Canva 相关教程 2 - Canva免费版与付费...

Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片

Canva 相关教程 3 - 设计初体验!用Can...

Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片

Canva新手指南5 - 掌握Docs的功能和技...

社媒运营 与营销
社媒运营推广 - Youtube - 解密YouTube用户互动策略!掌握频道人气的秘诀 - 特色图片

解密YouTube用户互动策略!掌握频道人...

社媒运营推广 - Youtube - 如何正确选择一款适合自己的视频编辑软件? - 特色图片

如何正确选择一款适合自己的视频编辑软...

社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片

新手必看!解锁YouTube视频广告投放优...

社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片

YouTube Shorts!解析短视频创作和收益...

社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片

将爱好转为事业!通过YouTube频道赚钱...

社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片

一文带你解析海外版小红书Lemon8!Z世...

AI工具 分类筛选
AI Main Category checkbox