Want to create an impressive Divi timeline layout for your website?
Creating a Divi Timeline layout is an easy way to break up the look of your site with timelines. It’s a great tool for highlighting dates and milestones in history or within your company, as well as providing visitors with an easier way to navigate through content.
You can easily create this type of layout from scratch or with the help of a plugin.
With the right Divi timeline module, creating timeline layouts has never been easier! The best plugins allow you to quickly design beautiful layouts while keeping them dynamic and interactive – perfect for any online business!
These plugins will save you time when building your pages and make it fun to display information in an engaging and visually appealing manner.
Table of contents
- How to create a Divi timeline from scratch
- Divi timeline tutorials by Elegant Themes
- The best Divi plugins to create a timeline layout
How to create a Divi timeline from scratch
The Divi Theme doesn’t come with a timeline module but we can create one from scratch. I will guide you step-by-step on how to create a Divi timeline layout.
I have created a timeline layout in Divi with a scroll animation effect. You can view the demo here:
Step 1: Create a section
Enable the visual builder on any page and start by inserting a new section. Use the following settings for this section:
- Background color: #eef0f7
- top and bottom padding 150px
Step 2: Create a row
Place a 2-column row in the section and use the following settings for this row.
- Enable the use of custom gutter width.
- Set the custom gutter width to 1.
- Set the top and bottom padding to 50px.
- Under position set the z-index to 1.
- Enable vertical motion
- Set starting to 0
- Set mid to 0 and 35%
- Set end to -2.5
Switch to responsive tab > tablet
- Set the ending to 0%
Switch to Fading in and out tab. Then back to the desktop tab. And use the following settings:
- Enabling Fading in and out
- Starting 25%
- Mid 100%
- Ending 25%
Switch to responsive tab > tablet
- Set the starting and ending to 100%.
Step 3: First column
Open the first column of this row.
Go to the Design tab and set the right padding to 50px.
After that switch to the tablet and set the right padding to 0px.
Place an image module in the first column and place an image in the image tab.
Then go over to the Design tab and set the alignment to Right.
Step 4: Second column
Place a blurb module in this column.
- In the Title field place a year number.
- In the image field place an image (I used an image of 50x50px)
Image & Icon
- Set the image placement to the left
- Set the image/icon width to 50px
- Set the blurb content width to 1100px
- Set the spacing for the desktop to 75px top margin and -40px left margin.
- For tablet/mobile to 25px top padding and 0px left padding.
Under custom CSS field > blurb image place this in it:
- Set padding-left to 15px
Under custom CSS field > blurb title place this in it:
- Set margin-top to 7px
Place a text module under the blurb module.
This will be the title for your first timeline. You can use an h2 or h3 title if you like I went with just text.
In the Design tab, I use the following settings under Text.
- Text Font Weight: Bold
- Text Font Size: 24px
- Set margin-left to 42px
- Set margin-left for tablet/mobile to 0px
Place another text module under this one and place a text here.
- Set margin-left: 42px
- Set margin-left for tablet/mobile 0px.
- Set padding-top: 15px.
Step 5: Duplicate the row
From here you can duplicate the first row and change your content in the text modules.
You can make as many rows as you like.
Divi timeline tutorials by Elegant Themes
This Divi timeline layout is created by Elegant Themes and provides a simple, step-by-step guide to help you build the timeline design from the ground up.
As you scroll down the page, an eye-catching red dot follows along and highlights each icon as it moves through the process.
It’s designed to be mobile friendly too – so no matter which device you use, you can easily adjust the look and feel of your timeline to fit with your website’s branding and style.
The tutorial starts out with adding new elements to the page such as a row, section, or module; then adding background colors, animations, images, and icons.
After setting up the basic layout, you’ll want to add a unique touch that helps bring your timeline design to life – for example, by setting up an animation effect so that when you scroll down the page a red dot appears in sync with each step of your process.
Get started with this Divi timeline tutorial
This is another tutorial by Elegant Themes for a horizontal timeline layout created with 3 blurb modules.
It is an easy and simple-to-follow tutorial to add a timeline to your Divi website. You can find this tutorial here.
The best Divi plugins to create a timeline layout
Divi Timeline modules make it easy to create beautiful, responsive timelines using the Divi Builder. These modules come with tons of extra design options for your timelines.
Take a look at some of the best Divi timeline layouts on the marketplace.
Divi Supreme Timeline Module
The Divi Supreme Content Timeline Module is an incredibly powerful and user-friendly tool that can be used to create dynamic timelines of your content with ease.
The Divi timeline module makes it easy for designers of any experience level to create compelling timelines with just a few clicks.
Thanks to its user-friendly interface, you can generate gorgeous visual timelines quickly and effortlessly.
The Divi timeline module also provides a number of advanced features. With the ability to add images, and videos, customize fonts and colors, as well as animate elements on the timeline – there is no limit to what you can do!
This makes it possible to craft an engaging story or timeline without needing any knowledge of coding or web design.
Divi Plus Timeline Module
The Divi Plus Timeline module allows you to bring an eye-catching look to your website. It’s designed specifically for creating engaging vertical timelines that tell stories about businesses, careers, or lives.
With this module, you can easily show images, event dates, and other information in your Divi timeline without needing to know CSS or any complex coding.
No matter what type of story you’re trying to tell on your website, the Divi Plus Timeline module makes it easy to do so with visually appealing and professionally constructed timelines.
You can choose from several different styling options according to the look you want for the timeline.
You can adjust the font size and color of text elements such as headings and descriptions, as well as change the alignment of text elements like titles and subtitles.
You can also choose from several different background colors that will help ensure your timeline stands out from other content on the page.
Furthermore, if you need more control over your timeline’s appearance, you can also customize its individual elements using custom CSS code.
Divi Pixel plugin
It is important that websites are optimized to be viewed on mobile devices, and the Divi Pixel Timeline Module makes it easy to customize your timeline layout for any device.
This module has specific settings for desktop, tablet, and mobile users so that each element of the timeline can be adjusted to your specifications – this includes changes to the text, the line separator between events, and even icons.
With these settings, you can make sure that your timeline looks great on any device without compromising its functionality or readability.
In addition to these responsive settings, this Divi Timeline Module also provides plenty of additional options so you can customize it in order to create a beautiful timeline for your website.
You’ll have control over how many events appear at once on a timeline, how far apart those events are spaced out from each other, what type of transition is used when moving from event to event, whether or not icons should appear alongside each item in the timeline, as well as color and font customizations.
These features combine to give you full control over how your timeline looks so you can ensure it stands out amongst all of your other content.
Overall, creating a Divi timeline layout for your website is a great way to add some interactivity and visual interest to your site.
I hope you liked this step-by-step tutorial on how to create a Divi timeline, and if you have any questions just let me know in the comments below.
You might also like
- How To Speed Up Your Divi Website (Guide)
- How to Make a Divi Child Theme
- How to Make a Website With Divi Theme in 2023
- The Best Divi Plugins For 2023
- The Best Divi Child Themes For 2023
- The Best Divi WooCommerce Layouts For 2023
- How To Choose The Best Divi Hosting In 2023