In this article we’ll be having a look at how to build horizontal and vertical timelines with the help of Elementor page builder. To make it possible to create horizontal and vertical timelines with Elementor, you will need JetElements add-on, which is a perfect tool that brings dozens of new widgets and new tools for creating blocks with Elementor. Here you can see the examples of the designs you’ll be able to create with the help of the widgets available in JetElements plugin. 
So, you’ll be able to create two types of timelines – the Vertical one and the Horizontal one. To learn more about this add-on and download it right away, you can follow the link. Now, let’s start building our timeline. You simply go to the elements panel Any type in the word “timeline.” It can be either Horizontal or Vertical. These two are available as two separate widgets. Let’s start with the Vertical one. 
So, this is your basic set up, this is what you start with. So here in the “Cards” tab, You can add the items that will be available in your timeline. As you know as you scroll down this little progress bar follows you. So let’s open a card and see what you’ve got in there. Here we set the title for the card. Here it is. You set the meta, which is the date usually. Or it can be any other information that you want to put in there. But the thing is it’s just displayed on the other side of these points which contains an icon and by the way, here is where you can choose what icon you want to use for the particular point.
And you can also choose the point content type, so it can be not only the icon, but also the text. And here where you type in the point text, here goes the description which will be displayed on your card. If you want to add an image to your card, you can toggle the “Show Image” option to “Yes”, and you’ll be able to add an image to your card. So, you go to image gallery. You choose the image that you want to display and you click “Insert Media” and here you go. You have added an image to your card. There goes the Layout tab. We can change the layout in which your cards are displayed. If you want, you can even animate the cards. Just switch this option on and you will see that these cards are now sliding in when you reload the page. So, here’s where I change the horizontal alignment. So if you want you can make all the cards be positioned on the left from the actual progress bar from the actual timeline. And the vertical alignment will make the cards appear right next to the point. Like they’re at the top Sticking right to the top edge right here, in the grid which they create together. So, in here you tweak the amount of horizontal and vertical space that you have between the cards and the progress bar.
So, I like this layout pretty much. So, we’ll go with this one and let’s go to the “Cell” tab to see what seconds we’ve got in there. So, in the “Cards” tab you have the settings for the container of the card. You can also manage the states the Normal state, the Hover state and the Active state. So, for example, If you want the card to change the background once you hover over it, you go to the “Hover” tab and you simply change the background color. So, we see there’s a variety of options, so you can change the look of the card container Just the way you want. And you can also change the size of this little arrow that you’ve got here. Now, you go to settings for the image and you can tweak the amount of space that you have between the image and the title. And also the other content that you have in your card such as description. I go to settings for the meta. Which are the style settings that you’ve got in there? And you can also manage the Hover state, the Normal state, and the Active state as well. And here go the typography settings. The content is not about the card but specifically about the title and description that is contained in each card. So, this way it is a little bit different from the cards that you have in your layout.
Let’s move on to the next tab which is “Title” and these are the simple settings for the typography, the states and the color of the title. The same with the description. The same with the point where you can tweak the size of the point, change the topography set the settings for the text and for the icon, change colors, etc, and here are the settings for the actual progress bar that follows you as you scroll down. So, you can change the thickness, change the color, And This is pretty much it for the Vertical timeline. Let’s right-click and delete it. And search for the timeline again, and here we have the Horizontal timeline which has pretty similar settings to the ones that you have in the Vertical timeline, but let’s have a look at them anyways. So, I drop it here, and you see that now I have this scroll bar at the bottom. I can scroll using this Scroll bar and also have cards, and it is done in a pretty much similar manner to the one that is used with the Vertical timeline. You can also add an image in here, you can tweak the look of the point, add an icon, add the title meta, and description.
In the layout, you have a little bit different settings. So, here you can set the number of columns. So, we had three and since we have how many – four cards – we have to scroll to see all of them, but if you set the number of columns to four, you will not have to scroll because you will see all of them right away in one box. So, there you change the look of the layout. So, it can be with the cards being above and under the progress bar. Or, with the cards being only at the top, or only at the bottom of the box. Also, here you can change the alignment, meaning the position of the cards, according to these points. So, let’s set the number of columns to 3 again, so we can change the navigation type. Can be either scroll bar or the arrows navigation, Later in the “Cell” tab, you can change the position of these arrows. Let’s have a look at that. You can move them in the horizontal axis and change their position. So, now we can use the arrows to scroll and see all the rest of your items. And all the other settings are pretty much the same that you had in the Vertical timeline. Here goes the items gap. So, I can make this gap between the cards bigger or smaller So, here we go.