Introduction
Timelines are an effective way to showcase events and time-based content. They are useful in depicting historical events, displaying blog posts, tracking project development events, etc in a chronological manner. EAE - Timeline widget allows you to create beautiful and interactive Timelines for your WordPress websites.
Therefore by using the Timeline widget of Elementor Addon Elements, you can create timelines for Posts, Custom Post type, or Custom text content.
Step 1: Install & Activate Plugin
In order to use EAE - Timeline Widget, you have to first install and activate Elementor Addon Elements Plugin.
Step 2: Add EAE - Timeline widget
To begin with first create a page or a template where you want to add the Timeline widget and edit the page with Elementor. Then just drag and drop the EAE - Timeline widget in Elementor. You will see a timeline appear with default settings.
Step 3: Content tab Customization
Skins: In this section, you can select the layout of the Timeline, from the different pre-build layouts. After that, you have to choose the timeline Source like Custom or Post. Select Custom to add custom content in the timeline cards. If you want to display the blog posts in your timeline, then choose Post in the source option. When creating a post timeline, you will get options to filter your post based on categories and tags.
Timeline: In this section, you will see a stack of item boxes. By clicking on these boxes, you can add date, title, image, and content to each card. Here, you can also customize the styling of each card individually by setting different style options for image, card, and icon. You can easily add text content and media files to your timeline cards.
Further, you can also add more items to the timeline, by clicking on the Add Item button.
Global Icon: Here you can also set a global icon to all your timeline cards. Insert an icon from the icon library or an image or a text.
Step 4: Style Tab Customization
The Style tab gives you various setting options to customize the timeline layouts, cards, date, timeline icon, and connectors. Here you can style each timeline element individually.
Under the Layout setting section, you can change the alignment of the timeline like the left, center, or right. You can also adjust the vertical and horizontal positioning between the cards. Set the timeline responsiveness for the mobile and tablet.
Next, there is a Card setting option that allows you to customize the card settings. Here you can also adjust the image size and spacing. More setting options are available to set the background color, typography, and alignment.
Then in the Date setting section, you can customize the date, you can change the font color, adjust the border-radius, padding, and margins.
Similarly, there are more styling options available to style different sections like Connector, and Icon.
Live Demo
Check out the Demo setup of the EAE - Timeline widget.