Want to learn how to use CSS with Divi?
Our CSS & Divi Beginner Course is now open for enrollment!
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.
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).
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.
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.
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’.
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’.
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.
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.
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.
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.
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
Hi Michelle, thanks for this amazing tutorial. Ive copied it exactly and it works great. I just wanted to try making the border round at the top (i used 50px) which worked but now the image is chopped in half and only displays the bottom half. I managed to do this with a previous website and it worked fine so am not sure what i’ve done wrong. Do you have any idea? Thanks!
Do you mean have only the top border of the image itself rounded?
.myblurb img {
border: 3px solid #334960;
border-radius: 50px 50px 0 0;
}
Or the top border of the actual blurb?
.myblurb {
border-radius: 50px 50px 0 0;
}
Hi. Great tutorial
I have one challenge though. The margin defined as margin-top: -150px; in the custom css, also seems to crop the top of the blurb image. I have changed it to margin-top: -30px;
& added a z-index: 10; but it still cuts off the image. Hope you can assist. Best Stig
You may need to make adjustments for your own individual needs.
@stig – I found that if you have a border radius set on the blurb card settings, it causes the top of the image to be chopped off
Thanks for that input Mike, I’ve moved the border radius out from the main card settings and into custom css for .myblurb & this has now solved the issue of the icon being cut off!
This works great, can we change the background color for the button,
The button will take on the settings you have applied for buttons in the theme customiser as it uses the et_pb_button class. If you want it different to your default setting you can add some inline styles instead like this
Read More
Setting on divi seemed to have changed since this soup was created. I don’t seem to be able to get the image to display outside of the border. The border seem to encompass the picture and text
Do you have a link please Mark and I will check
Thanks for the great info. Everything worked great except one small problem. The blurb border goes inside the image (the line goes on top of the image). Any help will be appreciated.
Give your image a z-index, something like this:
z-index: 10;I’m trying to change the button border color….how should I go about it. I did not understand where you mention add a custom class. Where can I add this?
The recipe show where you add the custom class. To change the button border you can also add this:
.myblurb .et_pb_button {
border: #ff6600;
}
Hi Michelle, I came across you great tutorial and implemented this but unfortunately I am not able to change the button color using the above code, can you please help. Thanks in Advance
That code is just for the border. Check this comment for more customisation https://divisoup.com/custom-blurb-module/#comment-3896
Great tutorial. Worked wonderful. Thanks so much.
Hi Michelle. Great tutorials!!! Any way to create same effect using built-in blurb icons instead of custom blurb image. I tried different margins and padding but the blurb icon remains inside border. Image works flawleslly. Thx
have a link please David?
Unfortunately, I am developing site offline at the moment, so no link to share. Once I post I’ll share with you. Was thinking I may have overlooked something basic, so reached out to you.
Hi Michele,
Having a small problem with the blurbs. If I want to add an image to the blurb content , it causes the image to be circled and placed over the text I have tried a few different ways as on website , cant figure out how to stretch the gap or insert the picture without the above happening….
Excellent. Thanks so much. I have used it on two websites now and it looks great!
Welcome Charlie
Hi Michelle,
Thanks for such a clear step by step post! I have the blurbs looking great but…for some reason the links don’t open when I click ‘read more’ It just reloads the current page. I have looked and looked and cant figure out what is wrong. I would love some help! The site is http://www.aconsciousbeginning.com/ (but then it reloads the page the url is http://www.aconsciousbeginning.com/#) TIA
Hi Lottie, the # is a placeholder for the URL, so you just need to replace that with the link you want on the button
Thanks you Michelle. This was exactly what I was looking for. I saw it on your site and loved it. How do you get the “read more” button to overlap with the bottom of the blurb box?
Use a negative margin Kal
margin-top: -30px;
I got stumpped on how to properly add an image border to a blurb…adding the code in the custom css didnt work. The image had padding on both side and the bottom…couldnt get it sorted. But after reading this, I was able to get it solved!
Excellent news Jared, thanks!
Hi Michelle,
Thank you for a great training video!
I have tried this on 2 websites (I imported the JSON layout and copied the CSS) – I do get to see the full image and Title/Sub-title, however there is no animation? Do you think it could be a general Divi setting that’s causing this.
Thanks again
p.s. I’ve bookmarked and subscribed to your fabulous website.
I am a little confused Brett, are you referring to the custom blurb module?
Am not able to get the image to be confined to the radius.
Any thoughts?
Example of issue: http://imgur.com/a/4m1xr
Note the red background near the top is the section above as I want the blurb to overlay partway…just can’t get the square image to be round like the tutorial shows
I would need a link to the site to check Jason?
Thanks for the great website, one of the best out there of its kind. The one question I have and can’t get any answer on is how do you set the size of the blurb, most examples use the same word count so all boxes are equal in size and button are all on same place. I also tried to use a CSS ID rather, so I only have to place code once, but this did not work at all. Please advise.
You need to set the background colour/border in the column css class field in the custom css tab of the row.
Thanks so much for this tutorial. I have used it on my sites and it works great. I would now like to replicate something similar but having the Heading in a box where the image would be so using a heading instead of the image. Is this an easy to do?
Yes Louise this is quite simple and something like this should work:
.et_pb_blurb h4 {
border: 5px solid #f60;
padding: 50px;
background: #fff;
margin-top: -100px !important;
margin-bottom: 20px;
}
thx, thx thx
you really make my life easier
Welcome Lasse
I have used divi thme, i used some divi theme option like body font size, Background color think is body line height not saved in editor . it show default theme body line height.
Sometimes I have trouble with line height saving in the editor, I usually set it in the CSS if its for a specific element
Hi Michelle, thanks for the tutorial – it looks amazing on the laptop. For some reason though when I look at it on my tablet the buttons and borders start getting messed up. This seems to depend on the size of the screen, on some small ones it looks fine but on an iPad it doesn’t. Do you know how I can fix it? Thanks
The link is:
Hey Steve
I don’t have an ipad to hand right now but can’t replicate the issues you explain in a simulator. You may need to add some media queries to handle the display differently on smaller screens
Hello Michelle,
how to change the “Title” in the Blurb module into another headline. You know that the title comes in H4 as standard. I will change it into H3.
Thank’s for your advise
Torsten
Yes no problem, just leave the title field blank and add your title into the content are using
Title here
I broke my brain, but it so simple
Thanks a lot!
An interesting this happened when I did this. I first put the CSS callout in the style.css and the image remained within the blurb. So, not knowing anything about what I was doing (also known as “following the bouncing ball”) I decided to try the Theme Options route and it worked :).
Great tutorial…thank you.
That does happen sometimes, the quirks of Divi
Thanks Michael
Yes i know – i gone the way you explain too. But it is not work.
i declare
.radius50 img {border-radius: 50%;}
in DIVI global custom css area. Then i have a blurb or image module as part of a site and i add in custom css area of the modul in css class: radius50
But nothing changed.
Whats wrong in my doing?
Regards
Are you adding .radius50 img {border-radius: 50%;} in the custom css section of the module? If so that won’t work, you need to add it to the epanel or child theme style sheet.
In the custom CSS section you would need to just add border-radius: 50%; in the image box
Dear Michelle,
nice to find this post. That was i test more then one time. But it is not work. I declare the css class myblurb, insert image an the css class in the modul – but nothing changed. The border-radius: 50%; is what i wont for images in the blurb modul and in the image module. I can declare it global, but then all images shown with this border-radius.
Do you have an idea?
Regards
Wolfram
If you dont want the radius global Wolfram you need to target the individual modules you do want with CSS
One problem I regularly have when using borders with any module including the blurb is depending on the device they do not always end up the same length. it drives me nuts when the bottoms are not level. I have tried to do min height but it never seams to work for me… any suggestions.
Hey Chris
If you use the equalize columns option then generally you need to use a background colour as that is what equalizes rather than the actual content. You can the try adding the border to the column rather than the modle. Haven’t tried it but in theory it should be workable
Thank you so much! This is so fun and easy to implement! I really like using Divi but sometimes it needs a bit “more”.
Welcome Sol
Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.
Hey Donny, no sorry I don’t, I am not a big fan of Twitter and most of my clients use Facebook and Instagram more so I haven’t had the need to find anything like that so far. But go ask in the Divi Theme Users Facebook group, I’m sure you will get plenty of suggestions
Hello Michelle,
Just wanted to update you with the news that the six columns blurb coding worked after a bit of forking here and there. Can you tell me how I can make them scroll to the respective sections? I used #coupons class, it didn’t work, however the images that previously came up in a line, one below the other are now in the same row.
Hoping to listen from you soon. Thinking of taking up career as a coder and would like to get advice from you.
Thank you,
Siddardha.
Hi Siddardha
You can check out a Divi Quick Tip here from Nathan that explains how to create anchors https://www.youtube.com/watch?v=_Uob36vvYTs
Hello Michelle, great recipe. Everything worked out good except for one part, this code Read More
is not converting into a button and just stays as the code. Do i need to make any adjustments?
Hi Siddardha
I am not sure why this wouldn’t be working for you, do you have a link to your site please, you will need to send it to me using the contact form.
Thank you Michelle. Sent you a message.
Hi Michelle
I’d be grateful for some guidance. I have followed the tutorial to the letter (as far as I can see) 3 times now and I still cannot get the image to sit overlapping into the box and outside. I’ve played around with the negative value. I’m definitely saving it. And it still doesn’t seem to make any difference. The image still stays firmly sat inside the box
I have Maintenance on at present, but can take that off it you would like to look.
Your tutorials are wonderful. It’s my incompetence as a fairly newbie newbie I’m sure.
Thanks
Debby
Hi Debby
Sure I can take a look, why don’t you send me a link via my contact form so its private, alternatively just download the demo and adjust for your needs
Hi Michelle
I’ve slept on it and lo and behold it worked! Sorry to have bothered you. Thank you. I have also got a customised button now thanks to you. Fantastic.
Deb
That’s great Debby, glad you got it sorted
Thank you so much Michelle. That worked the way I wanted.
Thank you for answer Michelle. What I am trying to do is get equal heights on the blurb modules. It is to get more symmetry on the page. I have 4 blurbs on my page, of course with different length on the text. What I would like to do is adjust all of them based on the one with most text, so all of them is the same size.
Finn
If you add background colours to the 4 columns from within the row then there will be more symmetry as the actual containers will all be the same height. Alternatively you can remove the borders from the actual blurb modules themselves and add them instead to the custom css section in the row for each column with no background colour. You would just need to add this: border: 5px solid #ff6600; (or whatever width and colour you want) And switch on the equalise columns option. You may also want to play with the negative margin for the blurb image to… Read more »
Love your tutorials Michelle. I´ve been looking for a way to do this. It looks really nice, but for some reason the “Use equal column heights” does not work doing it this way. Or…. am I doing something wrong?
Have a great day.
Finn
Hi Finn, thanks for your comments
Not quite sure what you are trying to do but the equal column heights option is really for use when you have a background colour/image on the column. It will make all the columns equal height, not the content within them if that makes sense.
What great training. This is going to be my weekend project. Thank you
Sometimes Divi seems so hard to work with. Do you have more training info on divi
Hi Mark, thanks for the lovely comments
If you visit the Kitchen you can see all my Divi recipes and quick snacks 
I will also begin offering 1-1 Divi coaching in the coming days so if that is something which is of interest to you shoot me an email and I will notify you when it begins.
Hi, I want to do this with the individual blurbs having different colored borders. I have tried using this code in the individual blurb code CSS, but doesn’t seem to be working. Do you have any ideas for me? Thanks!
Hi Deborah There is a couple of things you need to do to achieve this. Firstly give each module its own custom class, so for example: myblurb1 myblurb2 myblurb3 The define each one separately in CSS like this .myblurb1 img { border: 5px solid #ff6600; border-radius: 50%; margin-top: -150px; } .myblurb2 img { border: 5px solid #d7d7d7; border-radius: 50%; margin-top: -150px; } .myblurb3 img { border: 5px solid #e9e9e9; border-radius: 50%; margin-top: -150px; } Keep the border-radius and top margin the same and just change the colours. You will also need to change the colour of the main border in… Read more »
Thank you so much!
You rock.
Lol, thanks Jennifer
Hi Michelle,
Nice one ! I was just looking for this kind of blurbs !
Best,
Paul
Pleasure Paul, hope it’s useful
Hi Michele,
Perfect soup , until I try add a picture along with the text in the blurb , an unforeseen side effect seems to be that the graphic turns into a large circle and covers the text …
Thinking I must have gotten some sand in into my pea soup
Haha, do you have a link please?
Hi Michelle
http://madpirate.com.au/madblog/ I have a few examples there
Ah I see what you mean now.
Yes the CSS target the img element so will affect any image used in the blurb
So instead of this
.myblurb img {
border: 5px solid #ff6600;
border-radius: 50%;
margin-top: -150px;
}
Try this
.myblurb et_pb_main_blurb_image img {
border: 5px solid #ff6600;
border-radius: 50%;
margin-top: -150px;
}