How to Create a Timeline with Divi’s Image & Text Modules

In this tutorial I will show you how to build a numbered timeline with a Divi – so it looks like steps to follow kinda 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.

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

Add section, columns and modules in our Divi theme

We are going to start by setting up a grid with rows, columns and modules first. Then we will be adding css id’s and classes to sections, columns and modules. Now open your design grid / wireframe view.

Add Standard Section and select Single Column layout for our heading area.
Add one Text module and add then add Divider module.
Add New Row and select 2 column layout.
Add one Image Module to the first column on the left.
Add Two Text Modules to the second column on the right side.

At this point your wireframe/grid Divi view should look like the one on picture below.

Apply our custom CSS ID’s and Classes using Wireframe View.

Next we are going to apply our custom CSS ID’s and classes to our grid frame.

To add custom CSS to frames we will go to Section, Row and Module Settings Advanced tabs and then add our CSS Classes to them.

Let’s start by editing highest positioned in Divi grid hierarchy. This means we will first edit section settings, then row and column settings to finally edit module settings at the very end.

SECTION ADVANCED SETTINGS

Open Section Settings by clicking to gear icon in a blue frame.
Go to Advanced tab and open CSS ID & Classes.
Add CSS Class vertical-timeline.
Save changes by clicking on checked green icon in bottom right corner of the Section Settings.

ROW ADVANCED SETTINGS

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

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

SECOND ROW EDITING

Start editing by clicking to the gear icon in the green Row frame.
Open Advanced tab and click on CSS ID & Classes.
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.
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.
Click on gray gear icon to enter the Column Settings for the first column.
Go to Advanced -> CSS ID & Classes and in a CSS Class field copy paste class: left-side.
Go back by clicking on the arrow icon in the purple header area of Column Settings.
Click on gray gear icon to enter second Column Settings.
Go to Advanced -> CSS ID & Classes and in a CSS Class field insert: right-side
We are done with Row & Column Settings to Save just confirm by clicking the green checked icon.
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.

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.
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.
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
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.

Start by editing Image Module from the left column by clicking on gray gear icon.
Click on the image placeholder and add your step 1 timeline image.
Go to Advanced settings and add et-waypoint et_pb_animation_left to the CSS Class field.
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>.
Go to Advanced and add CSS Class step-number and save.
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.
Add Custom CSS class step-content et-waypoint et_pb_animation_right to the Advanced tab. Now you can save and exit.

Duplication & final touch to the timeline rows

Alright as you can see or project is lowly 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.

Update Content to your modules

This step is pretty much self explanatory, because you want to update content within the modules. Just check the list below to be sure you do not skip any.

For each step you need to edit, step image from the left row, first text module on the right, where you just update number and second text module where you have to update title and content area.

Adding CSS into your Child Theme or Theme Customizer

In this last step we need to add some CSS to Divi > Theme Options > Custom CSS section or copy and paste it to our child theme’s style.css file.

To get this numbered timeline fully working we need to add the following CSS code into our theme:

RECOMMENDED: Download both step-arrow.png and step-background.png files and host them by yourself to ensure that this timeline modification works forever. Find links to required files below. If you do not know how to update CSS with your new files, please watch YouTube video from the beginning of the tutorial because it will be explained in details.

https://wordpresssociety.com/demo/wp-content/uploads/2019/08/step-arrow.png

https://wordpresssociety.com/demo/wp-content/uploads/2019/08/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(https://wordpresssociety.com/demos/divi/wp-content/uploads/2019/08/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(https://wordpresssociety.com/demos/divi/wp-content/uploads/2019/08/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
	}
}

Live Preview

How to Create a Divi Hero Section with Opt-In and Video Background

by admin | Last updated May 25, 2022 | Divi

Make a Full Width Divi Hero Section with Opt-In and Video Background Proven Hero Section with Email Option Form built in Divi Roughly few weeks back I was developing something for one of my friends and he wanted to have a hero section similar to famous Create and Go...