主要外卖
- Elementor 和 Elementor Pro 没有时间线小部件,因此 Elementor 水平时间线需要附加小部件或具有自定义 CSS 的手工构建容器行。
- 主插件时间线小部件通过时间线部分下的内容选项卡中的一个控件"时间线样式"从垂直切换到水平。
- Master Addons 小部件中的水平时间线是旋转木马,其导航控制提供六个选项:箭头和点、箭头和分数、箭头、点、进度和无。
- 时间轴小部件中的旋转木马设置包括旋转木马或 Coverflow 布局、默认速度为 5000 毫秒的自动播放、悬停暂停、滑动滚动、中心滑动和循环。
- 水平布局仅适用于自定义时间线项目,因为由博客文章构建的帖子时间线保持垂直。
Elementor水平时间线将您的日期从左到右排列,每张卡片上方的线上有一个点,并用箭头沿着它移动。 元素 没有自己的时间线小部件,因此本指南使用 主插件中的时间轴小部件的,其中水平布局是单个下拉。
下面的六个步骤从普通的垂直时间线开始,以工作转盘结束。每个屏幕截图都来自 Elementor 4.3,其中包含测试页面上的小部件。如果您还没有放置时间线,则 完整的时间线教程 首先涵盖基础知识。
目录
当水平时间线是更好的选择时
步(step)短,垂直空间有限时使用水平时间线,三张牌的垂直时间线可以拍摄超过全屏的滚动,同样的三张牌并排合一行,这就是为什么水平布局出现在主页和着陆页上的原因,而垂直的则适合长关于页面。
| 因素 | 水平时间线 | 垂直时间线 |
|---|---|---|
| 最长 | 3至8个项目 | 任何长度 |
| 空间是它需要的 | 一排 | 每件物品都会成长 |
| 访客如何移动 | 箭头、点或滑动 | 滚动页面 |
| 典型用途 | 流程步骤、产品路线图、年度亮点 | 公司历史、变更日志、长篇故事 |
| 主插件中的来源 | 自定义时间线项目 | 自定义项目或博客文章 |
横向时间线是一种旋转木马,如果你不确定这两个术语中哪一个符合你的设计, elementor 中的旋转木马与滑块 解释了差异。
Elementor 中如何创建水平时间线
您需要安装 Elementor 和 Master Addons,然后在编辑器中执行六个步骤。以下任何内容都不需要自定义 CSS。
步骤 1:添加时间轴小部件
使用 Elementor 打开您的页面,搜索小部件面板 时间线 zai拖到页面上,它以三个样条的垂直时间线到达,离开 时间轴类型 上 自定义时间表的,因为水平布局只提供自定义项目。
2步:将时间轴样式切换到水平
在"内容"选项卡中,打开" 时间线 部分和更改 时间表样式 从垂直时间线到 水平时间表。卡片移动成一排,线条横跨顶部,每个点位于其卡片上方,上面有日期。面板中出现两个新部分:导航和旋转木马设置。
3步:编辑项目
单击下面的行 项目 打开它。每件物品都有三个小选项卡:内容、媒体和风格。
- 秀 决定点上方的内容:日期或自定义标签,例如“第一阶段”。
- 日期 並 日期格式 设置日期及其编写方式。
- 链接 使整张卡片可点击。
- 内容编辑器持有标题和描述,没有单独的标题字段,所以第一行是标题。
- 的 媒体 tab 向卡片添加图像。
宽大的图像在这里比高大的图像效果更好。三张高大的照片将文本推向屏幕下方很远的地方。
4步:选择导航
打开 导航 节并选择访问者如何在时间轴中移动导航下拉有六个选项。
| 导航选项 | 参观者看到的 | 好 |
|---|---|---|
| 箭头和点 | 上一个和下一个箭头加上每个幻灯片的一个点 | 大多数时间表 |
| 箭头和分数 | 箭头加上计数器,例如 2 / 6 | 点变得拥挤的时间很长 |
| 箭 | 仅箭头 | 干净的布局 |
| 点 | 仅点 | 触摸优先设计 |
| 进步 | 当旋转木马前进时,一个充满的条 | 流程步骤 |
| 没有 | 仅滑动或自动播放 | 装饰条 |
下拉下方您可以打开 动态子弹?,添加滚动条 显示滚动条?、设置位置,并交换下一个和上一个图标。 手机上隐藏箭头? 默认情况下处于开启状态,这会给电话访问者留下滑动和点。
第 5 步:设置转盘行为
打开 旋转木马设置 控制时间线的移动方式。
- 布局:用于平行的旋转木马,或用于具有旋转、拉伸和深度控制的 3D 效果的 Coverflow。
- 自动播放 並 自动播放速度:默认速度为 5000 毫秒,因此每五秒就会有一张新的幻灯片。
- 暂停悬停:当指针超过时间线时停止自动播放。
- 滑动到滚动:每次点击移动多少张卡片,每台设备设置。
- 中心幻灯片, 抓住光标 並 拖动自由模式 为拖的感觉。
- 循环:返回到最后一项之后的第一个项目。
- 动画速度(毫秒):每次幻灯片转换需要多长时间,默认情况下为 500。
1条真实的时间线,三思自动播放,日期有顺序,有人看的时候滑开的一张卡片很烦,悬停自动播放是一个公平的中间立场。
第 6 步:对箭头、点和卡进行样式设计
切换到样式选项卡。它有十个部分:轮播项目、布局、图像、帖子、卡片、箭头、日期、行、点和导航。
- 卡:填充、边框半径、标题和内容颜色,以及针对聚焦卡的单独查找。
- 日期:每个点上方的日期或标签的排版和颜色。
- 线:轨道颜色和厚度。
- 积分:一个纯点、一个图标或一个图像,具有大小和颜色。
- 导航:箭头、点和滚动条的颜色和尺寸。
Publish页面,用手机测试,每行卡片掉在较小的屏幕上,所以检查文本是否仍然适合。
还想要垂直布局吗? 的 元素器时间线小部件 page 在一个地方列出了每个布局、对齐方式和样式选项。
视频教程
该视频从空页面构建时间线,并于 3:44 切换到水平旋转木马。
出了四个问题
水平时间线的大多数问题都来自于将其视为垂直时间线。
- 物品太多。 8个左右,访客停止点击。使用垂直时间线或按年份划分故事。
- 卡片高度不均匀。 1个长描述拉伸行。修剪文字或在旋转木马设置中打开自动高度。
- 箭头越过第一张卡。 如果箭头位于内容顶部,请更改导航部分中的位置。
- 期待博客文章。 Post时间轴类型是垂直的,对于一行中的帖子,使用 博客小部件 在轮播模式下。
另请阅读: 20 元素滑块模板的,其中包括一个时间轴滑块设计。
常见问题
我可以在 Elementor 中制作没有 Elementor Pro 的水平时间线吗?
是。Elementor Pro 也没有包含时间轴小部件,因此 Pro 在这里没有区别。从 Master Addons 等附加组件中添加时间轴小部件,将时间轴样式设置为水平时间轴,项目就变成了转盘。
如何将箭头添加到 Elementor 中的水平时间线?
在"内容选项卡中打开"导航部分,然后选择"箭头和点"箭头和分数"箭头,或者"箭头,然后可以设置箭头位置,替换同一部分的"下一步和上一步图标。
水平时间线可以自动播放吗?
是在轮播设置下开启自动播放,以毫秒为单位设置自动播放速度,默认是5000,即每张幻灯片五秒,在Hover上暂停,当访问者正在阅读时停止它。
水平时间线是否响应?
是。它是转盘,因此它在平板电脑和手机上显示的卡片较少,访客可以滑动移动。滑动到滚动的滑动每个设备都有单独的值。
我可以在水平时间线中显示博客文章吗?
Post时间轴类型不行,仅垂直。将帖子手工添加为自定义时间轴项目,或使用帖子转盘。
最后的想法
Elementor水平时间线归结为一个设置和两个部分:时间线样式设置为水平时间线,然后导航及其六个选项和旋转木马设置,用于自动播放,循环和速度。将其保持为三到八张短卡,并在手机上进行测试。
的 时间轴小部件页面 有两种布局的现场演示,包括 横向路线图演示.
相关阅读
2 回应
水平布局仅适用于自定义时间线项目而不是后置时间线,这一点很容易错过,并且会延迟破坏构建。在切换时间线样式之前,确认每个项目都是自定义项目,因为博客后驱动的时间线保持垂直。实际调整:将导航设置为箭头和点,然后在狭窄的电话宽度上进行测试,因为旋转木马箭头可以挤满卡片,并且点可以使读者更清晰地滑动。
感谢您分享这些有用的提示! 😊 您说得完全正确,检查时间轴项目类型并在较小的屏幕上测试布局可以帮助避免意外问题,我们感谢您指出这一点并帮助其他 Master Addons 用户构建更好、响应更灵敏的时间线。感谢您成为我们社区的一部分!