How to Style a Divi Blurb Module – Free Tutorial & Blurbs

Made in the Style of the Falkor Bundle!

A free Divi Blurb Module with a tutorial on how to style the four up blurbs module. Designed in the style of the new Falkor Bundle, the spring 2018 UI Kit bundle, this blurb module is great for Divi Theme and Divi Builder users. The free tutorial on How to Style Divi Theme Blurb Module has been made to help you work more quickly and save you time and money. In an easy to follow tutorial that you can come back to any time you get stuck you will find useful ‘how to’ instructions.

Introduction

In this tutorial, you will learn how to create a good looking Divi Theme Blurb module. The tutorial will be separated into several sections. The main sections you are going to learn about are:

• Creating section structure and adding Blurb modules
• Customising Section, Row and Blurb module settings
• Adding and customising CTA and Divider modules

Creating section structure

– Create a new Specialty Section

– Choose the structure as shown on the screenshot:

– Left, add two modules: One CTA module and one Divider
– Right, click Insert Column(s) and make it 1/2 + 1/2. Add two Blurbs, side by side.

Under each blurb, add 4 CTA modules.

Your section should now look like this:

Section Settings

Let’s first edit a few section settings. Click section settings icon:

Content tab

– Make Column1 background: #f7f7f7
– Make Column2 background: #1f2532

Design tab

– Make This Section Fullwidth – Set to Yes
– Equalize Column Heights – Set to Yes
– Use Custom Gutter Width – Set to Yes and make the Gutter Width 1
– In Spacing section, make Column1 Pading like this:
Top: 14vw, Right: 14.8vw, Bottom: 14vw, Left: 9.6vw
Also, in Custom Padding, add 0px to Top and Bottom fields.

Advanced tab

– Add CSS Class: blurb_3_f falkor lines
– In Main Element box, paste this CSS:

overflow: hidden !important;

Click Save & Exit

Row Settings

Let’s also edit some row settings. Click row settings icon:

Content tab

– Make the background white

Design tab

– Use Custom Gutter width – Set to Yes and make the Gutter Width 2
– Equalize Column Heights – Set to Yes
– In Spacing section, add Custom Margin so it’s like this:
Top: 6vw, Right: 0px, Bottom: 0px, Left: -105vw
– Add Custom Padding values like this:
Top: 4.2%, Right: 4.2%, Bottom: 0px, Left: 4.3%

Advanced tab

– In Main Element box, add this CSS:

width: 108%;

Click Save & Exit

Add CSS

In your Divi page builder, click page settings:

In Custom CSS box paste this CSS code:

.blurb_6_f .et_pb_column_1_3 .et_pb_image .et_pb_image_wrap,
.blurb_6_f .et_pb_column_1_3 .et_pb_image .et_pb_image_wrap img{
    display: block;
    width: 100%;
}


/*Columns*/

.blurb_3_f .et_pb_row_inner .et_pb_column_1_3:last-child {
    margin-right: 0 !important;
}

.blurb_3_f .et_pb_row_inner .et_pb_column_1_3 {
    width: 49% !important;
    margin-right: 2% !important;
}

.blurb_3_f .et_pb_column_1_3 {
    width: 46.5%;
}

.blurb_3_f .et_pb_column_2_3 {
    width: 66%;
}

.blurb_3_f .et_pb_column .et_pb_main_blurb_image {
    margin-bottom: 24px;

    display: block;
}

.blurb_3_f .et_pb_column .et_pb_main_blurb_image img {
    display: block;
    max-width: 110px;
}

/*Lines*/

.blurb_3_f .top_line,
.blurb_3_f .bottom_line {
    width: 0%;
}

.blurb_3_f .left_line,
.blurb_3_f .right_line {
    height: 0%;
}

.blurb_3_f .top_line {
    top: 0;
}

.blurb_3_f .bottom_line {
    bottom: 0;
    left: 0;
}

.blurb_3_f .left_line {
    left: 0;
    bottom: 0;
}

.blurb_3_f .right_line {
    right: 0;
    bottom: 0;
}


/*Hover*/


.blurb_3_f .et_pb_row_inner .et_pb_column_1_3{
    cursor: pointer;
}
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3 .top_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3 .bottom_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3 .left_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3 .right_line {
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
}

.blurb_3_f .et_pb_row_inner .et_pb_column_1_3 .top_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3 .right_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3:hover .bottom_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3:hover .left_line{
    transition-delay: 0s;
    -moz-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -ms-transition-delay: 0s;
}

.blurb_3_f .et_pb_row_inner .et_pb_column_1_3 .left_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3 .bottom_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3:hover .right_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3:hover .top_line{
    transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
}

.blurb_3_f .et_pb_row_inner .et_pb_column_1_3:hover .top_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3:hover .bottom_line {
    width: 100%;
}

.blurb_3_f .et_pb_row_inner .et_pb_column_1_3:hover .left_line,
.blurb_3_f .et_pb_row_inner .et_pb_column_1_3:hover .right_line {
    height: 100%;
}

.blurb_3_f.view_port .et_pb_divider {
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;

    transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;

    max-width: 130px;
}

.blurb_3_f .et_pb_blurb:hover .et_pb_blurb_container {
    -webkit-animation: fadeIn 1s infinite;
    animation: fadeIn 1s infinite;
    animation-iteration-count: 1;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

Modules Settings

CTA

Content

– Add Title and Content text

Design

– Text Orientation: Set to Left aligned
– Title text should be: H2, Montserrat, Bold, 48px, #1f2532
– Body text: Lato, Regular, 16px, #757575, body line-height: 1.9em
– In Spacing section, add 0px to Bottom Custom Margin. Also, for Custom Padding left, add 0px

Advanced

– In the Promo Title box, add this CSS:

line-height: 120%!important;

padding-bottom: 30px;

padding-right: 2vw;

Click Save & Exit

Divider

Content

– Show Divider – Set to Yes

Design

– Color: Make it: #0080ff or optionally use your own colour
– Divider positioned – Set to Vertically Centered
– In Sizing section, set Divider Weight to 4px and Height to 4

Advanced

– Addd CSS Class: blue_lines
– In Main Element box, paste this CSS:

max-width: 130px;

text-align: left;

display: block;

margin-left: 0!important;

– Also, disable the module on Phone and Tablet

Click Save & Exit

Blurbs

Content

– Give your Blurbs a Title and add a Content
– Also, add icon images.

In this example, we will be using these images: Image1, Image2, Image3 and Image4. However, you can optionally add your own images if you prefer.

Design

– Title text should be: Montserrat, Ultra Bold, 18px, black
– Body Text: Lato, Regular, 16px, #757575
– Add Custom Padding: Top: 20px, Left: 20px, Right: 20px, Bottom: 20px

Advanced

– In Blurb Image box, add this CSS:

text-align: left;

– In Blurb Title box, add:

padding-bottom: 11px;

Click Save & Exit.

CTA’s

Finally, let’s edit CTA modules under the blurbs. We want to achieve that each CTA represents a border line that surrounds the blurb.
Let’s first set the settings for CTA modules from the left column:

You can than duplicate the same for the right column, once done.

For the first CTA:

Content

– Use this background colour: #0f87ff. In Admin label, you can add “Top Line”.

Design

– For all custom margins and custom padding add a value of zero.

Advanced

Assign a CSS class: top_line line
In Main Element box, add this CSS:

height: 4px;

position: absolute;

Save & Exit

For the second CTA, use the same settings. You can duplicate first one if you like. Only, change the class name to: left_line line.
Also, in Advanced tab, in Main Element box, change “height” to “width”.
Optionally, change the label name to “Left Line”.

Same is for the third CTA, just change the class name to: right_line line and “height” to “width’ in Main Element (Advanced Tab).

For the last one, change the class name to: bottom_line line

– In Promo Description:

padding: 0;

Each CTA representing a line, it should now look like this:

Duplicate row

Now, duplicate everything:

Click the duplicated row settings and go to Design tab. In Spacing section, change Custom Margin TOP to 0px, and Custom Padding TOP to 40px. Also, add Custom Padding Bottom to 40px.

Also, make sure to change the content and images for blurbs in duplicated row.