Custom Divi Blurbs – Part 3

In this tutorial I will show you once again how to customize the Blurb Module. This time, we will add a button to the blurb and spice it up with some awesome animations that will make our module stand out. We will tweak the Blurb settings, add some HTML to the Blurb content field, and, finally, add custom CSS that will do the best part of the magic.
We have prepared this module for a client’s website (you can take a sneak peek here). On their website, the blurbs are used to showcase and link to additional services offered by the company.

As you can see, the module has been added to the footer, which is displayed globally. If you’d like to find out how to display a footer globally on your website, check out this tutorial – Using Divi Template Hooks to Add Global Footer Layout.

Let’s get back to our custom Divi blurbs, because we have prepared a nice easy shortcut for you! This tutorial will guide you step by step through the process. But if tutorials are not your thing, and you’d like to achieve this effect right away, no sweat, then use our layout! You can download the layout and import it to your Divi Library. So simple!

If you haven’t seen our previous tutorials on blurbs, take a look:

Custom Blurbs – Part 1
Custom Blurbs – Part 2


And now, let’s get to work.

  • You will need to have the Divi Theme by Elegant Themes installed.
  • You can follow this tutorial or download our Ready-To-Use Divi Builder section with CSS code embedded.

Live Preview      Download Section

1

Add section and columns

1. Add the Standard Section and select the three-column layout

2. Add the Blurb module to one column (we will be editing settings, and to save us some work, after finishing the module in the first column, we will copy it to the second and third column so the same options will apply).

2

Edit Gutter Width 

For this tutorial, we will use Custom Gutter Width which can be edited in Row Settings.
Open Row Settings, go to Design → Spacing tab,  enable Custom Gutter Width, and set it to 1.
3

Edit Blurb Module Settings

In this step, we will be editing Blurb Module Settings. We need to add the Blurb Title, select an icon and add description text. To embed button, we will add button class b3_blurb_button into the Content box.

CONTENT SETTINGS

1. Open Blurb Module Settings
2. Add Title and Content
3. Add Description Text. For the button, use class b3_blurb_button

DESIGN SETTINGS

Image & Icon
1. Set Image/Icon Placement to Top
2. Use Icon Font Size – YES
3. Icon Font Size – 60px

Spacing
Go to the Spacing section and set the Custom Padding values as on the image below:
Border
Now we need to set the delicate right border for our blurb. Go to the Border section and set 1px right border with the following color value: rgba(0,0,0,0.04) and Solid style.
Advanced
Finally we need to add a custom class to our blurb so the custom styles we are going to add in the next step will apply correctly. To do that, go to the Advanced tab and add b3_blurb_3 class to the CSS Class filed.
4

Copy Blurbs to all columns

We have our Blurb ready, so we can now copy it to second and third column. As you have probably noticed, the last Blurb does not have the right border on our demo. To remove that border, open Blurb Settings for the last blurb, go to Design tab → Border, and remove the border setting we have applied in previous step for the right border.
5

Add CSS

In this last step, we will add some CSS to the Divi/Theme Options/Custom CSS section, or copy and paste it into your style.css file located in your child theme if you have one.

That’s it! Thank you for your attention! This was the third part of the series where I’m showing you how to creatively customize the blurb module. If you enjoyed this tutorial, please let me know in the comments below. And don’t forget to share the effects of your work!
Maciej Ekstedt

Maciej Ekstedt

Maciej is the founder and CEO of B3 Multimedia Solutions. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company and for his clients. Maciej is fascinated by the phenomenon of megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.

Live Preview

Consultation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque purus.

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque purus.

Digital Marketing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque purus.

Get Divi Icons PRO today!

We have a sweet deal for you! You can get the best icon plugin for Divi with a 10% discount! Use the coupon code DIVIICONS10 at checkout!

1 Comment

  1. Kalpana

    wow awesome.. thanks for sharing.. I’ll definitely use this in my next project..

    Reply

Submit a Comment

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

Pin It on Pinterest

This site uses Cookies to improve your online experience. By continuing to use this site without changing your cookie preferences we will assume that you are agreeing to our use of cookies. For more information visit ourPrivacy Policy.
Understood