How to Create a Vertical Divi Timeline Layout

Updated on: July 22, 2024

Are you looking to showcase your events, project milestones, or historical data in an engaging way? A timeline is a perfect solution. In this comprehensive Divi timeline tutorial, we’ll guide you through the process of creating a visually appealing and functional timeline using and the Divi theme. Whether you’re a beginner or an experienced Divi user, you’ll find this guide helpful and easy to follow!

  • To install this modification you will need the Divi Theme by Elegant Themes installed.
  • You can follow this tutorial or download Ready-To-Use Page Layout with CSS code embedded.
Live Preview
$5 Download

Step-by-Step Divi Timeline Tutorial

In this tutorial I will show you how to build a numbered timeline with a Divi – so it looks like steps to follow kind of thing. We are going to use only Divi image and Divi text module in timeline building process. Once desktop version is done we are going to optimize it for mobile and at the end we will give it some side slide in fade effects to make it look even more professional.

Setting Up the Grid

We will start by setting up a grid with rows, columns, and modules. Then, we will add CSS IDs and classes to sections, columns, and modules. Now, open your design grid/wireframe view.

  1. Add a Standard Section and select a Single Column layout for the heading area.
  2. Add a Text Module followed by a Divider Module.
  3. Add a New Row and select a 2-column layout.
  4. Add an Image Module to the first column on the left.
  5. Add Two Text Modules to the second column on the right.

At this point, your wireframe/grid Divi view should resemble the one in the picture below.

Divi timeline grid wireframe

Applying Custom CSS IDs and Classes

Next, we will apply our custom CSS IDs and classes to our grid frame.

Section Settings -> Advanced

  1. Open Section Settings by clicking the gear icon in the blue frame.
  2. Go to the Advanced tab and open CSS ID & Classes.
  3. Add the CSS Class “vertical-timeline“.
  4. Save changes by clicking the green check icon.
Advanced Section Settings for Divi Timeline

Row Settings -> Advanced

As or right now we should have 2 rows on our website, but once we apply all the changes to them we are going to duplicate  we apply right changes to them we are going to duplicate bottom row 3 more times.

FIRST ROW EDITING

  1. Start editing by clicking to the gear icon in the green Row frame.
  2. Go to Advanced tab and open CSS ID & Classes section.
  3. Copy CSS Class section-title to the CSS Class field in Advanced tab -> CSS ID & Classes.
  4. Save changes and leave to edit our second row.

SECOND ROW EDITING

  1. Start editing by clicking to the gear icon in the green Row frame.
  2. Open Advanced tab and click on CSS ID & Classes.
  3. Copy CSS classes step step-1 and paste into CSS Class field. Do not close this row settings yet, we have to edit column settings as well.
  4. Go back to the Content tab a here you can find 2 Columns. Each column has it’s own gear icon on the left, means separate settings.
  5. Click on gray gear icon to enter the Column Settings for the first column.
  6. Go to Advanced -> CSS ID & Classes and in a CSS Class field copy paste class: left-side.
  7. Go back by clicking on the arrow icon in the purple header area of Column Settings.
  8. Click on gray gear icon to enter second Column Settings.
  9. Go to Advanced -> CSS ID & Classes and in a CSS Class field insert: right-side
  10. We are done with Row & Column Settings to Save just confirm by clicking the green checked icon.
  11. Save your work so far by clicking to purple 3 dots and than click save so we can continue to with Module Settings.

Editing First Row Modules, Adding Content & Animation

Yeah I know it’s little bit overwhelming – If you need, take a little break and then when you’re back buckle up because we are almost there.

Next we will continue with module settings – one at the time.

  1. Let’s start by editing Text Module in the first row. Open Text Settings, and now in the Body area you want to use H2 and H3 tags to describe your Timeline title and subtitle. If you use any other tags you might won’t get exactly the same design as we have in this demo.
  2. Next go to Advanced tab and again add CSS Class et-waypoint et_pb_animation_top. This will add slide up and fade in animation to the element. If you do not want animations on your website, skip this step.
  3. Enter to Divider settings and go to Design tab. Edit Divider Line Color, Divider Weight, Width and Module Alignment. Find default settings we used in this tutorial. Line Color: #e45128, Divider Weight: 4px, Width: 50px, Module Alignment: center
  4. In the last step here just go to Advanced tab and add Custom CSS Class et-waypoint et_pb_animation_bottom to it.

Editing Second Row Modules, Adding Content & Animation

Next we will continue with module settings editing in the second row.

  1. Start by editing Image Module from the left column by clicking on gray gear icon.
  2. Click on the image placeholder and add your step 1 timeline image.
  3. Go to Advanced settings and add et-waypoint et_pb_animation_left to the CSS Class field.
  4.  Now it’s time to edit first Text module from the right column. The body area we use to display number in our timeline design, so just add <p>1</p>. 
  5. Go to Advanced and add CSS Class step-number and save.
  6. Edit second Text module from the right column and in the body area you can use any text designs. In this demo I’m using H4 for heading while description is wrapped up with paragraph.
  7. Add Custom CSS class step-content et-waypoint et_pb_animation_right to the Advanced tab. Now you can save and exit.

Duplicating and Final Touches

Alright as you can see or project is slowly getting shape and it’s time to duplicate step-1 row. 

Then we need to update our row settings as well as content displaying in modules.

It’s now time for the Final Row Settings Edit.

Open each Row settings and then go to Advanced tab to edit CSS field. In the CSS field you will notice CSS classes: step step-1 so if it’s step 2 just change CSS class to step step-2 and so on. Once you are at the last step instead of step number add last-step into your CSS class so it looks like example on the picture below: step step-last.

Updating Content in Modules

For each step, update:

  • Step image in the left column.
  • Number in the first text module on the right.
  • Title and content in the second text module.

Adding CSS to Your Divi Child Theme

Add the following CSS to Divi > Theme Options > Custom CSS section or your child theme’s style.css file:

RECOMMENDED: Download and host the step-arrow.png and step-background.png files to ensure the timeline modification works. Watch the YouTube tutorial for detailed instructions on updating CSS with your new files.

https://wpsociety.com/demo-content/divi/2019/step-arrow.png
https://wpsociety.com/demo-content/divi/2019/step-background.png

If you have any doubts or you not sure how to make it right check my YouTube channel.

/*------------------------------------------------------------------------*/
/*------------------- DIVI 2 COLUMN IMAGE & TEXT MODULE-------------------*/
/*------------------------------------------------------------------------*/
/* Divi Vertical Timeline With Annimation Effects */
.vertical-timeline .section-title .et_pb_text_inner {
	text-align:center;
}
.vertical-timeline .section-title .et_pb_text_inner h2 {
    font: 400 40px/1.1em Proxima Nova,sans-serif;
    margin: 0px;
    color: #000;
}
.vertical-timeline .section-title .et_pb_text_inner h3 {
    font: 100 35px/1.3em Proxima Nova,sans-serif;
}
.vertical-timeline .et_pb_image img {
    width: 85%;
    display: inline;
}
.vertical-timeline .step {
    list-style-type: none;
    position: relative;
    overflow: hidden !important;
    padding: 0px 0px 45px 0px;
}
.vertical-timeline .step::after {
    content: "";
    position: absolute !important;
    bottom: 5px;
    left: 45%;
    margin-left: 40px;
    z-index: 1;
    width: 19px;
    height: 1000px;
    background: url(http://wpsociety.com/demo-content/divi/2019/step-arrow.png) no-repeat 0 bottom;
    visibility: visible;
}
.vertical-timeline .step-last::after{
	display:none;
}
.vertical-timeline .step h4.title{
    font-size: 24px;
}
.vertical-timeline .step p{
    font-size: 17px;
}
.vertical-timeline .left-side {
    width: 45%;
    float: left;
    padding: 0 50px;
    padding-top: 15px;
    text-align: center;
    margin: unset !important;
    position: unset!important;
}
.vertical-timeline .right-side {
    width: 55%;
    float: left;
    padding-top: 15px;
    padding-left: 125px;
    position: unset!important;
}
.vertical-timeline .right-side .step-number{
    width: 97px;
    height: 97px;
    display: inline-block;
    background: url(wpsociety.com/demo-content/divi/2019/step-background.png) no-repeat 0 0;
    z-index: 9;
	position: absolute !important;
    left: 45%;
	top:0;
}
.vertical-timeline .right-side .step-number .et_pb_text_inner p{
	font-weight: 500;
    font-size: 40px;
    line-height: 96px;
    text-align: center;
    color: #e45128;
}
.vertical-timeline .right-side .step-content{

}
/* Divi Vertical Timeline With Annimation Effects Responsive Styles */
@media (max-width: 1200px){
	.vertical-timeline .left-side{
		padding:15px 25px 0;
	}
}
@media (max-width: 992px){
	.vertical-timeline .left-side{
		padding:15px 15px 0;
	}
}
@media (max-width: 767px){
	.vertical-timeline .left-side {
    	width: 100%;
    	padding-left: 125px;
    	padding-bottom: 30px;
	}
	.vertical-timeline .right-side {
    	width: 100%;
	}
	.vertical-timeline .right-side .step-number{
		left:0;
	}
	.vertical-timeline .step::after {
		left:0;
	}
	.vertical-timeline .et_pb_image img{
		width:100%;
	}
}
@media (max-width: 374px){
	.vertical-timeline .step::after {
		margin-left:30px;
	}
.vertical-timeline .right-side .step-number {
		background-size:cover; 
		width:80px; height:80px; 
		line-height:78px;
	}
	.vertical-timeline .left-side,
	.vertical-timeline .right-side{
	    padding-left: 100px;
    	padding-bottom: 20px
	}
}

Advanced Tips for Enhancing Your Timeline

Enhancing your Divi timeline with animations can make it more engaging and visually appealing. Divi offers a range of animation options that you can easily apply to your timeline modules.

To learn how to add and customize animations specifically in the Divi theme, check out our detailed guide on divi animations. This guide will walk you through step by steps and teach you to animate your timeline elements, ensuring they capture your audience’s attention effectively.

Conclusion

Whether you’re showcasing company history, project milestones, or any other sequential information, this Divi timeline tutorial provides you with all the steps and tips you need to create a stunning timeline. Start experimenting with Divi’s powerful tools, play with custom CSS modifications, and watch your website come to life!

We hope this Divi timeline tutorial has been helpful. By following these steps, you can create an eye-catching and informative timeline on your WordPress site. If you have any questions or need further assistance, feel free to leave a comment below.