Creating a Timeline with the Blurb Module

I will admit that I am easily excitable when it comes to the design features of a website. This feature was one of those design tricks that was exciting to build. Here, I will explain how to turn Divi’s ‘Blog’ module into a timeline. 

Before we begin, I’d suggest the visual builder is a must for this type of design. I don’t think it would be as easy to navigate the many aspects without the visual builder active. Also, opening “expanded mode” within the visual builder is a big help, especially since some of these tools will be utilized later on in the creation process of the timeline. 

“Expanded Mode”

 

With that said, let’s begin.

First, you can begin by creating a standard section. For this example, I used a very light grey with transparency: rgba(160,160,160,0.23). 

The light colors and transparency we implement in the beginning will allow the colors of our blurb timeline to pop with color. Now, whether you use a similar light colored background as you follow along is up to you. 

Within your first section, head to ‘spacing’ and set your top custom padding to 300px. Next, add a three column layout. This is where the blurb backgrounds will begin taking shape. Set each of the column background colors. If you are following along with my example colors, below you will find the hex code listed left to right.

Now, within your row design settings, enter the ‘sizing’ area. Make your columns full-width, and set the gutter-width to 1px. This will allow no space to show between any of the three columns. While you are still in the ‘sizing’ area, turn on “Equalize Column Height.”

After that is complete, navigate to the ‘spacing’ area. Set your top custom margin to 1px. Your bottom custom padding to -200px. (Make sure to include the negative symbol. I made the mistake and had to backtrack a few steps. You will get completely different results without the negative).

When adjusting the column padding set each of the columns to the same amount of padding:

Set the top and bottom to 3px for each column. Enter the “Advanced” tab and turn visibility to disable on the tablet and phone views.

Once padding and custom margins have been set, go ahead and add another three-column layout in a new row. Adjust the background portion of this new layout to a gradient. The first color should match the respective columns above. The second gradient color should be set to transparent. (See below for an example). 

 

When adjusting the gradient background set the following presets:

Start Position: 73 | End Position: 92 | Direction: 180 | Sizing: Full-width

These values will allow the bottom portion of the timeline to display a subtle glow, as shown above. Now that the gradient background for the second three-column layout has been set, enter “Spacing.” In section padding  set the following:

Top:  0px | Right: 60px | Bottom: 100 px | Left: 60px  (Custom Margin must equal -100px on the top while Column Padding must be equal to 5px on the top for all directions. 

Next, create a blurb. This blurb will be used as the place for your first piece of text. In other words, if you are creating a timeline based on specific events, this blurb is your first step to creating that event.  Enter your title and body content specific to your task. Make sure you turn the icon on and match the icon color with the appropriate column, set to left. When you set the blurb background color, I would choose a lighter color. For my example I used (#f7f7f7):

 

When it comes down to the content of each of the blurb modules, use the following presets for text customization:

Align Text: left | Header Text  must be set to “create round.” Size: 34 | Body Text Size: 12 | Body Line Height: 1.7em

Now you must adjust the border of your module. Set your border to black and “dotted.” The width must be set to 2. Once this step is complete, enter ‘sizing.’ Set your Content Width to 279 with 100%.  Under ‘spacing’, blurb padding must be set to -30px in all directions.

Following this, add a text module just below the blurb. Set the text background to “gradient.” Box one must match the respective column color while box two must be set to transparent.  

Type: Radial | Start: 20 | End: 20. 

Your text should be set to 01 with the following presets in place. Size: 21 | Color: #ffffff | Line Height: 1.7em

Text Orientation: Center. 

Under ‘sizing,’ enter a value of 48 for your width and align your text to the right. 

 

Wasn’t that pretty simple? Now you have a beautiful, fully functioning timeline. The best part for you is that, you’ll know how to complete this type of timeline in the future, and it doesn’t require coding. The styling effects of the blurbs help accentuate your content. 

Below you can see my finished product. Happy timeline building!