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
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.
Step #2: HTML structure
Now, we will need to copy the HTML structure from the link above.
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.
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.
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.
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
selector and that should do the trick.
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.
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.
Then, just copy the HTML and the CSS and paste it inside the Elementor HTML widget.
The result will look very beautiful and professional. Now, just design and customize it as you wish.
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.
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.
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.
Look for the timeline widget and drag it to the desired location.
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.
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.
After building the timeline events, click on each of the events in order to change its icon, date, image, and description.
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.
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.
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.
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.