Bring new “Instagram” style to Divi’s Blurb Module

In this short tutorial I want to show you how easy it is, to bring new fanciness to all those dusty Divi modules. We are only going to use some very simple CSS tweaks to get the Blurb Module a new look. As inspiration we try to re-create the famous new logo of Instagram – an instagram blurb icon so to speak. So get your Blurbs ready, stretch out your fingers – let’s go !

Free Download

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Create the Test Layout

First of all, create a new page in your Divi Test Environment and choose to use the Divi – Builder. Then create a new standard section row with 1 column, put in a blurb module.

We won’t focus on the content, just on the blurb icon. So go ahead and fill in a fancy title and a short text. We should have something nice to look at, you know !?

Style the Blurb Icon

If you filled in a basic title and text, you’re now ready to bring in the blurb. In the following step, i’m going to show you a new style for your blurbs. Let’s continue !

The Instagram Blurb Icon

Bring up the module settings for the blurb module. In the content tab (1st Tab) of the settings, choose to use a icon instead of an image.

Choose white for Icon-Color and Font-Color. And also choose to circle the icon (but no border !) , by default this will place a circle/round background behind the icon. At this state the color for the circle background is not relevant, we’re going to tweak it with some CSS later.

Before we add some custom CSS, we need to set a custom css class for this module. Go to 3rd tab (advanced) tab in the module settings, and fill in a css class name like “blurb_instagram”.

All good ? Alright ! Now copy the following CSS Snippet and paste it into your custom CSS files (whereever you prefer):

.blurb_instagram .et-pb-icon {
background: #ffd932;
background: linear-gradient(45deg, #ffd932 0%,#ff9430 32%,#c528ff 65%,#30189b 100%);
border-radius:30px;
}
.blurb_instagram .et-pb-icon:before {
content:'';
padding:38px;
position:absolute;
border:3px solid white;
border-radius:23px;
margin-left:-17px;
margin-top:-17px;
}

Result

That should be all. If anything does not work out as expected, hit us on Facebook or leave us a comment, in the commentsection below.

Free Download

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.