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 专业教程 22 - Facebook Button小工具的设置和使用方法 - 特色图片
Elementor 专业教程 22 - Facebook Button小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 33 - Query的设置和使用方法 - 特色图片
Elementor 专业教程 33 - Query的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 21 - Blockquote小工具的设置和使用方法 - 特色图片
Elementor 专业教程 21 - Blockquote小工具的设置和使用方法
Wordpress插件与设计 - WP教程 3 - 一文解析WordPress帖子与页面,轻松掌控网站展示方式 - 特色图片
WP教程 3 - 一文解析WordPress帖子与页面,轻松掌控网站展示方式
Wordpress插件与设计 - Elementor 专业教程 33 - 制作MegaMenu的步骤以及使用方法 - 特色图片
Elementor 专业教程 33 - 制作MegaMenu的步骤以及使用方法
Wordpress插件与设计 - Elementor 专业教程 25 - Facebook Page小工具的设置和使用方法 - 特色图片
Elementor 专业教程 25 - Facebook Page小工具的设置和使用方法
Wordpress插件与设计 - WP教程 10 - 添加音视频内容,使展示页面更加丰富多彩! - 特色图片
WP教程 10 - 添加音视频内容,使展示页面更加丰富多彩!
Wordpress插件与设计 - Elementor 通用教程 6 - Elementor Kit Library的使用方法 - 特色图片
Elementor 通用教程 6 - Elementor Kit Library的使用方法
Wordpress插件与设计 - WP教程 24 - 掌握WordPress的排版艺术,让你的内容展示方式更具吸引力! - 特色图片
WP教程 24 - 掌握WordPress的排版艺术,让你的内容展示方式更具吸引力!
Wordpress插件与设计 - Elementor 专业教程 20 - Share Buttons小工具的设置和使用方法 - 特色图片
Elementor 专业教程 20 - Share Buttons小工具的设置和使用方法
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - PR-image.webp

Elementor

建站必备插件推荐
Elementor是一款WordPress平台上的可视化页面构建器插件,无需编程即可设计网页

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Astra Theme

建站主题推荐
Astra Theme是一个快速、轻量级且高度可定制的WordPress主题,适合各种网站

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Crocoblock

建站功能插件推荐
Crocoblock是一系列高功能的Elementor附加插件,用于创建动态内容和专业级网站

访问官网
副业时代 站内使用 elementor 免费教程 横板图像 - image-2.webp

Elementor Free Widget

Elementor 免费版小工具
是设计网页时所需的基础类工具。
大约包含30多个小工具

访问课程页
副业时代 站内使用 elementor 专业教程 横板图像 - image-2.webp

Elementor Pro Widget

Elementor 专业版小工具
是面向专业熟练用户的高级设计套件。
大约包含30多个小工具

访问课程页
已阅读 文章
您还没有阅读任何文章
AI Tools Post
AI工具与服务推荐 - 昊天AI遥感智能解译平台 - 遥感图像解译服务 - 特色图片
昊天AI遥感智能解译平台 - 遥感图像智能分类,助力行业数据分析,提升决策效率
YYP-2024-06-28-14-01-25
Loopin - 您的AI会议助手,让高效会议触手可及!
AI工具与服务推荐 - Grok - 高级AI语言模型 - 特色图片
Grok - 高性能开源语言模型,领跑AI领域,实现多任务零样本学习
AI工具与服务推荐 - 星火绘镜 - AI视频创作平台 - 特色图片
Typemovie - 文字变视频,编织故事的精彩世界!
AI工具与服务推荐 - Whismer - 智能AI问答助理工具 - 特色图片
Whismer - 更专业、更贴心的AI个人助理!
AI工具与服务推荐 - RODIN Diffusion - AI 3D数字人像生成器 - 特色图片
RODIN Diffusion - 雕塑栩栩如生3D数字替身,展现独特魅力!
Canva Post
Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片
Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品
Canva使用教程 - Canva 新手指南 2 - 告别PS!全面解析Canva 图像编辑功能及其使用方法 - 特色图片
Canva新手指南2 – 告别PS!全面解析Canva 图像编辑功能及其使用方法
Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
Canva使用教程 - Canva 新手指南 7 - 掌握Canva Mockup功能!轻松打造完美合成图像 - 特色图片
Canva新手指南7 - 掌握Canva Mockup功能!轻松打造完美合成图像
Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片
Canva新手指南4 – 告别平庸!用Canva打造与众不同PPT演示文稿
Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片
Canva 使用教程 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍!
Smm Post
社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片
新手必看!解锁YouTube视频广告投放优化技巧,提升转化率
社媒运营推广 - Youtube - 从0到10万!12个实用技巧快速提升YouTube频道的订阅量 - 特色图片
从0到10万!12个实用技巧快速提升YouTube频道的订阅量
社媒运营推广 - Youtube - 如何正确选择一款适合自己的视频编辑软件? - 特色图片
如何正确选择一款适合自己的视频编辑软件?
社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片
一文读懂YouTube Premium会员权益!让你不再犹豫
社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片
一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地!
社媒运营推广 - Youtube - YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里! - 特色图片
YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里!
AI工具 分类筛选
AI Main Category checkbox