时间轴提供了一种直观的方式，可以按时间顺序显示事件、里程碑或步骤。它们有助于以线性流程呈现信息，使访问者和用户更容易理解事件或流程的顺序。利用时间轴，您可以清晰地展示公司的历程、项目路线图或个人故事。
在 WordPress 中添加时间线可以提升用户体验，使内容更具吸引力，更易于理解。正因如此，使用时间线已成为许多网站的潮流。Elementor 是一款用户友好的插件，您可以使用它为 WordPress 文章和页面创建和添加时间线，并进行高度自定义。
在本文中，我们将向您展示如何使用 Elementor 在 WordPress 中创建时间线的分步指南。在此之前，我们将介绍一些与今天主题相关的理论部分。
时间线的类型及其用例
时间轴有两种类型：水平时间轴和垂直时间轴。每种类型都有特定的用例，能够以不同的方式为网站增值。我们将在下面的讨论中探讨它们及其用例。
1.垂直时间轴
垂直时间轴通常沿页面左侧或中心位置从上到下显示事件和信息。这种格式易于滚动浏览，可在桌面设备和移动设备上无缝衔接。用户向下滚动页面时，可以清晰易读地按照时间顺序浏览。
垂直时间轴的用例：
- 公司历史或成长历程
- 简历或职业亮点
- 博客文章系列或文章进展
- 逐步流程说明
- 产品开发里程碑
2. 水平时间轴
水平时间轴采用横向滚动或滑动的格式，从左到右显示事件。它通常用于宽度大于高度的空间。这种格式最适合较短的时间轴，或者当您想在宽阔、易于查看的布局中仅显示几个重要事件时。
水平时间轴的用例：
- 项目路线图或规划阶段
- 活动安排
- 营销活动或产品发布
- 作品集展示
- 教育时间表或历史概述
如何使用 Elementor 在 WordPress 中创建时间线
如前所述，Elementor 是一款拖放式页面构建器插件。但遗憾的是，它不包含任何用于创建时间线的小部件。不过，该插件有很多附加组件，您可以通过它们扩展核心 Elementor 插件的功能。
HappyAddons就是其中之一。它包含 130 多个小部件和 22 多个功能，可以弥补 Elementor 的许多不足。因此，安装 HappyAddons 插件后，您可以在网站上启用更多设计功能。很多情况下，如果您拥有 HappyAddons，甚至不需要 Elementor Pro。
现在让我们探索如何使用 Elementor 和 HappyAddons 在 WordPress 中创建时间线。
如何在 WordPress 中创建水平时间轴
希望你已经了解水平时间线是什么。HappyAddons有一个水平时间线小部件，完全免费使用。因此，你需要先在你的网站上安装并激活以下插件。
在您的网站上安装并激活插件后，请开始按照以下教程中说明的步骤进行操作。
步骤 01：在 Elementor 画布上创建一个部分
使用 Elementor 打开一篇文章或页面。创建一个带有所需弹性框列结构的部分，以创建时间轴。
步骤 02：将水平时间轴小部件添加到画布
在 Elementor 面板上找到“水平时间轴”小部件。找到后，将其拖放到画布上。
您将看到水平时间轴小部件已以默认布局添加到画布中。
步骤 03：为小部件选择一个预设
预设是预先定义的设计样式或布局，您可以将其立即应用于微件，从而快速进行自定义。如果您不想从头开始设计微件，可以选择预设。水平时间轴微件自带六个预设。
为小部件选择您喜欢的预设。
步骤 04：向水平时间轴小部件添加内容
展开“时间线”部分。在这里，您将看到向小部件添加内容的选项。默认情况下，您将看到四个选项卡。点击 任意选项卡即可展开它。这将打开许多字段，您可以在其中放置和添加所需的信息。
展开选项卡后，您可以向相应的选项卡添加事件日期、图标、图像、图像分辨率、标题和描述。
您可以看到我们已经将内容添加到水平小部件的相应部分。
用同样的方法，将内容添加到所有时间线选项卡。您可以在下面的图片中看到我们已经完成了。
要向小部件添加更多选项卡，请单击时间线选项卡下的+ 添加项目按钮。
步骤 05：配置水平时间轴小部件的设置
内容部分完成后，展开“内容”选项卡下的“设置”部分。您可以配置标题HTML选项卡、内容对齐方式、隐藏内容箭头、启用灯箱、动画速度、显示的幻灯片数量、图标等。
这些配置非常简单。我们希望您能够自己完成。
步骤 06：对水平时间轴小部件进行样式化
要对小部件进行样式化，请转到Elementor面板上的“样式”选项卡。
首先，展开时间线部分。
您将获得自定义线条粗细、线条颜色、日期间距、日期字体、颜色、图标、边框半径、边框类型、边框宽度、背景颜色等的选项。
探索它们并进行必要的定制。
您可以看到我们对水平时间线做了一些更改。
然后，展开“箭头”部分。在这里，您可以自定义箭头图标、其位置、大小、边框宽度、半径等。
以同样的方式，展开“样式”选项卡的“内容”部分。您可以自定义小部件的边框半径、填充、内容间距、边框类型、边框宽度、颜色、阴影、字体等。
进行必要的更改。
步骤 07：预览水平时间轴小部件
前往预览页面，检查一切是否正常。您可以看到，我们的演示版水平时间轴运行正常，没有任何故障。
如何在 WordPress 中创建垂直时间轴
虽然 HappyAddons 允许您免费创建水平时间线，但您必须升级到该插件的高级版本才能创建垂直时间线。因此，请确保您的网站已安装以下插件。
一旦它们在您的网站上可用，请开始按照下面解释的教程进行操作。
步骤 01：将时间轴小部件拖放到 Elementor 画布
在搜索框中输入“时间线” 。选择除“水平时间线”之外的时间线小部件。将其拖放到 Elementor 画布上。
将在画布上以默认布局创建垂直时间线。
步骤 02：为垂直时间轴小部件选择预设
希望你已经了解预设是什么，因为我们上面已经讨论过了。如果你不想从头开始设计垂直时间线，可以选择预设。
步骤 03：将内容添加到垂直时间轴
展开“时间轴”部分。默认情况下，您将看到两个选项卡。点击任意选项卡即可展开，就像我们上面展示的那样。
希望你不需要在这里多说。因为你可以在垂直时间轴上添加几乎与水平时间轴相同类型的内容。
您可以为每个时间线部分添加图标、更改图标类型、定义时间、设置标题、添加图片等。这些必要的操作，您自己就能完成。
完成向时间线添加内容。你甚至可以点击上方显示的“+ 添加项目”按钮，向时间线添加更多项目。
步骤 04：配置垂直时间轴小部件的设置
展开“设置”部分。您可以配置是否显示日期、时间、内容箭头和滚动树。您还可以更改标题标签、图标框对齐方式、树对齐方式和背景颜色。
您需要自行设置。不过，我们觉得默认对齐方式看起来不错。所以，本教程就沿用默认对齐方式吧。
步骤 05：对垂直时间轴小部件进行样式化
来到Elementor 面板上的“样式”选项卡。您可以从此选项卡自定义小部件上的所有类型的内容和视觉元素。
首先，展开“内容框”。您可以在这里自定义字体、颜色、箭头颜色、背景类型、边框类型和边框宽度。请按此操作。
以同样的方式，展开“图标框”部分。您可以在这里更改小部件上图标的宽度、高度、框空间和其他相关选项。如果您对默认样式感到满意，则无需进行任何更改。
如果有必要，可以对小部件的标题进行样式化。您可以看到，我们已经更改了字体。
以同样的方式，自定义时间和日期的外观。我们更改了它的颜色、粗细和字体。
最后，展开按钮部分。您可以设置其背景颜色、文字排版等。
步骤 06：预览垂直时间轴小部件
前往预览页面，检查垂直时间轴是否正常工作。只需滚动小部件即可。我们希望它在您这边也能像我们一样正常工作。
因此，您可以在您的网站上创建不同类型的时间线部分，以精彩地呈现各种内容。
使用 HappyAddons 可以做更多的事情
HappyAddons 是一款功能全面的插件。你一定会在第一次使用后爱上它。来看看这款插件的以下功能。
a. 使用免费主题生成器
Elementor 也提供主题构建器，但仅限高级用户使用。而 HappyAddons 则完全免费。使用 HappyAddons 主题构建器，您可以创建页眉、页脚、博客文章模板和存档页面。查看如何使用 HappyAddons 免费创建博客文章模板。
b. WooCommerce 友好
HappyAddons 附带九个强大的 WooCommerce 友好小部件，可增强您的电商网站。这些小部件包括产品网格、产品轮播、产品类别网格、产品类别轮播、单品、迷你购物车、购物车、结账和运费栏。
c. 跨域复制粘贴
使用此功能，您可以直接将相同的小部件、版块和页面从一个网站复制到另一个域名。这可以节省您宝贵的时间，因为您不必总是从头开始。以下视频解释了该插件的跨域名复制粘贴功能。
d. 设计创意内容
利用图像悬停、动画链接、趣味因素、图像堆栈组、照片堆栈、创意按钮、文本滚动和领主图标等小部件，您可以创建引人入胜的创意内容来吸引用户。
e. 显示统计信息
与许多其他 Elementor 插件不同，此插件提供了多个图表小部件，您可以使用它们展示统计信息并创建信息图帖子和页面。了解如何使用 Elementor 创建信息图页面。
除此之外，您还可以使用 HappyAddons 插件做更多的事情。
评论0