Blurb modules are some of the most versatile elements you can find in Divi. In this post, we will show you how to go a step further and get creative with the blurb icon background. We will be using a combination of blurb modules, text modules and call to action modules. These unique designs are perfect for services pages and product category pages. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome of all three examples across different screen sizes.

Example #1

Desktop

Blurb background 1

Mobile

Example #2

Desktop

Mobile

Example #3

Desktop

Mobile

Download The Blurb Icon Background Examples for FREE

To lay your hands on the free blurb icon background examples, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

General Steps

Add New Section

Background

To recreate these creative blurb background designs, open a new page or add a new section to an existing page. Before adding a row, add a background color to your section.

  • Background Color: #f7f7f7

background settings

Spacing

Add some custom top and bottom padding to the section too.

  • Top and Bottom Padding: 120px

padding settings

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

two column row

Sizing

Before adding any modules, adjust the sizing of the row.

  • Width: 100%
  • Max Width: 100%

blurb back sizing

Spacing

Then, adjust the padding in the spacing settings.

  • Top Padding: 8vw
  • Bottom Padding: 15vw
  • Left and Right Padding: 12vw

padding settings

Column 1

Once you’re done modifying the row settings, make some changes to the first column.

Background

First, add a white background.

  • Background Color: White #ffffff

column one background

Border

Then, add some border radius.

  • Rounded Corners: 2vw all four corners

column rounded corners

Box Shadow

Finally, add a box-shadow.

  • Box-Shadow: First Option
  • Box-Shadow Blur Strength: 47px

box shadow column one

Clone Row Twice

There is one last step left before we start adding modules. Clone the row twice.

duplicate row

Recreate Example #1

Blurb background 1

Add Blurb Module to Column 1

Erase Default Content

Now that we’ve set up our rows and columns, we can start adding modules to column 1 of the first row. First, add a blurb module and erase all the default title and body text.

erase default content

Choose Icon

Then, choose an icon instead of an image.

  • Icon: Link

choose an icon

Background

Add a black background color to the blurb module.

  • Background Color: Black #000000

blackbackground

Icon Settings

Then, change the icon settings.

  • Icon Color: Yellow #edf000
  • Icon Placement: Top
  • Icon Font Size:
    • Desktop: 3vw
    • Tablet: 11vw
    • Phone: 13vw

icon color settings

Sizing

Continue by adjusting the sizing of the module.

  • Content Width: 100%
  • Width:
    • Desktop: 11vw
    • Tablet: 19vw
    • Phone: 22vw

icon sizing

Spacing

Add some spacing values as well.

  • Top Margin: -5vw
  • Bottom Margin: 0vw
  • Left Margin: -1vw
  • Top Padding and Bottom Padding: 4vw

spacing for the icon

Border

To give the icon a unique shape, add some border radius to each one of the corners except for the bottom left one.

  • Rounded Corners: 50vw, 0vw on the bottom left corner.

icon rounded corners

Box Shadow

Finally, add a box shadow.

  • Box-Shadow: First Option
  • Box-Shadow Blur Strength: 50px

icon box shadow

Custom CSS

The icon has, by default, some bottom margin attached to it. To get rid of that, we’ll add one single line of CSS code to the blurb image custom CSS box.

  • Blurb Image: margin-bottom: 0px;
margin-bottom: 0px;

icon css

Add Text Module to Column 1

Add H3 Content

Below the icon, add a text module with some H3 content of your choice.

add h3 content

Background

Go to the background settings and add a gradient background.

  • Background: Gradient
  • Color One: Transparent
  • Color Two: Yellow #edf000
  • Gradient Direction: 180 deg
  • Start and End Position: 74%

style the H3

Title Text

Then, style the H3 text.

  • Title Text Heading Level: H3
  • H3 Font: Josefin Sans
  • H3 Alignment: Center
  • H3 Font Color: Black #oooooo
  • H3 Text Size:
    • Desktop: 2.4vw
    • Tablet: 3.4vw
    • Phone: 4.8vw
  • H3 Letter Spacing: 0em

style the h3 background

Sizing

In the sizing settings, adjust the width for tablet and phone.

  • Width:
    • Tablet: 50%
    • Phone: 60%

width for mobile

Spacing

Continue by going to the spacing settings and adjusting the margin values.

  • Left and Right Margin: 5vw
  • Top Padding: 1vw

margin and padding

Transform

Finally, rotate the module with the transform options.

  • Transform Translate:
    • x-axis: -20vw
    • y-axis: 13vw
  • Transform Rotate: First Option, 280 deg

transform to vertical

Add Call To Action Module to Column 1

Remove Default Title Content, Add Button and Text Content

The next and last module we need in column 1 is a call to action module. Add some content of your choice and remove the title copy.

add a call to action module

Add Link

Add a relevant link to the button.

learn more link

Background

Make sure the background has no color.

no background color

Body Text

Then, go to the design tab and change the body text settings.

  • Body Font: Crimson Text
  • Body Text Alignment: Left
  • Body Text Color: Dark Grey #666666
  • Body Text Size:
    • Desktop: 1.2vw
    • Tablet: 2.6vw
    • Phone: 3.1vw
  • Body Line Height: 1.8em

body text cta 2

Button

Modify the button styles too.

  • Button Text Size:
    • Desktop: 1vw
    • Tablet: 2vw
    • Phone: 3vw
  • Button Text Color: Very Dark Grey #3f3f3f
  • Button Border Color: Very Dark Grey #3f3f3f
  • Button Font: Josefin Sans
  • Button Margin: 3vw
  • Button Top and Bottom Padding: 1vw
  • Button Left and Right Padding: 3vw

cta text style

button marg pad

Spacing

Complete the module’s settings by adding some left and right padding.

  • Left and Right Padding: 7vw

cta padding

Delete Column Two and Clone Column 1

Adjust Settings in Column 2

Now, go back to the row settings and delete the second column. Instantly after, clone the first column. In the next steps, we’ll adjust a few settings in the duplicate column.

erase and dup

Blurb Module

Start by changing the icon color of the blurb module.

  • Icon Color: Aqua #00ffd4

icon color aqua

Text Module

Change the gradient background and copy of the text module next.

  • Background Color: Aqua #00ffd4
  • Change Content

aqua gradient

Recreate Example #2

Add Blurb Module to Column 1

Delete Default Content

On to the second example! Add a blurb module to column 1 and delete all default content.

erase default content

Choose Icon

Then, choose an icon.

choose an icon

Background

Now, add a yellow background color.

  • Background Color: Yellow #edf000

blurb background yellow

Icon

Continue by modifying the icon settings in the design tab.

  • Icon Color: White #ffffff
  • Icon Placement: Top
  • Icon Font Size:
    • Desktop: 3vw
    • Tablet: 11vw
    • Phone: 12vw

icon size 2

Sizing

Once the color and background are styled, adjust the sizing of the module.

  • Content Width: 100%

sizing icon

Spacing

Modify the spacing settings too.

  • Bottom Margin: 0vw
  • Left and Right Margin: 3vw
  • Top and Bottom Padding: 2vw

margin and padding icon

Border

Add some border radius to each corner next.

  • Rounded Corners: 2vw all four corners

rounded corners icon

Box Shadow

Complete the module’s design by adding a subtle box shadow.

  • Box-Shadow: First Option

icon box shadow2

Remove Box Shadow and Background Color of Column 1

Open the column 1 settings next and remove the background color and box shadow.

remove box shadow

remove the background

Custom CSS

Remove the default bottom margin applied to the blurb icon by adding one single line of CSS code to the advanced tab.

  • Blurb Image: margin-bottom: 0px;
margin-bottom: 0px;

custom css

Add Call to Action Module to Column 1

Add Title Content, Body Content, and Button Content

Below the blurb module, add a call to action module and insert some content of your choice.

content for cta

Add Link

Add a link to the button next.

link adjust

Background

Continue by adding a white background.

  • Background Color: White #ffffff

background for cta

Title Text

In the design tab, style the H3 title text.

  • Title Heading Level: H3
  • H3 Font: Josefin Sans
  • H3 Font Color: Very Dark Grey #3f3f3f
  • H3 Size:
    • Desktop: 2vw
    • Tablet: 4vw
    • Phone: 6vw
  • H3 Line Height: 2.3em

Title style Josefin Sans

Body Text

Then, style the body text.

  • Body Font: Crimson Text
  • Body Text Alignment: Left
  • Body Text Color: Dark Grey #666666
  • Body Text Size:
    • Desktop: 1.1vw
    • Tablet: 2.2vw
    • Phone: 3.1vw
  • Body Line Height: 1.8em

cta body text

Button

Move on to the button settings and style the button as follows:

  • Button Text Size:
    • Desktop: 1vw
    • Tablet: 2vw
    • Phone: 3vw
  • Button Text Color: Very Dark Grey #3f3f3f
  • Button Font: Josefin Sans
  • Button Border Width: 2-x
  • Button Border Color: Very Dark Grey #3f3f3f
  • Button Top and BottomMargin: 3vw
  • Button Top and Bottom Padding: 1vw
  • Button Left and Right Padding: 3vw

button marg pad 2

Spacing

Now, adjust the spacing.

  • Bottom Margin: -1vw
  • Top Padding: 6vw
  • Left and Right Padding: 7vw

spacing 3

Border

Then, round off the corners in the border settings.

  • Rounded Corners: 2vw

rounded corners 4

Box Shadow

Finally, add a box shadow.

  • Box-Shadow: First Option
  • Box-Shadow Blur Strength: 50px

box shadow 2

Delete Column Two and Clone Column 1

Adjust Settings in Column 2

Similar to the previous example, go to the row settings and delete the second column. Duplicate the first column and adjust a few settings.

Blurb Module

Change the background of the blurb module from yellow to aqua.

  • Background Icon Color: Aqua #00ffd4

Call To Action Module

Change the call to action module’s content and link too.

  • Change Title Content
  • Change Link

Recreate Example #3

Add Blurb Module to Column 1

Delete Default Content

On to the next and last example! Add a blurb module to column 1 and erase the default content.

erase default content

Choose Icon

Choose an icon.

choose an icon

Background

Add a bright yellow background to the module.

  • Background Color: Yellow #f7f426

yellow background blurb

Icon

Make the icon black and adjust its placement

  • Icon Color: Black #000000
  • Icon Placement: Left
  • Icon Font Size:
    • Desktop: 3vw
    • Tablet + Phone: 8vw

Sizing

Continue by modifying the module’s width and height.

  • Content Width: 100%
  • Height: 23vw

Spacing

Furthermore, adjust the spacing settings.

  • Left Margin: 3vw
  • Right Margin: 25vw
  • Top Padding: 2vw
  • Left Padding: 1vw

Border

Add some border radius too.

  • Rounded Corners: 2vw on all corners

Box Shadow

Then, add a box shadow.

  • Box-Shadow: First Option

Transform

Finally, reposition the module using custom transform translate values.

  • x-axis: -6vw
  • y-axis: 1vw

Remove background color and box shadow from column 1

Go to the column 1 settings and remove the background color and box shadow.

Add Call To Action Module to Column 1

Add Title, Body and Button Content

Below the blurb module, add a call to action module. Add some content of your choice.

add a call to action now

Add Link

Then, add a link to the button.

Background

To style the call to action module, start by adding a black background color.

  • Background Color: Black #oooooo

Title Text

Adjust the H3 text settings next.

  • Title Heading Level: H3
  • H3 Font: Josefin Sans
  • H3 Font Color: Bright Yellow #f7f426
  • H3 Font Size:
    • Desktop: 2vw
    • Tablet: 4vw
    • Phone: 6vw
  • H3 Line Height: 2.3em

Body Text

Change the body text settings too.

  • Body Font: Crimson Text
  • Body Text Alignment: Left
  • Body Text Color: White #000000
  • Body Text Size:
    • Desktop: 1.2vw
    • Tablet: 2.2vw
    • Phone: 3.1vw
  • Body Line Height: 1.8em

Button

Then, style the button as follows.

  • Button Text Size:
    • Desktop: 1vw
    • Tablet: 2vw
    • Phone: 3vw
  • Button Text Color: Aqua #00ffd4
  • Button Border Color: Aqua #00ffd4
  • Button Font: Josefin Sans
  • Button Top and Bottom Margin: 3vw
  • Button Top and Bottom Padding: 1vw
  • Button Left and Right Padding: 3vw

Sizing

Move on to the sizing settings and make some changes.

  • Width: 90%
  • Module Alignment: Center

Spacing

Modify the spacing settings too.

  • Top Margin: -9vw
  • Top Padding: 5vw
  • Left and Right Padding: 7vw

Border

Open the border settings next and add some border radius to each one of the corners.

  • Rounded Corners: 2vw

Box Shadow

We’re using a subtle box shadow too.

  • Box Shadow: First Option

Transform Translate

Finally, reposition the call to action module by modifying the transform translate settings.

  • y-axis: -18vw

Delete Column Two and Clone Column 1

Adjust Settings in Column 2

Now that the first column is ready, we’ll delete the second one and duplicate the first. Afterward, we’ll adjust some of the content and color details.

Blurb Module

In the blurb module settings, change the background from yellow to aqua.

  • Background Icon Color: Aqua #00ffd4

Call To Action Module

In the call to action module settings, change the title content, the title color, and the button color. Don’t forget to change the button link as well and you’re done!

  • Title Text Color: Aqua #00ffd4
  • Content
  • Button Color: #00ffd4

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Example #1

Desktop

Blurb background 1

Mobile

Example #2

Desktop

Mobile

Example #3

Desktop

Mobile

Conclusion

As you have seen in this post, blurb icon backgrounds can make your blurb designs much more interesting. By using blurb modules paired up with a call to action and text modules, there are many creative possibilities. These style of designs are perfect for services showcases or product sections. What do you think? Tell us in the comments.

Share This: