进步酒吧

技能栏、资金目标和项目状态作为视觉效果的阅读效果都比作为句子中埋藏的数字更好。 进步酒吧 小部件在 Elementor 的主插件 为您提供一个带有标题和百分比的动画栏,以及一个在普通线、带有气泡的线、整圈和半圈轨距之间切换的样式预设下拉。

您设置标题和值,选择预设,然后为前栏、后栏和值着色以匹配您的品牌。本指南涵盖了小部件中的每个设置。

Progress Bar 小部件的作用 #

该小部件呈现一个进度指示符:标题、百分比值以及滚动到视图时填充到该值的条形。 样式预设 dropdown改变形状,因此相同的值可以显示为水平线,带有浮动气泡的线,甜甜圈或半圆轨距。

它有三个选项卡。 内容 持有头衔和价值。 风格 控制预设、正面和背面条颜色、气泡、标题和值文本。 高级 带有通常的 Elementor 间距和可见性选项。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 您想要显示的标签和百分比,例如 WordPress 60% 或 Java 85%。

如何添加进度栏小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 进度条的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到您的页面上,它会加载一个单栏,准备编辑。

向上看:有两个类似的小部件。 进度条 是一个单栏(本指南),并且 进度条 1个小部件内堆叠数个条形,对于几个不同样式的独立条形,单进度条是灵活的挑选。

设置标题和值 #

打开 内容 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 将小部件分解为可以自行风格的部分: 一般风格, 标题, 前酒吧, 后酒吧, 价值、和 图案 (一个专业选项)。

• 标题: 标签的颜色和排版。
• 前栏: 填充部分的颜色和宽度。
• 后栏: 后面未填充轨道的颜色。
• 值: 百分比文本的颜色和排版。

打开 前酒吧 设置填充颜色和宽度。这就是将您的品牌颜色贯穿整个条形或仪表的原因。

常见用例 #

• 技能栏 在约或简历页面上(wordpress 90%,设计 75%)。
• 资金或球门计 显示活动有多接近。
• 圈统计 在服务或结果块中。
• 半圆规 用于分数、评级或仪表板小部件。
• 项目状态 客户或投资组合页面上的栏。

使用 Progress Bar 小部件的提示 #

• 复制,然后编辑。 按您想要的方式设置一栏,然后复制它并更改标题和值。
• 保持秤诚实。 该值是一个百分比,因此 60 意味着 60% 充满。
• 匹配前后条形对比度。 品牌颜色填充物后面的光轨清晰可见。
• 使用气泡获取确切的数字。 线泡预设将百分比放在填充上。
• 选择上下文的形状。 技能列表、圈子和粉丝的行,用于单一出色的统计数据。

观看视频教程 #

喜欢在屏幕上跟进?下面的视频教程从头到尾浏览 Progress Bar 元素,显示每个样式预设、颜色和值在 Elementor 编辑器中的工作原理。

常见问题 #

包裹起来 #

Progress Bar 小部件将一个普通的百分比变成动画线、气泡、圆圈或标距,设置标题和值,选择预设,然后为前栏、后栏和值着色,以匹配您的设计,相关统计小部件请参见 计数器小部件 和 信息框小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。