Search for a plugin or theme

How to Create Timeline Content With Elementor

How to Create Timeline Content With Elementor

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

Many companies using the timeline section to display their highlights since they were established.

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

What is a Timeline Content

As mentioned above, the timeline section will display important events in specific company life.

There are many different timelines example 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 or Elementor pro 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 Elementor library plugin.

Create a timeline with the HTML widget

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

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

In this example, we will use a simple timeline structure that was created by w3schools.

The timeline section in the link above is containing an HTML structure and CSS to style the section.

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

Now, we will need to copy the HTML structure from the link above.

Copy Timeline HTML structure

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

After you did 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 to copy the CSS rules and paste it inside the widget.

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

Copy timeline css rules

Second, 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

The only problem is that the background color of the section was applied to the whole page and not only to the section itself.

To fix that, just change the body to selector and that should do the trick.

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

More HTML timeline examples

If you like the idea of using the HTML widget to create the timeline section but don’t like the example above, check these beautiful timeline sections by FreeFrontend to get inspired.

If you like any of the timelines in the link above, simply click on the demo and code link to get the HTML structure and the CSS rules.

Timeline demo and code

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

Elementor widget libraries

Copy html and css

The result will look very beautiful and professional. Now, just design and customize it as you wish.

Timeline content

Create a timeline with Elementor widget

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

There are many great extension plugins for Elementor and in the next section I will list my favorite ones but in this section, we will focus on Happy Addons.

To add the Happy Addons plugin, navigate to Plugins -> Add New and search for Happy Addons.

Click Install and Activate on 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 full price or from us for only $4.99. This is the exact same plugin, 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, click on Install now and then on Activate.

Upload plugin to WordPress

After activating the Happy Addons for Elementor plugin, many new widgets were added to your widgets library list and can be found under the Happy Addons section.

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 are acting exactly like any other official Elementor widget and containing three tabs: content, style, and advanced.

The reason I chose the Happy Addons for Elementor plugin is because of the various timeline options you can choose from.

Expand the Presets option under the Content tab and there you’ll have thirteen different timelines options to choose from.

Different timeline options

Feel free to browse between then all and select the one that you like the most.

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 in order 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 cool option of the Settings tab is the Show Scroll Tree. By enabling this option, the spine color (scroll tree) will be filled dynamically when scrolling down the timeline.

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 will choose a different color.

Change widget style

When you are done customizing your timeline section, make sure to click 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

All the plugins above are great and all offer different kinds of widgets. You can get each of them individually from their official website of all of them from us.

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

Conclusion

In this article, we learned how to add a timeline section to your WordPress website using the Elementor page builder.

Leave us a comment down below and let us know 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