Pricing
Written by Editorial Team on May 19, 2020

How To Easily Style And Add CSS To A Divi Blurb Module?

Blurbs are a great way to showcase small bits of important information in WordPress, and are often used in rows to display skills or features. If you are using Divi, it comes with blurb modules that you can easily place them in any column that you create in your blog layout.

We decided to create this free tutorial on How to Style Divi Theme Blurb Module to help you work more quickly and save you time and money. When used correctly, Divi blurb module can really speed up the entire 'blog post building' and save you valuable time.

Introduction To Styling A Divi Blurb Module

In this WordPress 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:

  • How to create a section structure and adding Blurb modules into sections
  • How to customize section, row and blurb module settings
  • How to add and customize CTA and Divider modules in Divi theme

Part 1: How to create a section structure and adding Blurb modules into sections?

The process starts with creating a new Speciality Section in Divi visual builder.

Specialty Section in Divi Builder
~Specialty Section in Divi Builder

Next, choose the structure as shown below.

What Is Structure In Divi Builder How To Style A Divi Blurb Module
~Divi Structures

In order to create a blurb in Divi, we recommend you to use the structure option as above. This module allows you to create:

  • Left structure (add two modules here — one CTA module and one Divider
  • Right structure (Insert Column(s) and make it 1/2 + 1/2. Add two Blurb modules, side by side.

Under each blurb module, add 4 CTA modules. Now, your section should look like this. Don't worry if they look odd now as you had yet to complete the entire process.

Blurb Section Creation In Divi Builder How To Style A Divi Blurb Module
~New blurb section

Part 2: How to set up sections in Divi (and customize the settings)?

Click on the section setting icons as below. This allows you to edit a few section settings.

Section Setting How To Style A Divi Blurb Module
~Section Setting in Divi visual builder

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 below
overflow: hidden !important;

Once that is done, click Save & Exit. Next, head over to the Row Settings.

Row Settings In Divi Builder How To Style A Divi Blurb Module
~Row settings in Divi Theme

Content tab

  • Make the background white in colour

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 code:
width: 108%;

Click Save & Exit to complete this step.

Part 3: How to add CSS to Blurb modules in Divi theme?

Head over to your Divi page builder and click on the page setting option. This is how it looks like.

Page Settings In Divi Builder How To Style A Divi Blurb Module
~Divi Builder page setting option

In the Custom CSS box, paste this CSS code to start styling your blurb module:

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

Part 4: How to customize the module settings in Divi Builder?

Let's start modifying the CTA module.

Module Settings In Divi Builder How To Style A Divi Blurb Module
~Customizing the settings in CTA module

Content

  • Add the desired 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;

Once you had done the above, click Save & Exit. Next up is the Divider setting.

Divider Setting In Divi Builder How To Style A Divi Blurb Module
~Divider setting in Divi visual builder

Content

  • – Show Divider – Set to Yes

Design

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

Advanced

  • Add this CSS class:
blue_lines
  • In the Main Element box, paste this CSS code:
max-width: 130px;

text-align: left;

display: block;

margin-left: 0!important;

It is also important to disable the module on Phone and Tablet viewport. Once done, click Save & Exit.

Now, it is time to work on the Blurb.

Blurb Settings In Divi Builder How To Style A Divi Blurb Module
~Blurb settings in Divi theme

Content

  • Fill the title and add content into the Blurb
  • Add icon images

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 code:
text-align: left;
  • In the Blurb Title box, add this CSS code:
padding-bottom: 11px;

Now, click Save & Exit. Let's head over the call-to-action module.

The goal here is to have each CTA represents a border line that surrounds the blurb.

Let’s get started with settings up the CTA modules from the left column.

Call To Action Modules In Divi Builder How To Style A Divi Blurb Module
~Setting up the Call To Action modules

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.

It should looks something like this.

Customize CTA Module How To Style A Divi Blurb Module
~Customize CTA Module

Advanced tab

Assign a CSS class: top_line line

Next, head over to the Main Element box and add this CSS code:

height: 4px;

position: absolute;

Click Save & Exit once you are done.

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 the 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 the promo description, add this CSS code:

padding: 0;

As each CTA representing a line, you should see something like this.

Lines And Blurbs How To Style A Divi Blurb Module
Lines And Blurbs How To Style A Divi Blurb Module

The final last step is duplicate the row settings and head over to the Design tab.

Duplicate Sections In Divi Builder How To Style A Divi Blurb Module
~Duplicate sections in Divi

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 the duplicated rows.

Summary: How To Style A Blurb In Divi?

We hope that you find this Divi tutorial useful. Have a thought? Leave a comment below and tell us all about it!

Article written by Editorial Team

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

crossmenu