进度条

单个进度条讲述一个故事,它们堆叠在一起显示整个技能集、服务阵容或项目的状态,而不会让读者为之工作。 进度条 小部件在 Elementor 的主插件 是为那个案例构建的,它将几个动画栏分组到一个小部件中,因此您可以根据需要添加尽可能多的动画栏,并将它们组合在一起或一次一个。

将其视为独立的多酒吧伴侣 进度栏小部件.不是为每个度量丢弃一个单独的小部件,而是从一个面板管理整个组,每个栏都有自己的标题、百分比和颜色,而共享的样式选项卡控制集合的外观。

喜欢先看?这篇简短的教程从小部件端到端走过, 从拖入到条形设计:

Progress Bars 小部件的作用 #

Widget 渲染一个水平条列表,当它们滚动到视图时,这些水平条会从零动画到其设置值。每个条都显示左侧的标题、百分比标签和颜色填充,该填充会增长以匹配您输入的数字。

与单条小部件的不同之处在于结构。这里的条住在一个名为"中继器"的中继器内 统计栏(so),所以你添加、复制、重新排序、删除栏,而不需要触摸画布,一个小部件,一组样式控件,任意数量的栏。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Elementor 编辑器中打开一个页面,条形将位于其中。

如何添加进度条小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 进度条的,或者向下滚动到主插件部分,在这里观看名称:有两个小部件读起来几乎相同。 进度条 是一个单条,并且 进度条 是团体。拖动 进度条 进入您的页面。

它会下降,三个样本栏已经填写完毕,因此您可以立即看到工作结果并从那里进行编辑,而不是开始空白。

"内容"选项卡中的每个栏进行编辑 #

打开 内容 tab,你就会找到 统计栏 repeater。每一行都是一条条, 点击一行展开, 就可以得到三个设置:

• 统计数据标题: bar上方显示的标签,如“网页设计”或“wordpress”。此字段采用elementor动态标签,因此您可以使用标签图标从帖子字段、作者元或其他动态源中提取标题。
• 百分比值: 0到100的数字,它设置条填充的距离和标签读取的内容输入 87 酒吧的占比达到 87%。
• 酒吧颜色: an optional color for this one bar。leave it empty to use global Active Bar Color, or set it here to override the group color for a single bar。

Per-bar颜色是使团体灵活的原因,将每个bar保持在一个品牌颜色上,或者给每个指标自己的色调,这样他们很容易一目了然。

添加无限条 #

要添加另一个栏,请单击 添加项目 repeater的底部。出现一个新条, 默认值可以重命名和设置。没有上限, 所以构建尽可能多的内容需要。任何行上的复制图标都复制一个条, 其设置完好无损, X图标删除一个。

内容选项卡还有一个 帮助文档 用于快速参考的链接和 包装链接 选项(专业功能)使整个小部件易于点击。当条形坐落在链接到某个地方的卡上时,该选项派上用场。

样式选项卡中的每个栏 #

切换到 风格 tab 来控制整个组的外观,这些设置一次性适用于每个条,这正是为什么 Content 选项卡中的每条覆盖值得了解的原因,Style 选项卡会闯入 统计栏, 统计标题, 统计百分比、和 图案.

统计栏 #

• 酒吧 BG 颜色: 每次填充后面的空轨道的颜色。
• 活动条颜色: "内容"选项卡中没有设置自己的条形颜色的任何条形的默认填充颜色。
• 垂直间距: 堆叠的杆之间的间隙。
• 酒吧高度: 柱子有多厚,以像素为单位。
• 统计条边框半径: round the corner。将四个值连成一个偶数半径,或者分别设置顶部、右侧、底部、左侧。

统计标题 #

此部分为每个栏上方的标签设计样式。

• 对齐: 标题文本的左侧、中间或右侧。
• 颜色: 的标题颜色。
• 版式: elementor 的其他类型选项的字体系列、大小、权重、变换的完全控制。

统计百分比 #

百分比标签有自己的颜色和字体控制,因此您可以将数字加粗并大或保持安静。它下方坐着 图案 节, 一个Pro选项,用于在条形上添加条纹或纹理填充物。

页面上的结果 #

当该部分进入视口时,发布或预览页面,条形从零动画化到其设置值。造型贯穿:自定义条形颜色、标题颜色、百分比大小、间距和高度均显示在实时页面上。

常见用例 #

• 技能栏 在 about 或简历页面上(设计、开发、营销)。
• 服务优势 在代理页面上,每次优惠一根酒吧。
• 项目或活动状态 显示为完成百分比。
• 特征分数 在比较块中,与 a 配对 比较表.
• 统计亮点 旁边是动画数字 计数器向上小部件.

使用 Progress Bar 的提示 #

• 首先设置组样式,然后覆盖。 选择一次活动条颜色和条高度,然后仅在您希望条突出的地方添加每条颜色。
• 保持百分比诚实。 号也是标签,所以设置为76的条读数“76%”, 填充与真实数字相匹配。
• 将高度和半径调在一起。 具有匹配半径的较高条读作圆形药丸;半径较大的细条看起来很短。
• 在模板中使用动态标题。 当条形位于帖子或存档模板中时,将统计标题连接到动态标签,以便每个条目都标记自己。
• 重复而不是重建。 复制图标克隆了一个带有颜色和排版的栏,这比手动设置新项目更重要。

常见问题 #

包裹起来 #

Progress Bars 小部件将一堆指标变成一个整洁的动画块,在 Stats Bars 中继器中添加条形,设置每个标题和百分比,单独或作为一个组为它们着色,并从 Style 选项卡中塑造整个单个独立条形,达到 进度栏小部件 相反。浏览完整内容 主插件小部件和扩展 要查看您还可以构建什么,请检查 定价页面 为专业版功能,如包装链接和条形图案。