如何使用Elementor在WordPress中创建时间表

已发表: 2025-05-26

时间表提供了一种视觉方式,以按时间顺序显示事件,里程碑或步骤。它们有助于在线性流中介绍信息,从而使访问者和用户更容易理解事件或过程的顺序。使用它们,您可以展示公司的旅程,项目路线图或清晰的个人故事。

在WordPress中添加时间表可以通过使内容更具吸引力和更易于遵循来增强用户体验。这就是为什么使用时间表已成为许多网站上的趋势的原因。 Elementor是一个用户友好的插件,您可以用来在WordPress帖子和页面上创建和添加时间表,并具有极高的自定义级别。

在本文中,我们将向您展示有关如何使用Elementor在WordPress中创建时间表的分步指南。在此之前,我们将介绍一些有关当今主题的理论部分。

时间表及其用例

Types of Timelines and Their Use Cases

时间表有两种类型 - 水平和垂直。每个人都有特定的用例,以不同的方式为网站增加价值。让我们在下面的讨论中探索它们及其用例。

1。垂直时间表

垂直时间表显示从上到下的事件和信息,通常沿页面的左侧或中心。这是一种滚动友好的格式,可在台式机和移动设备上无缝运行。当用户向下滚动页面时,他们以干净易读的布局遵循按时间顺序排列的顺序。

垂直时间表的用例:

  • 公司历史或增长旅程
  • 恢复或职业亮点
  • 博客文章系列或文章的进步
  • 分步过程的解释
  • 产品开发里程碑

2。水平时间表

水平时间轴显示从左到右的事件,遵循侧面滚动或滑动格式。它通常在空间宽的地方使用。这种格式最适合较短的时间表,或者只想在宽阔,易于看到的布局中显示一些重要事件时。

水平时间表的用例:

  • 项目路线图或计划阶段
  • 事件时间表
  • 营销活动或产品启动
  • 投资组合演示
  • 教育时间表或历史概述

如何使用Elementor在WordPress中创建时间表

如前所述,Elementor是一个拖放页面构建器插件。但可悲的消息是,它不包括创建时间表的任何小部件。但是,该插件具有许多附加子,您可以通过它们扩展核心Elementor插件的功能。

Happyaddons是其中之一。它带有130多个小部件和22多个功能,可以克服Elementor的许多缺点。因此,通过安装HappyAddons插件,您可以在网站上启用更多设计功能。在许多情况下,如果您拥有HappyAddons,您甚至不需要Elementor Pro。

现在,让我们探索如何使用Elementor和Happyaddons在WordPress中创建时间表。

如何在WordPress中创建水平时间表

希望您已经知道什么是水平时间表。 HappyAddons具有水平时间线小部件,完全免费使用。因此,您需要首先在网站上安装和激活以下插件。

  • Elementor
  • Happyaddons

在网站上安装并激活插件后,开始遵循下面的教程中解释的步骤。

步骤01:在Elementor Canvas上创建一个部分

使用Elementor打开帖子或页面。创建一个带有所需Flexbox列结构的部分以创建时间表。

Create a new section to add widget

步骤02:将水平时间表小部件添加到画布

在Elementor面板上找到水平时间线小部件。找到它后,将小部件拖放到画布上。

Add the Horizontal Timeline widget to the canvas

您会看到水平时间线小部件已通过默认布局添加到画布中。

Horizontal widget is added to the Elementor canvas

步骤03:为小部件选择一个预设

预设是预定义的设计样式或布局,您可以立即将其应用于小部件以快速自定义。如果您不想从头开始设计小部件,则可以选择一个预设。水平时间线小部件带有六个预设。

为小部件选择您喜欢的预设

Select a Preset for the Horizontal Timeline Widget

步骤04:将内容添加到水平时间表小部件

扩展时间轴部分。在这里,您将获得将内容添加到小部件的选项。默认情况下,您将获得四个选项卡。单击任何选项卡以将其展开。这将打开许多领域,您可以在其中放置并添加所需的信息。

Expand to the Timeline section

扩展选项卡后,您可以将事件日期,图标,图像,图像分辨率,标题描述添加到相应的选项卡中。

Add content to the tabs of the Horizontal Widget

您可以看到我们已经在水平小部件的各个部分中添加了内容。

Content added to the horizontal timeline tab

以同样的方式,将内容添加到所有时间表选项卡中。您可以看到我们已经在下面的图像中完成了。

Add content to all timeline tabs

要向小部件添加更多选项卡,请单击“时间表”选项卡下的+添加项目按钮。

Add new tabs to the horizontal timeline widget

步骤05:配置水平时间表小部件的设置

内容部分完成后,在“内容”选项卡下扩展“设置”部分。您可以配置标题html选项卡,内容对齐,隐藏内容箭头,启用灯箱,动画速度,显示的幻灯片数量,图标等等。

这些非常容易配置。我们希望您自己可以独自做。

Configure Settings for the Horizontal Timeline Widget

步骤06:对水平时间表小部件进行样式化

要设置小部件,请转到Elementor面板上的“样式”选项卡

Go to the Style tab of the Horizontal Timeline widget

首先,扩展时间轴部分。

您将获得定制线厚度,线色,日期间距,日期版本,颜色,图标,边框半径,边框类型,边框宽度,背景颜色等的选项。

探索它们并进行必要的自定义。

Expand the Timeline section from the Style Tab

您可以看到我们已经对水平时间表进行了一些更改。

Stylized the horizontal timeline

然后,展开箭头部分。从这里,您可以自定义箭头图标,它们的位置,大小,边框宽度,半径等

Stylize the arrow icons of the timeline

以同样的方式,扩展“样式”选项卡的内容部分。您可以自定义边框半径,填充,内容,边框类型,边框宽度,颜色,阴影,版式以及更多小部件之间的空间

进行必要的更改。

Stylize the content of the Horizontal Timeline widget

步骤07:预览水平时间表小部件

转到预览页面,检查一切是否正常。您可以看到我们的演示水平时间表工作正常,没有任何故障。

如何在WordPress中创建垂直时间表

虽然HappyAddons允许您免费创建水平时间表,但您必须升级到插件的高级版本才能创建垂直时间表。因此,请确保您的网站上可用以下插件。

  • Elementor
  • Happyaddons
  • Happyaddons Pro

一旦在您的网站上可用,便开始遵循以下说明的教程。

步骤01:拖放时间线小部件到Elementor Canvas

在搜索框中输入时间表选择除水平时间轴以外的时间轴小部件。在Elementor帆布上拖动它。

Drag-and-Drop the Timeline Widget to the Elementor Canvas

将在使用默认布局的画布上创建垂直时间表。

Timeline widget is added to the Elementor canvas

步骤02:为垂直时间线小部件选择一个预设

希望您已经知道预设是什么,正如我们已经在上面讨论的那样。如果您不想从头开始设计垂直时间表,请选择一个预设

Select a Preset for the Vertical Timeline Widget

步骤03:将内容添加到垂直时间表

扩展时间轴部分。默认情况下,您将看到两个选项卡。如我们在上面显示的那样,通过单击它来扩展任何选项卡。

Add Content to the Verticle Timeline

希望您不要在这里谈论太多。因为在水平时间表的情况下,您可以将几乎相同类型的内容添加到垂直时间表。

您可以添加图标,更改图标类型,定义时间,设置标题,添加图像等。自己做一件事情。

Add content to the verticle timeline

完成时间轴添加内容。您甚至可以通过单击+添加项目,如上图所示,在时间轴中添加更多项目。

Complete adding content to the verticle timeline

步骤04:配置垂直时间表小部件的设置

扩展设置部分。您可以配置是否显示日期,时间,内容箭头滚动树。您还可以更改标题标签,图标框对齐,树对齐背景颜色

自己做一个诚实的设置。但是对我们来说,默认的对齐方式看起来不错。因此,我们将坚持本教程。

Configue Settings for the Verticle Timeline Widget

步骤05:对垂直时间表小部件进行样式化

进入“ Elementor面板”上的样式选项卡。您可以从此选项卡上自定义小部件上的所有类型的内容和视觉元素。

Stylize the Verticle Timeline Widget

首先,展开内容框。您可以从此处自定义字体,颜色,箭头颜色,背景类型,边框类型边框宽度。这样做。

Customize content of the verticle timeline widget

以同样的方式扩展图标框部分。您可以从此处更改与小部件上的图标相关的宽度,高度,框空间和其他选项。如果您对默认样式满意,请不要触摸任何东西。

Stylize the Icon Box of the Verticle Timeline Widget

如果有必要的话,将小部件的标题定型。您可以看到我们改变了排版。

Stylize the title of the verticle timeline widget

以同样的方式自定义时间和日期的外观。我们改变了其颜色,重量和排版。

Stylize time and date

最后,扩展按钮部分。您可以对其背景颜色,复制排版风格化。

Stylize the button on the verticle timeline widget

步骤06:预览垂直时间表小部件

来到预览页面,然后检查佛提比时间轴是否正常。通过滚动小部件来做到这一点。我们希望它能像我们一样效果。

因此,您可以在网站上创建不同类型的时间表部分,以呈现各种内容。

您可以使用Happyaddons做更多的事情

老实说,HappyAddons是一个全面的插件。使用一次后,您一定会爱上此插件。看看您可以使用插件来处理的以下操作。

Things More You Can Do with HappyAddons

一个。使用免费主题建造者

Elementor还拥有一个主题构建器。但这仅保留给高级用户。但是对于HappyAddons,它是完全免费的。使用HappyAddons主题构建器,您可以创建标题,页脚,博客文章模板和档案页面。免费查看如何免费使用HappyAddons创建博客文章模板。

b。 wooCommerce友好

Happyaddons配备了九个强大的WooCommerce友好的小部件,以增强您的电子商务网站。这些小部件是产品网格,产品旋转木马,产品类别网格,产品类别旋转木马,单产品,迷你购物车,购物车,结帐和运输栏。

c。跨域复制纸

借助此功能,您可以将相同的小部件,部分和页面从一个网站直接复制到另一个域。这可以节省您的宝贵时间,因为您不必总是从头开始。以下视频说明了插件的跨域复制 - 副本功能。

d。设计创意内容

凭借其小部件,例如图像悬停,动画链接,有趣的因素,图像堆栈组,照片堆栈,创意按钮,文本滚动和图标,您可以创建引人入胜的创意内容来吸引用户。

e。显示统计信息

与许多其他Elementor附加组件不同,此插件提供了几个图表小部件,您可以通过这些小部件来展示统计信息并创建信息图表和页面。了解如何使用Elementor创建信息图表。

除了所有这些外,Happyaddons插件还可以做更多的事情。

最后的想法!

对于所有网站而言,创建时间表并不是强制性的。但是它们可能会变得必要,因为它们可能是展示某些信息和内容的理想选择。因此,每当您觉得需要创建时间表时,我们希望此教程帖子能够使用。

如果您喜欢这篇文章,我们要求您通过下面的评论框告诉我们。此外,如果您对HappyAddons插件有任何疑问,则可以在聊天框中留言。我们的现场支持代理人将尽快回应您。

感谢您与我们在一起,直到最后。我们祝您未来快乐。