如何在 Elementor 中添加技能栏
您需要 Elementor 和免费的 Master Addons 插件。查看这个 进度条文档.
- 检查进度条是否在下面打开 主插件、小部件.
- 在 Elementor 编辑器中,搜索 进度条 并将其拖到页面上。
- 在统计栏中,编辑三个示例栏,然后单击"添加项目"了解更多信息。
- 为每个条设置标题和百分比,如果您想要不同的颜色,则设置条颜色。
- 在样式选项卡中,设置轨道并填充颜色、条形高度、间距和半径。
- 样式标题和百分比,然后预览页面并滚动到小部件。
根据需要添加尽可能多的技能栏
酒吧住在 统计栏 "内容"选项卡中的中继器。单击每个栏的"添加项目 ", 然后设置" 统计标题 (例如“网页设计”), the 百分比值 1到100,并且可选 酒吧颜色 for that bar。拖动项目重新排序。标题字段接受元素人动态标签。
- 一个小部件中的任意数量的条。
- 每个酒吧都有自己的标题、百分比和颜色。
- 没有自己颜色的条使用样式选项卡中的活动条颜色。
风格酒吧、标题和百分比
的 统计栏 样式部分设置方形或丸形条的条形 BG 颜色(空轨道)、活动条形颜色(填充)、条形之间的垂直间距(5 至 128px)、条形高度(1 至 96px)和统计条形边框半径。 统计标题 有对齐、颜色和排版,并且 统计百分比 酒吧内的数字有颜色和排版。
- 轨道和填充物有单独的颜色。
- 圆条的边框半径(以 px 为单位)或 %。
- Fill 动画播放一次,当小部件滚动到视图中时;更高的值需要更长的时间来填充。
进度条常见问题
了解用户对进度条询问最多的查询,并在一个地方找到答案。
当条滚动到视野中时,它们会动画化吗?
Yes。widget进入视口后每个条从零填充到它的值,每个百分点填充大约需要20毫秒,所以90%的条需要不到两秒,没有设置改变速度或关闭动画。
Progress Bars 小部件免费吗?
是。进度条是免费的Master Addons插件的一部分,包含每个内容和样式控制。这个小部件没有Pro版本。
移动设备上的进度条是否响应?
是的。条形采用其列的整个宽度,因此它们会随着屏幕而收缩。条形高度和垂直间距不是响应控制,但标题和百分比排版可以在平板电脑和移动设备上使用较小的字体大小。
我可以使用渐变来表示活动条颜色而不是纯色吗?
No。Bar BG颜色, 活动条颜色和每个条自己的颜色只取纯色, 如果需要渐变填充, 联系我们 我们可以建议一个 CSS 片段。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
