技能栏、资金目标和项目状态作为视觉效果的阅读效果都比作为句子中埋藏的数字的阅读效果更好。免费的 进度栏小部件 在 Elementor 的主插件 为您提供一个带有标题和百分比的动画栏,以及一个在普通线、带有气泡的线、整圈和半圈轨距之间切换的样式预设下拉。
您设置标题和值,选择预设,然后为前栏、后栏和值着色以匹配您的品牌。本指南涵盖了小部件中的每个设置。
Progress Bar 小部件的作用 #
该小部件呈现一个进度指示符:标题、百分比值以及页面加载时填充到该值的条形。 样式预设 dropdown改变形状,因此相同的值可以显示为水平线,带有浮动气泡的线,甜甜圈或半圆轨距。
它有三个选项卡。 内容 持有头衔和价值。 风格 控制预设、正面和背面条颜色、气泡、标题和值文本。 高级 带有通常的 Elementor 间距和可见性选项。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 您想要显示的标签和百分比,例如 WordPress 60% 或 Java 85%。
如何添加进度栏小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 进度条的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到您的页面上,它会加载一个单栏,准备编辑。
向上看:有两个类似的小部件。 进度条 是一个单栏(本指南),并且 进度条 (thexp),在2019年10月10日开始实施,在2019年10月11日开始实施,在2019年10月11日开始实施,在2019年10月11日开始实施 进度条小部件)在一个小部件内堆叠几个条,对于几个不同样式的独立条,单进度条是灵活的拨片。
设置标题和值 #
打开 内容 tab。field只有两个,这使得设置保持快速。
- 标题: 栏上方的标签,例如 WordPress 或 Design。
- 值: 条形填充的百分比为 0 到 100。
Progressbar 由于每个都是一个栏,所以通过复制小部件来构建一个集合,右键单击它,选择 Duplicate(或按 Ctrl/Cmd + D),然后更改每个副本上的标题和值,这就是上面 WordPress 和 Java 栏并排结束的方式。
选择预设的样式 #
切换到 风格 选项卡并打开 一般风格. X = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 样式预设 下拉是您选择形状的地方。 线泡沫 preset 添加一个浮动气泡,显示填充结束时的百分比和游乐设施。
- 样式预设: 线路、线路泡泡、环形和风扇(半环轨距)。
- 气泡颜色: 气泡预设上百分比气泡的颜色。
- 气泡位置: 将气泡向上或向下移动到杆上。
圆形和半圆形规格预设 #
的 圈 预设画一个完整的甜甜圈,百分比位于中间,适合紧凑的统计块。
的 范 预设可绘制半圆轨距,非常适合仪表板式评级或车速表外观。
风格酒吧部分 #
的 风格 tab 将小部件分解为可以自行风格的部分: 一般风格, 标题, 前酒吧, 后酒吧、和 价值。如果免费的 图案 扩展已打开,a 图案 装饰覆盖层部分也出现在此选项卡中。
- 标题: 标签的颜色和排版。
- 前栏: 填充部分的颜色和宽度。
- 后栏: 后面未填充轨道的颜色和宽度。
- 值: 百分比文本的颜色和排版。
打开 前酒吧 设置填充颜色和宽度。这就是将您的品牌颜色贯穿整个条形或仪表的原因。
常见用例 #
- 技能栏 在约或简历页面上(wordpress 90%,设计 75%)。
- 资金或球门计 显示活动有多接近。
- 圈统计 在服务或结果块中。
- 半圆规 用于分数、评级或仪表板小部件。
- 项目状态 客户或投资组合页面上的栏。
使用 Progress Bar 小部件的提示 #
- 复制,然后编辑。 按您想要的方式设置一栏,然后复制它并更改标题和值。
- 保持秤诚实。 该值是一个百分比,因此 60 意味着 60% 充满。
- 匹配前后条形对比度。 品牌颜色填充物后面的光轨清晰可见。
- 使用气泡获取确切的数字。 线泡预设将百分比放在填充上。
- 选择上下文的形状。 技能列表、圈子和粉丝的行,用于单一出色的统计数据。
观看视频教程 #
喜欢在屏幕上跟进?下面的视频教程从头到尾浏览 Progress Bar 元素,显示每个样式预设、颜色和值在 Elementor 编辑器中的工作原理。
常见问题 #
Master Addons 中的进度条小部件是什么?
Elementor小部件,它显示一个带有标题和百分比的动画进度指示器,一个样式预设下拉在一行、一行带有气泡、一个整圈、一个半圈的量规之间切换,你从Elementor面板上为每个部分着色。
小部件包含哪些进度条样式?
Line、Line Bubble、Circle、Fan四个预设,Line为素色横条,Line Bubble增加浮动百分比气泡,Circle画一个中心有值的满圆环,Fan画一个半圆轨距,所有轨距的值都保持不变。
我可以在 Elementor 中制作圆形或仪表进度条吗?
是的。将样式预设设置为圆形,用于中间百分比的完整甜甜圈,或设置为扇形,设置为半圆形标距。两者都将动画设置为您设置的值,并且可以通过样式选项卡中的前栏和后栏部分着色。
如何添加几个进度条?
Progressbar 小部件都是一个栏,因此复制小部件并更改每个副本上的标题和值。将副本放在一行技能栏的列中。对于一个小部件内管理的几个栏,请使用单独的 Progressbars 小部件。
进度条有动画吗?
Yes, once。page 加载时, 栏从零到它的值大约一秒钟, 而不是当它滚动到视图中时, 所以放置在顶部附近的栏显示运动效果最好。它在行、圆和扇预设上工作相同。
包裹起来 #
Progress Bar 小部件将一个普通的百分比变成动画线、气泡、圆圈或标距,设置标题和值,选择预设,然后对前栏、后栏和值进行着色,以匹配您的设计概览以及与 Elementor 自己的 Progress Bar 的比较,请参阅 元素圈进度栏小部件 page。的相关小部件,请参见 进度条 为技能酒吧, 阅读进度吧 对于滚动指示器, 计数器向上小部件 和 信息框小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
