Methods to Create a Timeline with Divi’s Blurb Module

In this post, we’ ll be demonstrating how you can easily create a simple yet sophisticated timeline with Divi’ s your Blurb Modules. We’ ll be combining the different options that modules and rows provide to own result you can view below. The particular example we’ ll be sharing will be based on the built-in Divi options only, which means you won’ to need to add any additional CSS code! We’ re also making sure that it looks good on desktop as well as on mobile.

Outcome

The appearance of a timeline is achieved along with two design elements; the queue that passes across all three Blurb Modules and the particular numbers. The desktop version seems like this particular:

timeline

And the mobile version looks like this:

timeline

Let’ s get started!

How to Create a Timeline with Divi’ s Blurb Module

Subscribe To Our Youtube Channel

Add Standard Section

Section Background Color

Start by adding a new standard section and using ‘ rgba(0, 0, 0, 0. 12)’ as its history color.

timeline

Section Padding

Go in order to the Design tab and use a top padding of ‘ 300px’.

timeline

Add Three-Column Row (Timeline)

Column Backgrounds

Once you’ ve produced the section, add a three-column line to it. Within the Content tab of this row, use ‘ #e09900’ as the Column 1 background color, ‘ #0c71c3’ because the Column 2 background color and ‘ #8300e9’ as the Line 3 background color.

timeline

Dimension

Shift on to the Design tab plus use the following settings for the particular Sizing subcategory:

  • Make This Row FulldWidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

timeline

Custom Margin & Padding

Next, include the following Custom Padding and Custom Margin to the row:

  • Top Padding: 1px
  • Bottom Padding: 0px
  • Bottom Margin: -200px

And add ‘ 3px’ towards the top and bottom padding of each column.

timeline

Disable on Tablet & Phone

Lastly, disable the row on both pill and phone.

timeline

Add Another Three-Column Row (Blurb Modules)

Column Gradient History

Once you created the first three-column row, you can move ahead and create the second 1 right below it (they share the same section). Each one of the columns needs a gradient background with the particular same settings but with a different first color:

  • Initial Color:  #e09900 (Column 1),  #0c71c3 (Column 2),  #8300e9 (Column 3)
  • Second Color: rgba(255, 255, 255, 0)
  • Gradient Type: Linear
  • Gradient Direction: 180deg
  • Start Position: 73%
  • End Position: 92%

timeline

Make Row Fullwidth

Then, go to the Style tab and enable the ‘ Create This Row Fullwidth’ option.

timeline

Row Custom Padding

Open the spacing subcategory and use the following Custom Cushioning & Custom Margin for the row:

  • Top Padding: 0px
  • Right Padding: 60px
  • Bottom Padding: 100px
  • Left Padding: 60px
  • Top Margin: -100px

Include ‘ 5px’ to the top padding of every column as well.

timeline

Blurb Module

Once you’ ve completed the row settings, you can add the Blurb Module to the first line of the row you’ ve just created. Within the Image & Symbol subcategory of the content tab, enable the ‘ Use Icon’ option and select an icon of choice.

timeline

Scroll down the same tab and use ‘ #f4f4f4’ as the background color.

timeline

Go to the Design tab and make the particular following adjustments to the Image & Image subcategory:

  • Icon Color:  #e09900
  • Image/Icon Placement: Remaining
  • Use Icon Font Dimension: Yes
  • Icon Font Dimension: 50px

timeline

Within the Text subcategory, make sure the left Text Orientation is certainly enabled.

timeline

The options for the Header Textual content subcategory would be the following:

  • Header Font: Crete Round
  • Header Text Alignment: Left
  • Header Font Size: 32px
  • Header Line Height: 1em

timeline

Then, open up the Body Text subcategory and make use of the following settings:

  • Body Text Alignment: Remaining
  • Body Font Size: 12px
  • Body Line Height: 1 . 7em

timeline

We’ ll be using a border with the following settings as well:

  • Use Border: Yes
  • Border Color: #000000
  • Border Width: 2px
  • Boundary Style: Dotted

timeline

Next, open the Dimension subcategory and use ‘ 279px’ with regard to the Content Width and ‘ 100%’ for the Width.

timeline

Lastly, add ’ 30px’ to the top, right, bottom plus left padding.

timeline

Text Module

As soon as you’ ve added and modified the Blurb Module, go ahead and put in a Text Module right below it. The Text Module will need a gradient history too:

  • First Color:  #e09900
  • Second Color:  rgba(255, 255, 255, 0)
  • Gradient Type: Radial
  • Radial Direction: Middle
  • Start Position: twenty percent
  • End Position: 24%

timeline

Proceed on towards the Design tab and make use of the following settings for the Text subcategory:

  • Text Font Size: 21px
  • Text Color: #FFFFFF
  • Text Line Height: 1. 7em
  • Text Alignment: Center

timeline

Open the Sizing subcategory, use a width of ‘ 48%’ and select the right Module Alignment.

timeline

Lastly, make use of a top margin of ‘ -100px’ and add ’ 50px’ to the particular top and bottom padding.

timeline

Clone Blurb & Text Module

Once you’ ve completed the first column, you may clone both modules make them within the other two columns. The only items you’ ll have to change will be the blurb icon, blurb color and the particular first gradient color of the Text Module into ‘ #0c71c3’ for the second column and ‘ #8300e9’ with regard to the last column.

Turn off on Tablet & Phone

Once you’ ve completed this 2nd row, make sure you disable this for phone and tablet as nicely.

timeline

Replicated Three-Column Row (Tablet & Phone)

The timeline version on pill and phone is slightly different. Replicated the row with blurbs you’ ve created in the previous a part of this post and follow the next actions to make it fit on phone and tablet.

Add Line Gradient Background

The row on tablet and phone will require the following gradient background:

  • First Color:  rgba(0, 0, zero, 0. 7)
  • Second Color:  rgba(255, 255, 255, 0)
  • Gradient Type: Linear
  • Gradient Direction: 90deg
  • Start Placement: 1%
  • End Position: 0%

timeline

Row Padding

Delete most the custom padding and margin which was used in the desktop version plus add ‘ 100px’ to the best padding.

timeline

Disable on Desktop

Lastly, instead of disabling the row on phone and tablet, disable it upon desktop instead.

timeline

Result

After getting followed all the measures in the post, you should be able to attain the next result on desktop:

timeline

And the subsequent result on tablet and phone:

timeline

Final Ideas

On this page, we’ ve demonstrated you how you can create a basic timeline of your Blurb Module by using nothing else than the built-in Divi options. Two factors that help determine the Blurb Modules as a schedule are the line that connects just about all three Blurb Modules and the numbers. When you have any questions or suggestions; make sure you leave a comment in the comment section below!

Be sure to subscribe to our own email newsletter and YouTube channel so that you simply never skip a big announcement, useful tip, or Divi freebie!

The particular post How to Create a Schedule with Divi’ s Blurb Module appeared first on Elegant Themes Blog.