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:
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.
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.
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.
Then, open the Elements menu and find the Vertical Timeline widget. Drag it over to the page.
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.
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.
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.
Then, there’s the Content field – this is where you can change the paragraph text located below the Hours.
One last option here is Image, allowing you to add an image to your item.
We’ve chosen to add an image to our item as well.
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:
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The Line Thickness option increases or decreases the thickness of the line. We’ve set ours at 1px.
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.
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.
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.
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).
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.
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.
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:
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.
