如何在元素器中创建时间线(垂直、水平和后时间线)

元素 没有自己的时间线小部件、在免费版本中或在 Pro。Elementor 页面上放置时间轴,您可以从附加组件中添加一个。本指南使用免费中的时间轴小部件 主插件 plugin,它涵盖了垂直布局、水平旋转木马以及从您的博客文章构建自己的时间线。

下面的每个屏幕截图都来自 Elementor 4.2。4 和 Master Addons 3.2。自定义时间线,布局和整个样式选项卡都是免费的。发布时间线需要 Pro,并且它会标记在出现的地方。

如果您愿意观看,该视频将在五分钟内完成相同的步骤。

您可以在没有插件的情况下在 Elementor 中创建时间线吗?

Yes, 对于一个简单的单边时间线。Elementor的容器可以分四个步骤来完成:

1. 添加父容器,将其方向设置为 列 并且它的间隙为 0。这保留了整个时间线。
2. 对于每个条目,添加一个内部容器。下面 风格→边框、仅在左侧设置一个实心边框,宽 2px,并添加左边填充,这样文本就可以清除。堆叠在一起,那些边框就成为线。
3. 在每个条目中添加日期标题和描述文本编辑器。
4. 为点添加图标小部件。下面 高级 → 布局,将位置设置为 绝对 并用偏移推动它,直到它位于边界上。

That给你一个没有附加组件的左对齐时间线,你没有得到左右交替布局,水平版本,或者在滚动上动画化的卡片,交替需要自定义CSS,加上你自己的响应规则,因为在手机上,双面布局必须折叠为一列。

维护速度也变慢了。每个新的里程碑都是另一个要构建的容器和另一个要手动定位的点。一个小部件保留行、标记、交替和断点作为设置,因此添加条目是一键。

在库存 Elementor 安装上的小部件面板上搜索 “时间线”,结果恰好返回一个,即主插件小部件。

安装插件

从 WordPress 仪表板转到 插件 → 添加插件,搜索 Elementor 的主插件(elementor) 的任何页面, 然后安装并激活。打开该页面, 搜索小部件面板以获取 时间线.

如果激活后没有出现任何情况,请检查 主插件 → 小部件库 and确保timeline已打开。widgets可以单独禁用,以使未使用的代码远离前端,无论如何,如果你关心的话,这是值得做的 元素器页速度.

Elementor 中如何添加时间轴,一步一步

1步:将小部件拖到页面上

使用 Elementor 编辑页面,搜索 时间线(drag it)到一个容器中,它到达时已经填写了三个样本条目,所以在你改变任何事情之前,你可以看到每个字段做了什么。

2步:选择时间轴类型

在"内容"选项卡中,打开" 时间线 节。第一个下拉是 时间轴类型.

自定义时间表 是免费的。您自己键入每个条目,这是您想要的公司历史,产品路线图或活动时间表,其中内容是固定的和编辑性的。

发布时间表 是大师 Addons Pro 功能,它会读取你的 WordPress 帖子并从中构建时间轴,因此发布帖子会自行添加一个条目,其下方还有一个部分。

3步:选择垂直或水平

第二个下拉是 时间表样式.

Vertical 沿着页面运行,卡片在中心线的左右交替,水平将条目并排放置为带有箭头的转盘,两者都是免费的,您可以在任何一点在它们之间切换,而不会丢失您的条目。

现在值得了解的一个限制: 仅在自定义时间线中出现时间线样式。发布时间线仅为垂直,当您切换类型时,下拉会消失。

4步:编辑您的条目

下 项目zhi,每个条目都是一个中继行,点击一个打开。

"内容"选项卡和"媒体"选项卡, 每行都有一个"内容"选项卡和"媒体"选项卡。重要的字段:

• 秀:日期或自定义标签。日期给你一个日期选择器;自定义标签让你写任何东西,这就是你如何在行上获得“Q3 2026”或“Founded”, 而不是日历日期。
• 日期格式:预设加上自定义自定义采用一个PHP日期字符串,所以 F Y 打印 “2019 年 6 月”并保持里程碑式的时间表,使其不再看起来像更改日志。
• 链接:使整张卡片可点击,如果卡片的文本已经包含链接,请将其关闭,因为链接内部的链接是无效的HTML,浏览器会丢弃其中一个。
• 内容框是一个完整的编辑器。 没有单独的标题字段(如标题 3),因此条目的标题在此处。
• "媒体"选项卡将图像添加到卡片并设置其分辨率。

添加项目 创建一个新行,复制图标复制一个,并拖动行重新排序。

5步:发布并查看

四个条目,日期格式为月份和年份,标记上的标志图标,所有这些都位于免费插件上。

卡片交替排列,日期位于每张卡片的对面,而您无需定位任何内容。

为什么在滚动之前卡片看起来是空的

当时间线卡滚动到视图中时,它们会开始隐藏并动画化,并且最接近您滚动位置的点会呈现集中状态,您可以在"点"部分中单独设置该状态。

因此,在屏幕截图工具、PDF 导出或从不滚动的页速审核中,放置在折叠下方的时间线看起来是空的。滚动页面并显示条目。

在 Elementor 中制作水平时间线

套 时间表样式 到水平时间线,布局旋转:条目并排坐着,点位于水平线上的卡片上方,箭头滚动穿过它们。

"导航"下的样式选项卡中配置箭头。两个控件, 容易混淆:

• 安置 位于旋转木马内部或外部。
• 位置 是他们坐的地方,从左上到右下。

将位置设置为属于放置的值会将箭头落入左上角,位于第一个条目的顶部。底部中心和外部放置是安全配对,也是屏幕截图所使用的。

Horizontal suits four to six strong milestones over the fold,就像一个登陆页面上的产品发布序列,过去的六个条目读者正在反复点击一个箭头,查看他们无法扫描的内容,垂直获胜,垂直也是手机上更安全的投注,从上到下的阅读是人们期望的,无论你选择哪个,都与你的对照 响应断点 在你发货之前,因为两种布局的崩溃方式不同。

线条、点和牌的造型

样式选项卡有十一个部分:旋转木马项目、布局、图像、帖子、卡片、箭头、日期、行、点、导航和模式。

线 设置中心线的颜色和厚度。 卡 处理背景、边框、阴影和填充。 日期 排版控件将条目文本与字体系统匹配。

积分 是值得花时间在。它的 类型 control 挑选每个标记上的内容, 它具有三个状态选项卡: 默认, 悬停 並 专注。Focused 应用到最接近读者滚动位置的条目,因此,让它不被设计,这使得时间轴读取为平面列表,而读者滚动通过它。Style all three。

套 类型 to Icons,标记取一个图标,这就是这里的屏幕截图所使用的,在前端立即检查:如果标记渲染为空圆,则图标尚未加载,将类型切换回默认值会给你一个始终有效的纯色点。

从您的博客文章中构建时间表

将时间轴类型切换到 发布时间表 and 面板完全改变。而不是输入您描述要拉取哪些帖子的条目,并且小部件从它们构建时间线。

值得设置的控件:

• 显示标题, 标题链接 並 标题标签。将标题标签设置为 H2 或 H3,以便在标题顺序中发布标题位于页面的 H1 下方,这是与您时重要的标题顺序规则相同的标题顺序规则 在 Elementor 中构建博客页面.
• 显示图像 並 图像分辨率 将特色图像放在卡片上。
• 日期格式 並 时间格式。默认打印日期旁边的时间,在里程碑时间轴上读取奇怪。将时间格式设置为无,或使用自定义日期格式。
• 每页帖子, 偏移后计数, 邮寄订单 並 订单由.
• 类别, 按标签过滤, 作者 並 排除的帖子 缩小查询范围,因此一个时间线可以是 “News”中的所有内容,另一个时间线可以是精心挑选的集合。
• 启用链接 使整张卡片可点击 与自定义版本相同的警告:卡片内容有自己的链接时将其关闭。

因为它直接读取帖子,所以这个版本整齐地下降到a 主题构建器 archive 或单一模板,并且它会在你发布时自我更新,发布时间轴是其中的一部分 硕士插件专业版.

自定义或发布时间表:哪一个

Post发表帖子应该添加条目,使用Post时间轴,如果条目是你写过一次的故事,使用Custom。

值得使用的时间线

• 关于页面。 垂直的公司历史,具有 反击 在其上方行以获取标题编号。
• 产品页面。 运送功能的水平路线图以及下一步是什么。四到六个条目,不再。
• 发布说明。 帖子时间线过滤到一个类别,旁边是 a 更改日志 小部件。
• 投资组合和案例研究。 带有特色图像的日期条目,这是媒体选项卡的回报。
• 活动和课程安排。 自定义标签而不是日期,因此行中写着"“第 1 天、第 2 天、第 3 天”。

让时间线读得更好的七件事

1. Hold住每张牌两三句,时间轴是扫描格式,满段落打败它。
2. 19"里程碑使用自定义标签。“2019”在确切的日子无关紧要时击败“6月17日,19”。
3. Cards 内保持一个标题级别,内容框没有标题字段,所以将每个条目的标题设置为同一个标签,而不是混合 H2 和 H4。
4. 切换到垂直的过去六个条目,因为水平滚动速度变得乏味。
5. Style the Focused 状态。它是告诉读者它们在哪里的状态。
6. 选择图标后检查前端的标记。空圆表示图标未加载,默认点为安全后备。
7. Phone上查,交替布局崩塌到一列,自定义标签长是第一件包坏的事。

常见问题

相关阅读

• 元素器时间线小部件中, 列出每个控件的功能页面
• 时间轴小部件文档
• 如何使用 Elementor 创建博客页面
• 元素页面的 SEO 实践
• WordPress.org 上的主插件