Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.

How to Create a Vertical Timeline in WordPress

How to Create a Vertical Timeline in WordPress

There are many creative ways in which you can provide your visitors with some core information related to your brand’s history – and timelines are definitely one of them. Showcasing a sequence of events of how your business came to be through an event timeline can be engaging, informative, and visually appealing all at once. In short, timelines can be used to display some of the most significant steps of your journey or to share other important information with your visitors in a clean and user-friendly manner. And while both vertical and horizontal timelines can be just as effective for this task, this time around, we will focus on the vertical timeline in particular.

There are many great timeline plugins that can provide you with the ability to create a beautiful and functional vertical timeline in WordPress, but if you ask us, there’s no better option than the Qi Addons Plugin. In this article, we will show you how to easily add, customize, and style a vertical timeline using the plugin’s versatile Vertical Timeline widget.

Here are all the steps you need to take to incorporate this visually immersive element into your WordPress site and help your visitors understand what you and your business are all about:

Premium Qi Addons

Adding a Vertical Timeline Widget With Qi Addons for Elementor

With a collection of over a hundred fully customizable widgets, Qi Addons for Elementor is a freemium plugin that has everything one needs to create just about any page element or section. This includes anything from business and typography addons to infographics to showcase-based elements. In its list of widgets, there’s also the custom widget called Vertical Timeline. This widget in particular allows you to create all sorts of vertical timeline layouts for your site. You can add different images, set the spacing and paddings, adjust the colors and typography of your items, and plenty more.

Vertical Timeline

So, we will show you all you need to know to learn how to add and customize this practical widget to fit your particular needs. We also have a video that covers the same subject, so you can check that out as well:

To begin, head to the backend of your Elementor page. We’ve already prepared the section we will be using for the widget, and we’ve made sure to divide this section into two columns. The first one will contain the picture, while the second one has an inner section element with two other columns which we will be using to add our vertical timeline widget.

Two Columns

To add an image, you need to click on the Edit column button in order to open the column options.

Hit the Style tab and then find the Image field. Here you can upload your background image.

Choose Image
Image Added

Then, open the Elements menu and find the Vertical Timeline widget. Drag it over to the page.

Drag Widget

We’ve dragged the widget over to the first column of our inner section as we planned to duplicate the element in the second one later. This will help you keep any style settings from the first timeline and save you time immensely as you will only have to edit the content of the timeline and won’t have to bother with styling it again.

Default Widget Look

Editing the Content

Moving on to the widget’s options, there’s the Content tab with its General section. The first important option here is the Date – this is the text field where you can type in any date you like. We’ve changed ours to read the year 2022.

Add Date

Below are two items that represent the points within the timeline itself. You can add more items by hitting the “Add Item” button (we’ve left two items for our timeline).

Next, it’s time to customize your items. To do this, simply click on the item field in question.

The first field available here is named Hours. Just like the Date field above, it’s a text field, so you can enter anything you want here. We’ve set the range of hours for our example.

Add Hours

Then, there’s the Content field – this is where you can change the paragraph text located below the Hours.

Add Content

One last option here is Image, allowing you to add an image to your item.

Add Image

We’ve chosen to add an image to our item as well.

Image Added to Vertical Timeline

Now, you can go ahead and customize the second item. Of course, it contains the same options as the first one. You can feel free to add anything you like here as well.

This is what our timeline looks like after we’re done with customizing the second item:

Images and Content Added

We should also note that we’ve adjusted the paddings of the second column (where we’ve placed the inner section and the timeline element). By doing so, we’ve succeeded in making our timeline adjusted more evenly, and we’ve also separated it a bit further from the image on the left.

We’ve done this by clicking on the second column settings, then we chose the Advanced tab and delinked the values for the padding. We’ve switched the values to percentages, and then entered 10 pixels for the top, right, and bottom padding, while we set 22 pixels on the left.

Advanced Padding

Styling the Vertical Timeline Widget

Now that we’ve taken care of the general settings and adjusted the content for our items, it’s time to style the vertical line widget. The first section in the Style tab is called General Style.

The first option here will let you adjust the Space Between Items, which helps you change the gap between the items further.

Next is the Item Padding option, which changes the space to the left of the items. We’ve set 50px for ours.

General Style Spaces

Date Style

The Date Style section contains the option for the date in your timeline. The Date Margin is the first option available here, allowing you to add more space all around the date. If you don’t want to have the same sides for each margin, you can delink the fields and enter (or not enter) a different value for each side.

We’ve delinked the fields here and set 19px at the bottom and 50px on the left while leaving the first two at 0px.

Data Style

Next is the Date Padding which allows you to add even more space around the date. We’ve delinked the fields here as it sets all the values to zero.

Date Padding

There’s another use for this option, and we will return to it shortly.

Then there’s the Date Width which lets you limit how wide the date will be. For example, you can shorten it a bit and make the date title fall into two rows. We’ve chosen not to use this setting for our example.

Next is the Date Color which helps you set any color for the date title. We’ve set ours to plain black (#000000).

Date Width and Date Color

There’s also the Date Typography, which lets you set the typography for the date text in full detail. It includes the options such as font family, weight, style, decoration, and so on.

Date Typography

We’ve changed the font family to Playfair Display and set the font size to 26px.

Right below, there’s the option to change the Date Background Color. After setting any color you like here, you can go back to the previously mentioned Date Padding option. By increasing the padding, you will also increase the surface that is covered by the color you picked.

Date Background Colour

That being said, we don’t plan to use the background color for our date, so we’ve reset both of these options.

Content Style

The Content Style section allows you to completely style your content.

The first option, Content Position, allows you to decide whether your content will be placed below the hours or on the right. For our design, we’ve used the default setting which places the content right under the hours.

Content Position

The Content Margin Top and Content Margin Bottom options let you add more space above and below the content, respectively. We’ve set 4px for the content margin top and 51px for the content margin bottom.

Content Margin Top and Bottom

Then, there’s the Content Color option that allows you to set the color of your content text. We’ve set the hex code #a1a1a1 for the content color in our example.

Content Color

Right after, you have the Content Typography option which contains all the same options as the Date Typography one. We’ve set the font family to match the one we are already using for the date. Also, we’ve changed the font size to 20 pixels. Finally, we’ve changed the Line Height option to pixels and set it to 38. This makes the content more spaced out overall as the line height has pushed the text further apart.

Content Typography

Hours Style and Image Style

We’ve reached the options that allow you to style the look of your hours. First, you can change the Hours Color by using the color picker or setting the hex code (we’ve chosen the color black with the hex code #000000). Then, you can also set the Hours Typography. We’ve set the font family to Playfair Display once again so it can fit with the rest of the content, and we’ve set the size to 20px.

Hours Color and Hours Typography

Next are the Image Style options which you can use to adjust the style of your images (if you have them in your content).

The first option here is Image Proportions. The default setting is Original, but there are many other settings you can use here, like Thumbnail, Medium, Large, Square, etc.

Image Proportions

We’ve uploaded the image that works best for the Original setting, so we will be keeping it.

Right below, there’s also the Image Margin Bottom which is used for adding more space below the image. We’ve set 24px here.

Image Margin Bottom

Line & Point Style

Last but not least, the Line & Point Style section has a comprehensive set of options that let you change the look of the line connecting the items and the points that are marking each one.

The first option serves to set the Line Start Position. The Date Label is the default position, which means that the line starts at the same height as the element content, or rather, at the top of the element. If you change this setting to First Item, the line will start at the point marking the first item (also at the same height as the image). This is the setting we’ve decided to keep for our vertical timeline.

First Item
First Item Preview

Next is the Line Color option which contains the same color picker as the other color-related options. We’ve added the hex code #eed0de for our line color.

Line Color
Line Color Preview

The Line Thickness option increases or decreases the thickness of the line. We’ve set ours at 1px.

Line Thickness

Then, the Point Type option allows you to adjust the style of your points. The Standard point type has the default, bullet-styled look.

You can also change the Point Size to make the points larger or smaller, Point Vertical Position (to adjust the point position to your liking according to the rest of the content), and Point Color.

Point Settings

Alternate Point Types

If you change the Point Type setting from Standard to something else, you also get the ability to set a few other options. For example, if you decide to use Line instead of the Standard point, you get to change the color, point width, height, and point horizontal (and vertical) position, among other things.

Let’s show you what this point type setting can look like once you start playing around with its options. To demonstrate, we’ve used the hex code #DA6767 for the point color, changed the point width to 49px, and set the point height to 4px. Also, we’ve changed the point’s horizontal and vertical position to -6 and 10px, just to show you what changing these options can do to the look of your point.

Post Type

We’ve reset all these settings to show you another point type – Icon. This setting lets you upload an icon of your choosing and use it as your timeline point. For our example, we’ve used the SVG.

Choose Icon

Hit the Insert Media button once you decide on the icon you want to use.

Then, you can change the Icon Color (we’ve used the hex code #eed0de for our example).

Icon Color

There’s also the Icon Size option here, but since we’ve uploaded an SVG, the size of our icon is already predefined, so there’s no need to adjust it further.

Icon Size

And that’s it for all of the options you can use to style your vertical timeline.

Duplicating the Timeline

The only thing left to do is to copy the timeline from the first column to another column we’ve prepared already to keep the same timeline style.

To do this, simply right-click on the existing element and hit Duplicate.


Then, drag the copy of the timeline to the right column.

Widget Duplicated

Now, all you need to do is edit the content.

This is the final look of our vertical timeline element after we changed the content in the right column:

Vertical Timeline Live Preview

Make sure to hit the Publish/Update button once you’re done with adjusting all the settings.


Wrapping Things Up

A vertical timeline is an incredibly useful website element that can provide your site visitors with some of the most important sequences related to your business in a neat, user-friendly, and attractive manner. As such, it can only enhance their overall engagement with your brand and make them interested to explore more.

As you could see, the Qi Addons for Elementor’s Vertical Timeline widget is fully flexible and comes with tons of different options for editing and styling the timeline content. It allows you to easily change the style of your hours and images, adjust the look of lines and points, set different colors, typography, paddings, and plenty more. You can either use the same options we did in our example, or play around with the options we presented above to create a unique look for your own vertical timeline element.

Post your comment