Custom Blurb Module

by | Feb 11, 2016 | Blurb, CSS Tips & Tricks

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Recipe #6 is by VERY popular demand! I created this custom blurb module layout to help out Terry Smith from the Divi Theme Users Facebook group. After posting a link to the demo and downloadable layout in the group, I asked for people to like the post if they would rather have a tutorial. That post (at last count before writing this tutorial) had a whopping 210 likes. So I didn’t have much choice really did I? ๐Ÿ˜‰ Here it is…

Click here to see the live demo and download the XML file.

Custom blurb module

So let’s get cooking!

 

ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes

An image around 160px by 160px

cooking-time

This should take you around 10 to 15 minutes max.

preparation

The first thing we need to do is createย our module. So add a new sectionย with three columns and then add a blurb module into the first column (we will set up the first module and then just duplicate it for speed).

custom blurb module tutorial for divi

method

Open up the blurb module, click on the custom css tab and give it a custom css class of myblurb. I am using Divi 2.6, if you are using an older version of Divi then the css class field will be at the bottom of the General settings tab.

custom blurb module tutorial for divi

Next click on the General Settings tab and enter a Title and URL for your blurb module (the image and blurb title link to a url), if you don’t want them to link just leave the url field blank.

custom blurb module tutorial for divi

Then scroll down a bit further and select your blurb image from the media library, also make sure the image/icon placement is set to ‘top’.

custom blurb module tutorial for divi

Now scroll down a little further and select your image/icon animation (I like bottom to top for this one) and set the text orientation to ‘center’.

custom blurb module tutorial for divi

Scroll down a little further again until you get to the content area. Add in your desired copy and if you want one, a button.

custom blurb module tutorial for divi

Copy the code below to add the button, this button will take on the settings you have chosen in the theme customiser as it is the standard Divi button. If you want to change it to a custom style just change the class to your custom class and it will take on the settings you have applied for that button class. Replace the # with your url and the Read More text with whatever it is you want the button to say.

<p><a class="et_pb_button" href="#">Read More</a></p>

 

Next, open up theAdvanced Design Settings tab and scroll down until you get to the border option. Set Use Border to Yes and then select your border colour, width and style.

custom blurb module tutorial for divi

Scroll down a little more until you get to the custom margin and custom padding sections. Add 100px to the top margin and 20px to the top, right, bottom and left padding. Then click on the tablet and smartphone tabs just to check the same padding is being applied there also. Then Save & Exit. You can play with these values to get your desired affect.

custom blurb module tutorial for divi

The reason we add 100px margin to the top is in the css to follow, we are going to add a negative margin so the blurb image sits partly across the top border rather than within the border. If we didn’t add this 100px margin, the blurb images would overlap the section above.

When you are happy with your settings, duplicate the blurb module twice and drag the new modules into the second and third columns. Then update your page to save all your settings.

custom blurb module tutorial for divi

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you arenโ€™t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSSย section and donโ€™t forget to save.

You will need to change the border width and the colour to match what you have set in the blurb module. You can also play with the negative margin value to get the blurb image sitting just where you want it.

/*---------- [Custom Blurb Module] ----------*/

.myblurb img {
    border: 5px solid #ff6600;
    border-radius: 50%;
    margin-top: -150px;
}

 

And that’s it, now you should have 3 custom blurb modules as shown in my demo.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. ๐Ÿ™‚

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

Pin It on Pinterest

Share This
pro-membership

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!