BLACK FRIDAY SALE: Get 50% Off On Any UNLIMITED DOWNLOADS Plan! Use Code "blackfriday" At Checkout

DOWNLOAD ALL NOW!

Search for a plugin or theme

How to Create Timeline Content With Elementor

You are currently viewing How to Create Timeline Content With Elementor

A timeline section presents numerous events that occurred in a certain period.

Companies use the timeline section to display their highlights since they were established up to the current point.

In this article, you will learn how to create a timeline section with the Elementor.

What is a Timeline Content

As mentioned above, a website’s timeline section will display essential milestones in the company’s life.

There are many different timelines examples, and you can mostly find them in the ‘about us’ pages of the big companies’ websites.

The timeline section usually contains three different components:

  • The event.
  • The year it happened.
  • Spine to connect between the different events on the timeline.
Timeline content example

Create a Timeline Section With Elementor

Out of the box, Elementor does not have a widget to create a timeline.

However, we can still use Elementor to create a timeline section in two different ways.

  • Using the HTML widget.
  • Using an external Elementor widget.

I’ll show you both ways in this tutorial, and let’s start with the first option.

Create a timeline with the HTML widget

If you already have the timeline HTML structure, drag the HTML widget to your desired column and paste it inside the widget afterward.

If you don’t have the HTML code yet, you’ll need to find one that you like.

In this example, we will use a simple timeline structure by w3schools. However, later in the article, I’ll show you where to find other alternatives.

The timeline section in the link above contains an HTML structure and CSS to style it.

Step #1: use the HTML widget

The first step is to drag the Elementor HTML widget into the desired location.

Drag Elementor HTML Widget

Step #2: HTML structure

Once you have positioned the widget in the desired location, copy the HTML structure from the link above.

Copy Timeline HTML structure

Then, paste it inside the HTML code box of the widget.

Once you do it, you will see the new un-styled timeline section on the right.

Unstyled timeline section after pasting html

Step #3: style it with CSS

Finally, all we have left to do is copy the CSS rules and paste them inside the widget.

First, copy the CSS rules from the w3schools link above.

Copy timeline css rules

Then, navigate to the Advanced tab of the Elementor HTML widget and paste the CSS rules inside the Custom CSS option.

After pasting the CSS rules, the timeline section will be styled and look better.

Timeline with css

Please note that the background color was applied to the entire page and not only to the section itself.

To fix that, change the body to selector and that should fix it.

Change body to selector

Because the HTML widget of Elementor does not have a Style tab, you’ll need to know some basic CSS if you would like to change the colors or sizes of the elements.

Changing the css

If you know your way around, now is the time to add your extra touch and style it even further.

However, if you prefer to see other timeline examples, keep reading.

More HTML timeline examples

If you like the idea of using the HTML widget to create the timeline, check more beautiful timeline sections by FreeFrontend to get inspiration.

Elementor widget libraries

Once you have found the timeline design you like, click on the demo and code link to get the HTML structure and the CSS rules.

Timeline demo and code

Then, copy the HTML and the CSS and paste them inside the Elementor HTML widget.

Copy html and css

The result will look stunning and professional. Now, design and customize it as you wish.

Timeline content

Create a timeline with Elementor widget

To create a timeline with an Elementor widget, we will first need to use an extension library plugin to add an extra set of widgets to Elementor.

Although that there are many great extension plugins for Elementor, in this section, we will focus on Happy Addons.

Step #1: install the plugin

To add the Happy Addons plugin, navigate to Plugins -> Add New and search for Happy Addons. Then, Install and Activate the first result on the left.

Happy Addons for Elementor

Now, we will need to install the pro version of Happy Addons. You can get the pro version from the official website for the total price or from us for only $4.99. It’s the same plugin, and the only difference is that we don’t provide technical support for the plugin.

After downloading the pro version, upload it to your WordPress website by navigating to Plugins -> Add New -> Upload Plugin, choose the zip file and install it.

Upload plugin to WordPress

Step #2: use the timeline widget

Once activating the Happy Addons for Elementor plugin, it added many new widgets to your library, and you can find them under the Happy Addons tab.

Happy addons for elementor widgets

Look for the timeline widget and drag it to the desired location.

Happy Addons timeline widget

The Happy Addons widgets act precisely like any other official Elementor widget and contain three tabs: content, style, and advanced.

The reason I chose this specific plugin is because of the various timeline options that they offer.

Expand the presets option under the content tab and browse between all the different timelines options.

Different timeline options

Then, please select the one you like most and move forward to add more events to it.

Step #3: modify the structure

Under the Timeline option, you can add more events to the section.

Add timeline events

After building the timeline events, click on each of the events to change its icon, date, image, and description.

Change event content

Then, expand the Settings tab to enable or disable various parts of the structure.

Under the settings option, you can show or hide the dates, the spine arrows and even align the boxes in different ways.

Another excellent option of the settings tab is the Show Scroll Tree. The spine color (scroll tree) will be filled dynamically when scrolling down the timeline by enabling this option.

Show scroll tree

When you are done building the timeline’ structure, move on to the style tab to change the colors of the elements to match your website and brand.

Inside the Style tab, you can customize any part of the widget like the content box, icon box, title, time & date, and button.

For example, if we would like to change the content title color, we will expand the Title tab and choose a different color.

Change widget style

When finished customizing your timeline section, publish and revisit your page to view your new section.

More Elementor timeline widgets.

As I said above, the Happy Addons for Elementor plugin is only one out of many plugins that will add widgets to Elementor.

Here is a list of alternative plugins that also have an Elementor timeline widget:

  • Ultimate Addons for Elementor
  • Essential Addons
  • Croco Blocks
  • Unlimited Elements
  • The Plus Addons
  • Piotnet Addons
  • Namogo Extras
  • Element Pack
  • Premium Addons

If you debate which plugin to use, check out our unlimited download plans and download them all for a small fixed price.

Conclusion

In this article, you learned how to add a timeline section to your website with Elementor.

Let us know below if you used the HTML widget or a plugin (and which one) to achieve it.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply