JetElements is an Elementor add-on that has unique widgets. You can use this add-on to create both a vertical and horizontal timeline. In this post, we will show you how to create a vertical timeline with JetElements.
If you come to this page from search engine and haven’t heard about Elementor before, it is a page builder plugin for WordPress. It has a drag-and-drop visual interface, allowing you to create a beautiful webpage without coding.
You can explore this website to learn more about Elementor. Elementor itself is a freemium plugin. To create a timeline like we are going to demonstrate below, you can use the free version. But, you need to buy the JetElements add-on, which costs only $42.
Getting Started
To get started, create a new page (Pages -> Add New) and edit it with Elementor by clicking the Edit with Elementor button.
Set the page layout by clicking the gear icon on the bottom-left corner of the left panel. In this example, we choose Elementor Full Width. This layout removes the WordPress sidebar (if you have one) and retains only the header and the footer.
Once done setting the page layout, click the plus button on the Elementor editor to add a new section. There are 12 section structure options you can choose from. We use the single-column structure in this example.
Drag the Vertical Timeline widget from the left panel to the editor.
By default, the Vertical Timeline widget brings you four cards. A card itself is the content area where you can write your content (description and meta). Each card also already includes a point icon and you can also add an image. To add an image on a card, slide the Show Image button and upload your preferred image.
Add the description of your card on the Description field, the time on the Meta field and the title on the Title field. To change the icon, you can go to the Point section.
Repeat the steps above on the other cards. If you need more cards, you can click the ADD ITEM button.
Setting the Animation Effect and the Gap Between Cards
By default, your timeline has no animation effect. If you want to apply the animation effect, you can go to the Layout section and slide the Animate Cards button. From here, you can also set the gap between cards.
Simply change the value of Horizontal Space to set the horizontal gap and the Vertical Space to set the vertical gap between cards.
Customizing the Timeline
Once you are done adding the content on each card, you can customize your timeline appearance. To do so, you can go to the Style tab. There are lots of setting options you can set here. Click each option to see what settings you can set.
Here are the common settings you might want to make:
- Change the card background
To change the card background, you can select the Cards option and go to the Background section. Click the color selector and select your preferred color. You can also set the box shadow by clicking Box Shadow.
- Change the font size, style, and color
If you want to change the font color of your timeline content, you can click one of these options: Description, Title, and Meta. These options have a typography controller that allows you to change the font size, font style, and font color.
You can click the pencil icon to use the typography controller. To change the text color, you can simply click the color selector.
There are many other setting options offered by the Vertical Timeline widget of JetElemens. You can play around with the left panel to explore more setting options.
Once get satisfied with the result, you can click the PUBLISH button on the bottom side of the left panel to publish your page.
The Bottom Line
Creating a vertical timeline is a great idea to tell a history of something. Its visual style allows people to understand what you want to say more easily. Unfortunately, Elementor has no native design element to create a vertical timeline. JetElements is an add-on you can use to create a vertical in WordPress. Or more specifically Elementor.
