How to Display content in a Timeline format Using Elementor

Timelines are a great way to show the content of your website. Elementor Timeline widget allows you to add interactive timelines on your website pages without having to wrangle with the code. You can create horizontal and vertical timeline layout with various styling options and animations.

In this post, we’ll see how you can display content in a Timeline format using Elementor and PowerPack Elementor Addon’s Timeline Widget.

First, we can see where all can you use timeline format?

  • You can display the company’s history and progress with a timeline in chronological order.
  • Using the timeline, you can showcase your achievements.
  • You can create a timeline for the blog post.

Are you looking for more inspiration? Check out the demo setup for Elementor Timeline Widget on our website.

How to Create a Timeline using Elementor Timeline Widget

Now that we know the possible use cases of Timeline on our website let’s see how we can add it using Elementor. To add the Timeline to any page, you will need to install and activate both Elementor and the PowerPack Elementor addon plugins.

Also Read: How to Sky Rocket your Web Design Buiness with Elementor

Step 1: Launch Elementor Editor

Log in to your WordPress Dashboard > Pages. Now select the page in which you wish to add the Timeline widget and click “Edit with Elementor” option/button.

Now you can drag and drop the Timeline widget in place in Elementor editor. As soon as you add the Timeline widget, you’ll see the timeline appear with default settings.

The below screenshot shows how your page would look like after adding the Timeline widget.

elementor-timeline-demo

Step 2: Elementor Timeline Customizations in Content Tab

Layout: This is the first section of the Timeline; you will see the options to create a Horizontal Elementor Timeline or a Vertical Elementor Timeline. 

Source: This section allows you to select the timeline source. If you choose Custom as a source, then you have the option to choose the type of custom cards that retrieve in the timeline as content, and if you want your blog posts to display in the timeline widget, you can select the Posts option.

You can also enable and disable the date here and animate the cards from the settings.

 

Timeline: In Timeline subsection, you choose the Title and Date for each card individually. You can also add an Image and style each card separately.

To make changes in the timeline content, click on the timeline section.

After clicking you see a stack of boxes displaying the dates inside, each box indicates an individual section of the timeline.

elementor-timeline-widget-content-settings

Click on the box, and you find options for changing content and adding images to the timeline.

From the content tab, you can change the title and description respectively.

For adding images, click on the image tab and enable the show image button.” Now you can select an image for the timeline element.

NOTE: Making changes in the individual section doesn’t affect the other sections of the Timeline.

You can add more section to the Timeline with the Add Item button, and likewise, you can remove the section from the Close button above.

Step 3: Elementor Timeline Customizations in Style Tab:

elementor-timeline-widget-style-settings

In the style tab, you have plenty of options to customize the content of the timeline. Here you can completely modify the timeline, layouts, cards, typographies and many more!

Layout Settings: Here, you can change the position of the Timeline: left, right or center.  You can also change the arrow alignment and fix it at the top, middle or bottom of the arrow.

Card Settings:  In this section, you customize the card, you can adjust card and content padding, change the text alignment, add the background color of your choice, select the border type and adjust the card’s border-radius. Here you can also adjust space between image and the content of the card.

This section also allows you to customize the card title; you can easily style your title, content, color, alignment, typography, etc.

Marker Settings: Here you can easily customize the marker, you can choose an icon, letter or number from the drop-down list.

You can adjust marker size, marker background size, marker color and add a border to the markers as well.

Date Setting:  This allows you to customize the date; you can change the font color from the subsection, add a border, background color and can adjust the border-radius and padding.

You can also add shadow to the box.

Connector Settings: This is the last section of the style tab, here you can change the spacing between connector and card, you can adjust the thickness and coloring of the connector.

Here are some examples of the beautiful Elementor timelines made with PowerPack timeline widget!

 

Vertical elementor timeline

    Horizontal-elementor-timeline

Wrapping it up!

PowerPack Elementor Timeline widget lets you create astonishing and beautiful timelines for the website. You can also check out the Timeline widget demo to get an insight into what you can do with the widget.

Get the Timeline widget for Elementor with PowerPack, the best Elementor addon. PowerPack offers more than 50 creatively designed widgets which you can use to take your WordPress design to the next level.

Priyanka

Priyanka

I am Priyanka, Community manager at IdeaBox Creations. I am a social media fanatic who loves writing & reading. When I am not working, I am either cooking, singing, or traveling.

Leave a Comment

Your email address will not be published. Required fields are marked *