A timeline is a visual representation of a chronological sequence of events displayed with a line so people can understand the time relationships. It can be a wonderful way to chronologically display historical information, project development, milestones achieved, and different events.

There are two types of timelines – horizontal and vertical. Each one has its own set of features and unique visual appeal. This article will show you a step-by-step guide on how to create a timeline in WordPress both horizontally and vertically. Get started!

How to Create a Vertical Timeline in WordPress

You’ll find lots of plugins and page builders to create and add timelines to WordPress sites seamlessly. Cool Timeline is one of the best of them. It has an intuitive interface and compatibility with Gutenberg and Elementor. Let’s try creating timelines in WordPress using the plugin.

Step 01: Install and Activate the Cool Timeline Plugin

Log into your WordPress dashboard. Navigate to Plugins > Add New. Type Cool Timeline in the search box. Once the plugin appears below, install and activate it.

You’ll see a new menu item named ‘Timeline Addons’ created on the left-side admin menu bar. There, you will see some more addon names of this plugin. 

If you want to create a timeline in Elementor using the plugin, install the respective addon. Otherwise, leave everything as they are.

Plus, you’ll have a new option, Add New Story. You may create timeline stories from this option and add them to your desired post/page using a shortcode. 

But we think you don’t need to use this option as you can create timelines directly on your post/page using the Gutenberg editor. The following steps will explain the process to you.

Step 02: Open a Post/Page and Add the Cool Timeline Block

Open your desired post/page where you want to create the vertical timeline. Press the Plus (+) icon to open the Gutenberg editor. Type Cool Timeline Block in the search box. Press the block once it appears.

You’ll see a vertical timeline has been created with dummy content. You’ll see edit and customization options on the right sidebar.

Step 03: Customize the Timeline Layout and Stylization

Select the entire timeline by clicking the Cool Timeline block icon. Go to the General tab on the right sidebar. Using the options on this tab, you can do the following things:

Timeline Design – It allows you to show content chronologically on both sides or one single side.

First Story Based – By default, the first timeline content is shown on the right side. You may decide to show it on the left side from this option. But to enable this option, you have to toggle on Alternative Sided first.

Content Alignment – This lets you left, center, or right align the text content on the timeline.

Jump to the Style tab next. Here, you’ll get options to change the Typography, Text Color, Header Tag, and Bottom Space.

Step 04: Add Content to the Timeline

Once the layout is ready, it’s time to add content one by one. Select the first time section by clicking on it. You’ll be allowed to add a Story Heading, Story Description, Date, Story Icon, and the Story Image.

Similarly, keep adding content chronologically to each section on the timeline. At the end of the timeline, you’ll see the  +Add Story button.

If you want to add more sections to the timeline, press the button. Thus, you can easily create vertical timelines on your WordPress site. 

How to Create a Horizontal Timeline in WordPress

With the free version of the Cool Timeline plugin, you can only create vertical timelines. You must have the premium version of the plugin to create horizontal timelines. Get the premium version of the plugin from the link below.

• Cool Timeline Pro

Once you have the plugin downloaded, jump into the tutorial.

Step 01: Upload, Install, and Activate the Cool Timeline Pro Plugin

Go to the WordPress dashboard again. Navigate to Plugins > Add New > Upload Plugins. Select and add the premium version of the plugin using the Choose file option. Install and Activate it afterward.

In the process, you’ll be asked to replace the free plugin with the premium plugin. After that, you’ll get the activating option.

Step 02: Open a Post/Page and Add the Horizontal Timeline

Open a new post/page. Add the Cool Timeline block from the Gutenberg editor following the same process as described above.

Under the Timeline Layout option on the right sidebar, you’ll get the option to present the timeline horizontally. You can also switch it to the vertical presentation anytime you want from here.

Step 03: Customize the Layout and Add Content

The process of layout designing, content adding, and applying stylization is almost similar, as explained above. So, we aren’t going to explain the process here again. Invest just a little while exploring the block; everything will come to your fingertips.

Final Words!

Whether you create the timeline horizontally or vertically, make sure to present information in an organized way. Also, don’t overwhelm the timeline section with too much information. Concise them as much as possible.

Otherwise, it will be difficult for users and visitors to find their desired information effectively. So, you must have a plan and do several drafts before finally adding content to the timeline.