主要外卖
- 这八个 Elementor 时间线示例均由一个小部件(主插件时间线小部件)构建,并且每个小部件都有一个您可以打开的实时演示页面。
- 八个时间线设计中有六个是垂直的,两个是水平旋转木马,这与布局的使用方式相匹配:垂直的长故事,水平的短序列。
- 垂直示例使用时间线小部件的四个对齐方式中的三个:用于交替卡的中心、用于单面列表的左侧和用于镜像单面列表的右侧。
- 八种设计之间的大部分视觉差异来自时间线小部件中的四个风格部分:卡片、日期、线条和点。
- Elementor 和 Elementor Pro 不包含时间线小部件,因此任何 Elementor 时间线模板都取决于正在安装的插件。
Good Elementor时间轴的例子很难找到,因为大部分的演示都是三张带有lorem ipsum的灰卡,下面八种设计都使用了真实的故事:器官重建、桥跨、临床试验、面包店的第一年都用 主插件时间线小部件 每个人都有一个现场演示。
For every example 你都得到了它有什么好处,是什么让设计工作起来,以及它背后的设置,所以你可以把它当作自己页面的模板,如果你之前没有构建时间轴,就从 elementor 中如何创建时间线.
目录
八个时间线示例一目了然
先按布局选择,然后按情绪选择。此表显示了 Elementor 时间轴设计适合哪种工作。
| # | 设计 | 布局 | 图像 | 好 |
|---|---|---|---|---|
| 1 | 交替重建 | 垂直,中心 | 否 | 项目日志、修复 |
| 2 瀹跺涵涓杞杈 | 拱形图像场 | 垂直,一侧 | 是的,拱形 | 季节性或年度注释 |
| 3 | 右对齐调查 | 垂直,对 | 否 | 年表、案件档案 |
| 4锛屽湪娴欐睙鏉 | 水平制造 | 水平旋转木马 | 是的 | 生产阶段 |
| 5锛屽湪娴欐睙鏉 | 分拆卡周 | 垂直、单柱 | 否 | 每周的时间表 |
| 6 X 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 | 交替拱形媒体 | 垂直,中心 | 是的,拱形 | 品牌和创始人的故事 |
| 7 | 轻卡试用 | 垂直,一侧 | 否 | 研究和流程里程碑 |
| 8 | 横向年份 | 水平旋转木马 | 否 | 按年份划分的历史 |
1。交替重建时间轴
Elementor垂直时间线,这是经典的:卡片在中线左右交替,每个阶段都有编号点和日期,演示讲述了一个管风琴在三年内重建的故事。
用于修复、施工日记或任何阶段明确的项目。数字甚至在您阅读日期之前就给出了订单。要构建它,请使用设置为中心的水平对齐、细线、小点和仅比页面轻一点的卡片背景。
2。拱形图像场时间轴
Cream背景上的单面时间线,每个条目在文字旁边都有一张拱形照片,演示文稿遵循十个冬天在农场铺设树篱。
Field notes、季节性工作、旅游期刊或任何以照片为主导的东西使用,拱形裁剪使普通照片看起来刻意,要构建它,使用单面对齐,顶角只有在样式、图像、边框半径上有一个大的半径。
3。右对齐调查时间表
Here 行向下运行右边,卡片坐在其左边,右对齐文字,它是通常布局的镜像,demo 是两年信息请求的年表。
用"调查、法律或合规年表或案例研究。一种不寻常的对齐方式使"纯文本时间线看起来被设计。要构建它,请使用"水平对齐方式设置为"右侧,带有边框且无填充的点。
4、横向制造时间表
2个横向例子中的第一个。月标签坐在石灰绿点上方,图像卡片在它们下方滑动,带有圆箭头按钮。演示覆盖了一个分五个阶段制造的桥跨。
用"制造或生产阶段,或五步过程,照片携带每个阶段,文本保持三行,要构建它,请使用"时间轴样式设置为水平时间轴,导航设置为箭头,以及每个项目的"媒体选项卡中的图像。
打开水平制造演示。 转盘控制在 中进行了解释 elementor 中如何创建水平时间线.
5。分卡周时间轴
1个单中心列白卡,每张卡片一分为二:左边是星期,右边是内容的窄条,演示是博物馆逐周重新挂起的计划。
用于日程安排、冲刺计划或课程大纲。标签栏在页面上向上排列,因此您无需阅读卡片即可扫描周数。要构建它,请在每件商品上使用自定义标签(“第 1 周 · 1 月 6 日”),而不是日期、带有柔和阴影的光卡。
6。交替拱媒体时间线
1次再交替卡片,这次是将黑白照片裁剪到每张卡片上方的拱形,demo是面包店的第一年,从1个烤箱和1笔银行贷款开始。
为"关于页面、创始人故事或小企业的"元素历史时间线使用它,一张重音颜色和单色照片使混合质量的图片看起来像一组,要构建它,请使用"水平对齐设置为中心,每件物品一个图像,日期和点中的相同重音。
7。光卡试用时间轴
深紫色背景上的灯卡,全部位于线路的一侧,带有琥珀色点。演示跟踪从资助到协议修订的临床试验。
用于研究里程碑、资助轮次或审批流程。卡片和背景之间的对比起作用,因此卡片不需要边框或阴影。要构建它,请使用水平对齐设置为左侧,浅卡片背景,小填充点。
8、横向年份时间轴
2个横向设计,将大年放在线上方(1982年、1986年、1989年),每个下都有一张短卡,演示是十六年的灯塔自动化,它将时间轴与前后表配对。
按年份、产品代数或周年纪念日将其用于公司历史。年份是屏幕上最大的文本,这是人们在历史中寻找的内容。要构建它,请使用水平时间线、仅包含年份的自定义标签以及带有重音颜色的大日期排版。
想要全部十六个吗? 演示查看器上 元素器时间线小部件 page 持有这八加八,包括更改日志、路线图和活动议程。
如何使用这些作为模板
您可以重建其中任何一个 元素 timeline模板几分钟,因为差异都在设置中,要放一个整页,请参见 元素页模板.
- 添加时间轴小部件并输入您自己的项目:日期或标签、标题、简短描述和可选图像。
- 选择布局。时间轴样式选择垂直或水平,样式、布局、水平对齐选择左侧、中心、叠加或右侧。
- Match颜色。先设置页面或容器背景, 然后设置卡片、日期、行和点。
- 查聚焦状态。每个示例都会给视图中的条目一个稍微不同的卡片或点,这样读者就可以保留自己的位置。
- Phone上看,小屏幕垂直时间线向一侧移动,水平显示卡片较少。
在时间轴上显示帖子有自己的指南: 如何在 Elementor 中的时间轴上显示博客文章.
另请阅读: 20 元素滑块模板其中包括年份之间具有实际间隔的时间线滑块。
常见问题
Elementor 是否带有时间线模板?
No。Elementor和Elementor Pro没有时间轴小部件,因此他们的模板库也没有真正的时间轴,Elementor的时间轴模板总是依赖于一个附加小部件或自定义CSS。
哪种时间线布局最适合公司历史?
交替的垂直时间线适合具有照片的长历史,例如示例 6。对于具有五到六个主要年份的短历史,像示例 8 这样的水平年份时间线占用的空间更少。
我可以将这些时间线设计与任何主题一起使用吗?
是。Elementor编辑器中设计,带有Timeline小部件自己的样式控件,因此它们不依赖于主题。字体遵循您网站的全局排版,除非您在小部件中设置它们。
时间线应该有多少项?
Four to eight是舒适的范围,在four之下,简单的列表更清晰,超过十,把时间线分割一年或十年,或者把每张牌缩短为一个标题和一行。
最后的想法
Elementor时间轴这八个例子涵盖了大多数站点需要的布局:两个交替设计,三个单面,一个单列时间表和两个水平旋转木马,它们都来自一个小部件,差异坐落在四个风格部分:卡片,日期,线条和点。
打开演示,选择最接近的演示,然后使用以下内容构建您的版本 时间轴小部件.
相关阅读
