如何在 Elementor 中添加时间线
这些步骤构建了一个免费的自定义时间线。小部件以三个示例项目开始,因此您可以在更改任何内容之前看到布局。
- Elementor中,在小部件面板中搜索“时间线”,并将主插件小部件拖到页面上。
- 在自定义时间轴上保留时间轴类型并选择垂直时间轴或水平时间轴。
- Items 下打开每一行,并设置日期或自定义标签、内容、图像和链接。
- 单击"添加项目"以获取更多里程碑,然后拖动行以重新排序。
- 对于水平时间线,设置导航和旋转木马设置。
- "样式"选项卡中的卡片、日期、行和点进行样式化, 然后发布。
我们的 时间表教程 用屏幕截图浏览每个设置,本页顶部的视频显示相同的步骤。
Elementor 或 Elementor Pro 有时间线小部件吗?
No。Elementor和Elementor Pro都不包括时间轴小部件,因此您需要一个插件或由容器、边框和自定义CSS制成的手工构建布局。Master Addons时间轴小部件可以单独与Elementor配合使用,您不需要Elementor Pro来完成它。以下是小部件所涵盖的内容。
| 时间轴小部件 | |
|---|---|
| 布局 | 垂直或水平旋转木马 |
| 卡对齐 | 左、中、叠加或右 |
| 内容来源 | 您手工添加的项目或您的博客文章(Post Timeline、Pro) |
| 每个项目 | 日期或自定义标签、丰富的内容、图像和整张卡的链接 |
| 点类型 | 点、图标、图像、数字或字母 |
| 水平导航 | 箭头、点、分数或进度条,带有可选滚动条 |
| 样式部分 | 10,包括卡片,日期,线路和积分 |
| 需求 | 元素和主插件 |
自定义时间表(免费)或发布时间表(专业)
Custom Timeline是免费选项,每个项目都得到一个日期,你可以交换一个自定义标签,如“Phase 1”, 富文本内容区, 图片和整张卡的可选链接,项目还可以有自己的点和颜色设置。Post Timeline, Pro的一部分,从你的帖子中构建时间轴:按类别,标签或作者过滤,排除特定帖子,设置顺序和偏移,并选择是否显示标题,特色图片和摘录。
- 自定义时间线:每个项目的日期或自定义标签、内容、图像和链接。
- 点、卡和日期颜色的每件造型。
- 帖子时间线 (Pro):类别、标签和作者过滤器、排除帖子、偏移和顺序。
- 明信片可以显示标题、特色图像、摘录和阅读更多链接。
元素中的垂直时间线
Vertical Timeline 沿中心线堆叠卡片,将它们向左、居中、居右或作为叠加,用一个开关反转卡片位置,水平间距和垂直间距设置间隙,在平板电脑和手机上卡片移动到线的一侧。
- 水平对齐:左、中、叠加或右。
- 反向牌位置翻转哪一方为先。
- 卡片的垂直对齐和两个间隔滑块。
- 平板电脑和手机上的卡片移至一侧。
元素器(旋转木马)中的水平时间线
将时间轴样式设置为水平时间轴,自定义时间轴变为旋转木马,卡片上方一行上的点在导航下选择箭头和点,箭头和分数,箭头,点,进度或无,如果您想要一个,则添加滚动条。旋转木马设置具有标准或覆盖流布局,自动播放自己的速度,暂停悬停,循环和滑动滚动。
- 6个导航选项,外加一个可选的滚动条。
- 旋转木马或 Coverflow 布局。
- 自动播放、悬停、循环和中心滑动暂停。
- 可用于自定义时间表。
看它住在 水平路线图演示.
帖子时间表:根据您的博客文章 (Pro) 构建时间表
Post Timeline 是 Master Addons Pro 的一部分,将 Timeline 类型切换到 Post Timeline,小部件会沿线列出您已发布的帖子,默认情况下是最新的优先级,因此每次发布时时间轴都会增长。设置每页帖子、帖子顺序和顺序、按类别、标签或作者过滤、跳过带有要排除的帖子的帖子,并使用偏移帖子计数从列表的更下方向开始。帖子时间轴是垂直的。
- 查询:每页帖子、帖子订单、订单数量和偏移帖子数量。
- 过滤器:类别、标签、作者和要排除的帖子。
- 显示或隐藏标题、图像、摘录和阅读更多按钮。
- 启用链接使每张卡都链接到其帖子。
对于网格或帖子列表,请使用 博客小部件.
线条和点造型
Style the line,带有背景颜色、进度颜色、厚度和边框,点可以是普通点、图标、图像、数字或字母,并且每个点都有默认、悬停和大小、背景颜色、点颜色和文本阴影的聚焦样式,这样,访问者正在看到的里程碑从其他的里程碑中脱颖而出。
- 线背景、进度颜色、厚度和边框。
- 五种点类型:点、图标、图像、数字或字母。
- 每个点的默认状态、悬停状态和聚焦状态。
卡片和日期造型与动画
Cards get padding, margin, content padding, border cadius 和单独的标题和内容排版,它们的颜色,背景,框阴影和文本阴影可以跨越默认,悬停和聚焦状态变化打开动画卡片,在每个卡片滚动到视图中时显示日期,所有三种状态都有自己的排版,填充,margin,文本阴影和颜色。
- 卡间距、半径和排版控制。
- 卡片和日期的默认、悬停和聚焦样式。
- 动画卡片可在物品滚动到视野中时显示物品。
时间线示例
下面的查看器有 16 个现成的设计。打开其中任何一个即可现场观看。
- 公司历史的里程碑。
- 用于发布说明的黑暗更改日志。
- 产品阶段的横向路线图。
- 发布时间线博客,按日期顺序发布帖子。
- 带有照片的项目阶段的案例研究图像。
- 过程的叠加步骤。
- 活动日程安排。
时间轴常见问题
我应该使用邮政时间表还是自定义时间表?
使用自定义时间线,这是免费的,当您想要控制每个日期和条目时,例如我们的历史页面或路线图。当时间线应该从您的博客文章中更新时,使用 Master Addons Pro 的一部分 Post Timeline,例如新闻档案。
"聚焦"状态如何运作?
Focused 状态为当前处于活动状态的物品进行样式, 访问者滚动浏览时间线或移动通过旋转木马。给它不同的卡片背景, 日期颜色或更大的点, 因此当前的里程碑脱颖而出。
我可以在 Elementor 中构建没有插件的时间线吗?
Yes,一个简单的。将容器堆叠在一列中,给每个容器一个线左边框,并在边框上放置一个Icon小部件,其中位置设置为Absolute的点。交替的边,水平布局和滚动动画需要自定义CSS或时间线小部件。
如何在 Elementor 中添加水平时间线?
添加时间轴小部件,在自定义时间轴上保留时间轴类型并将时间轴样式设置为水平时间轴。然后选择导航下的箭头或点,并在旋转木马设置下设置自动播放和循环。
元素时间线小部件免费吗?
是时间轴是一个免费的小部件,包括自定义时间轴类型以及垂直和水平布局。从您的博客文章构建条目的帖子时间轴类型需要Master Addons Pro。
我可以将整个时间线卡链接到页面吗?
是。每个自定义时间轴项都有一个链接字段,可以使整张卡片可点击。发布时间轴有一个启用链接开关,可以将每张卡片链接到其帖子。避免链接卡片内的其他链接,因为链接中的链接是不允许的。
时间线可以自动拉动博客文章吗?
是的,使用 Master Addons Pro 中的帖子时间轴类型。它读取您发布的帖子,并且您控制顺序、帖子数量以及类别、标签或作者过滤器。
为什么在我滚动之前卡片看起来是空的?
Animate Cards 打开。每张卡片都保持隐藏状态,直到它滚动到视图中,然后它滑入。如果您希望从一开始就可以看到每张卡片,请在样式选项卡的卡片部分关闭 Animate Cards。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
