Divi Vertical Timeline With Animation Effects And Responsive Styles Video Tutorial

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.

1. Add Standard Section and select Single Column layout for our heading area.
2. Add one Text module and add then add Divider module.
3. Add New Row and select 2 column layout.
4. Add one Image Module to the first column on the left.
5. 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.

If you’re new to CSS or want to learn more about DIVI CSS specifically, you should check my upcoming “Digest Divi CSS In A Day” course which is available for pre-order with a 50% OFF right now!

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

1. Open Section Settings by clicking to gear icon in a blue frame.
2. Go to Advanced tab and open CSS ID & Classes.
3. Add CSS Class vertical-timeline.
4. 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

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.

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.

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.

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.

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.

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.