I really love the Divi Blurb module – it’s super versatile and easy to use and extremely popular, which is why there’s so many Divi Blurb Layouts available online. Even out-of-the-box, with the ability to add images or use the stock Divi icons, the module is powerful. When styled with simple CSS it can be even more eye-catching.

I’d just like to share this really simple layout as this has been my go-to Divi Blurbs Layout for recent website builds. It can be used for anything, but I’ve found it extremely effective for displaying company services (I even use it on my homepage!).

To see it in action, click here for a live example.

 

divi blurb hover effect

 

Download Layout

You can also download this layout pack for FREE – just don’t forget to subscribe below! Download the FREE layout from the live example here. (Note. You’ll still need to copy across the Custom CSS into your child theme’s stylesheet, or into the Custom CSS box in the Divi Theme Options in order to get the hover effect to work).

 

Here’s how to build the layout.

 

Create Your Section

 

This will work with any type of row, but for the sake of this example we’re using a 1/3 1/3 1/3 row:

 

 

We’re now going to give the whole section a light grey background colour. Do this by opening up the Section Module Settings (the BLUE section).

Change the Background Color to #f4f4f4.

Save & exit.

 

 

 

Create The Blurb Modules

 

Click Insert Module(s) and choose the Blurb Module:

 

 

Fill out the following fields in the Blurb Module Settings:

Title: Add your title here

URL: Leave blank

Use Icon: Yes

Icon: Choose your icon

Icon Color: Choose your colour here

Image/Icon Placement: Top

Text Color: Dark

Text Orientation: Center

Content: Put your content here

 

Save & Exit. Your section will look something like this:

 

 

Duplicate your Blurbs two more times and edit your contents so that we have all three Blurbs in our row.

We’re now going to edit the Row Module Settings. Open up the Row Settings with the button below:

 

 

Edit the settings as follows:

Make This Row Fullwidth: Yes

Use Custom Gutter Width: Yes

Gutter Width: 2

 

 

divi blurb hover effect

 

Advanced Design Settings

 

Head into the Row Module Settings Advanced Design Settings and edit the following:

Equalize Column Heights: Yes

This ensures that our three Blurb Modules have the same height, even if they have differing amounts of content in them.

 

divi blurb hover effect

 

 

Custom CSS

 

We’re still in the Row Module Settings but we’re now going to click on the Custom CSS tab.

Firstly we’re going to give each Column a CSS Class. Enter the following into the these fields:

Column 1 CSS Class: service-blurb

Column 2 CSS Class: service-blurb

Column 3 CSS Class: service-blurb

 

Now we’re going to scroll down and enter some CSS into the following sections:

Main Element:

overflow:visible!important;

 

Column 1 Main Element:

padding:20px;
box-shadow:0px 0px 8px -2px;

 

Column 2 Main Element:

padding:20px;
box-shadow:0px 0px 8px -2px;

 

Column 3 Main Element:

padding:20px;
box-shadow:0px 0px 8px -2px;

 

Save & Exit. Your Blurb layout should look something like this now:

 

divi blurb hover effect

 

We’re almost there! All we need to do now is add the hover effect so that each section turns white on hover.

 

More Custom CSS

 

We’re now going to head over to the Custom CSS box in our Divi Theme Options or, if you’re using a child theme, your stylesheet.

Enter the following CSS:

.service-blurb {
transition:ease-in-out 0.5s;
}
.service-blurb:hover {
background-color:white;
}


Your sections should now subtly turn from grey to white on hover!

divi blurb hover effect

 

And that’s it. Feel free to experiment with the colours to match your website.

If this has helped you out then please subscribe below to get these free tutorials sent to your inbox when they’re released! And if you have any thoughts, suggestions or criticisms, feel free to post a comment below!

Tim


BMC logoBuy me a coffee

 

You May Have Missed These...

The following two tabs change content below.
Founder of Inline|Creative and Digital Content Producer at IMG Artists. Freelance WordPress web designer, blogger, and musician.

Pin It on Pinterest

Share This