主要外卖
- Elementor 没有路线图小部件,因此 Elementor 路线图通常使用时间线小部件构建,其中每个项目都是一个功能或阶段。
- Master Addons Timeline 小部件允许每个项目显示自定义标签而不是日期,这适合路线图状态,例如发货、进行中、下一步和探索。
- 公共产品路线图最适合状态标签或季度,因为路线图上的确切日期会变成客户记住的承诺。
- Timeline 小部件可以垂直显示路线图,其中左、中、叠加或右对齐,或者显示带有箭头的水平旋转木马。
- Timeline 小部件的样式选项卡中的聚焦状态会给出访问者已滚动到自己的卡片背景和点颜色的项目。
Elementor路线图页面向客户显示您已发货的内容,您正在构建的内容以及接下来会发生什么。 元素 不包括路线图小部件,但路线图是具有状态代替日期的时间线,因此时间线小部件执行此操作。本指南使用 主插件时间线小部件.
示例是一个四项软件路线图:发货、正在进行、下一步和探索。相同的构建适用于课程计划、施工进度表或入职流程。您将设置项目、交换标签日期、选择布局和样式阶段。
目录
产品路线图页面上发生了什么
A产品路线图页面按发布距离的大小顺序列出计划的工作,每个条目需要三件事:一个状态,一个简短的名字和客户得到的一句话。
大多数公共路线图使用两个系统之一来显示状态:
| 系统 | 示例标签 | 当使用它时 |
|---|---|---|
| 状态标签 | 发货,正在进行中,接下来,探索 | 您不想承诺日期 |
| 时间桶 | 2027 年第一季度、2027 年第二季度、稍后 | 你们分季度计划,可以站在他们身后 |
| 确切日期 | 2027 年 3 月 14 日 | 日期是固定的,例如活动或启动 |
Status标签是软件最安全的选择,公开页面上的一个滑落的日期被截图,而像“Next up”这样的标签不能滑落。
Elementor 中如何构建路线图
您需要 Elementor 和 Master Addons。路线图本身是一个设置为自定义时间线的时间线小部件。
第 1 步:规划阶段
开小编前写好清单,四到八项就足够了,举个例子:
| 标签 | 特点 | 一行描述 |
|---|---|---|
| 运送 | 结账重新设计 | 一页结帐,带保存的推车。 |
| 正在进行中 | 团队工作空间 | 共享项目、角色和评论。 |
| 下一步 | 移动应用程序 | 具有离线模式的 iOS 和 Android 应用程序。 |
| 探索 | 公共 API | Webhook 和用于集成的 REST API。 |
2步:添加时间轴小部件
使用 Elementor 编辑路线图页面,搜索小部件面板 时间线 并将其拖到页面上。保留 时间轴类型 上 自定义时间表.小部件以三个示例项开头,用 添加项目 对于第四个,或复制行上的重复图标来复制一个。
小部件新增? Elementor 中如何创建时间轴 走过每一个控制点。
3步:用自定义标签替换日期
打开第一个项目。改变 秀 从日期到 自定义标签然后键入中的状态 标签 field。content编辑器中,把第一行做一个带有特征名称的标题,并在其下写下描述。
对每个项目重复。可选的 链接 field 使整张卡片可点击,这对于将已发送的功能发送到其发布帖子或其文档很有用。
4步:选择布局
上面的中心布局左右交替。另外两种布局非常适合路线图。
左对齐。 在"样式"选项卡中,打开 布局 并设置 水平对齐 to Left。每张卡片都坐在一侧,里面有它的标签,这样读起来就像一个列表,当描述运行更长时间时,更容易扫描。
水平。 在"内容"选项卡中设置 时间表样式 到水平时间轴。相位变成一个旋转木马,标签位于线以上。这需要一行,因此它适合在主页或定价表下。
旋转木马设置已覆盖 elementor 中如何创建水平时间线.
第 5 步:设计阶段
打开"样式"选项卡并完成四个部分。
- 卡:填充、边框半径以及标题和内容颜色。聚焦选项卡为访问者滚动到的卡片设计样式。
- 日期:状态标签的排版和颜色。带有品牌颜色的粗体使它们读作标签。
- 线:背景是完整的轨道,进度颜色在访客滚动时填写。
- 积分:一个点、一个图标或一个图像,具有单独的默认、悬停和聚焦颜色。
Content面板中每个项目还有自己的Style标签,仅针对该项目的点和颜色设置,用它给Shipped项目一个与其他项目不同的点颜色,所以完成的工作一目了然。
想先看看更多布局吗? 的 元素器时间线小部件 page 有现场演示,包括横向路线图。
路线图周围要放什么
路线图页面的读数更好,在时间线上下各有一点上下文。
- 简短的介绍 这说明页面更新的频率。
- 一个反馈链接 在时间轴下,转到表单或功能请求板。
- 一个更改日志 对于已经发货的东西。 更改日志小部件 在同一页面中列出版本条目。
- 数字、如果你有。一排 反击 小部件可以显示今年发货的功能。
- A 进度指标 对于一个大项目,使用 进度栏小部件.
如果路线图仅针对客户,则 显示条件指南 显示如何向已注销的访问者隐藏部分。
常见问题
Elementor 有路线图小部件吗?
No。Elementor和Elementor Pro没有路线图或时间线小部件,大多数Elementor路线图都是用一个附加组件的时间线小部件构建的,每个项目都用作一个阶段或功能。
我可以在 Elementor 中显示没有日期的路线图吗?
是在主插件时间轴小部件中,在每个项目上设置显示到自定义标签,并键入一个状态,例如已发货或下一步。标签取代点旁边的日期。
公共路线图应该是垂直的还是水平的?
当每个阶段都有几行描述时使用垂直,当路线图是另一个页面内三到六个阶段的短条带时使用水平。时间线小部件通过时间线样式控件在它们之间切换。
如何标记已完成的路线图项目?
Shipped 改成标签,并在物品自己的样式标签中赋予它不同的点颜色,您还可以向发布帖子添加链接,以便访问者阅读更改的内容。
最后的想法
Elementor路线图是一个时间轴小部件,其中有四到八个自定义时间轴项目,显示设置为自定义标签,并在每个标签字段中有一个状态。选择中心、左侧或水平布局,然后使用卡片、日期、行和点部分使发货工作与计划工作分开。
从演示开始 时间轴小部件页面 并用您自己的阶段替换样本项目。
相关阅读
