Timeline

The Timeline element is again a Content Container element with a function to display the content either as a timeline or as a step-by-step. Let's see how this works. I have an empty block here. I click on the Add Element, and then in the panel on the left, you will find the timeline element. Click, Hold, and drag, and we drop it onto the page. By default, it comes in with two tabs. So let's first look a little bit at exactly what tabs is and how we bring in content. This one is called tab one and tab two. And under tab one, you will see that we have an icon and a button under tab two. This bounding box area here is your content area. Everything inside that content area is exactly how you would build out any Everything within the builder. We can go to the add elements and drag in. And where we see that thick gray line, drop it and bring in anything within the elements to build out, again, our content here. I'll bring in a line and let's add a heading. So I'll just quickly style this so we have an idea heading one.

What I just did there is exactly what you would do with anything when you build it out from the elements within the builder. So that's why I refer to this as a content container element with the functionality then of putting it in a timeline. I'll give you a tip at this moment, and that is if you intend to use the same formatting for all the different steps in this timeline. Do it for the first first one, get it exactly the way you want, and then duplicate it so that you don't have to go and do it each and every time for the following ones. To duplicate it, you simply click here, then select Duplicate, and you will see we get the second one If I click again and I scroll, you will see we've added a third one, and these are clones, so all of them says tab one. If I select tab two, I can delete it from the options toolbar. Now, I will just go and rename this, and I simply We do that by clicking on it and then typing the way you are used to working with text within the builder.

The bounding box here is the timeline container, and the settings are accessed over here. You have the option for the padding, which will apply the padding to the whole bounding box. You also have margins as well as the other entrance animation effects. Duplicate and delete. For the settings of the timeline itself, you click on any of the icons for the tabs. Let's start you with settings, and you see we have width. This is the content area currently set to 350 pixels. You can increase it, and naturally, you can decrease it. I'll take it down to 300. Under styling, you have options for padding. I'll connect all the sides, and this padding applies to what we have over here within the content area. Now, with my heading too big, I will go back to my width and just increase it a little bit. All the way to the left are the options. And we have two orientation options. We have a vertical one and a horizontal one. We work with the horizontal one, and then we have styles. You can have the content at the top or you can stagger them. Titles, those are the labels you see at the top, can be deactivated.

And then from Columns, you can set how many columns appear on page. We have two, but we know they are three, and that's why the scroll bar here at the bottom appears. If we wanted the timeline to fit in, then we only need to increase this to three columns, and now they fit in nicely. You can see, though, that this content area now squashed. So we go back to our settings and we reduce that. And if we need to make changes to the heading so it can fit in better, we can do that within our styling. Spacing applies to the space between the content and the timeline function at the top. Icons are switched out over here. And this is done on a tab-by-tab basis. You can see here. The size applies to all of them at the same time. You have the presets, and then you can also go custom. For the background, increase the size, and that adds space between the icon and the background. Choose between square, circle, or again, custom corners. For the horizontal timeline, you have options under Style to put it to the left or to stagger it, as well as removing the titles and adding the spacing.

Color will give you all the control over the background of the content as well as the step at the top. Change out the icon color, and this is done on a tab-by-tab basis. You can add a border, and then Shadow, the line refers to the timeline line. The last part you need to take note of is the label at the top. This styling works independently. Select the tab, change our topography, which will apply to all tabs, and color, which will also apply to all tabs. It's very important with this element that you go and view it on responsive devices, as timelines usually do not work very well on mobile devices, and you will need to maybe deactivate it for a mobile device or work on a horizontal layout. If we go into our tablet, you will see it becomes really squashed very, very quickly. To do that, we go to our settings and reduce the width.