Overcoming A Blurb Structure Limitation
I love the Divi Blurb module because it combines an image or icon, title, and body text. But there are some limitations in the way the structure of the blurb works. Often I like to use an icon inline to the left of the title, and have the description text underneath BOTH the icon and the title. But this is not possible by default, so in this tutorial I will show you how to align the Divi Blurb body text to the left under the icon or image.
▶️ Please watch the video above to get all the exciting details! 👆
Setting Up The Divi Blurb
First let’s get the Divi Blurb module set up correctly. This tutorial will only work if the image or icon is relatively small. Otherwise, it would not look very good. In our example, we will be choosing an icon with the default size.
Select Image Or Icon
In the Content tab, open the Image & Icon toggle. By default, the blurb uses an image, but you can choose to select Use Icon and then select any icon of your choice.
Select Left Placement
In the Design tab, open the Image & Icon toggle and set the Image/Icon Placement to Left.
Below is an real live example of a Blurb module, how it would look so far. Notice the title text and body text is aligned, but the icon or image is off to the left. This is exactly what we will solve in this tutorial.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Add CSS Directly To The Divi Blurb Module
We could make the adjustment by adding a custom CSS and giving some snippets, but I think it will be easiest to simply add the code directly to the Divi Blurb module. This is very easy, so no worries! We have the actual code below, which you can copy and paste into the Advanced tab in the Custom CSS toggle. Here is a screenshot of how it will look once you have added the code.
Blurb Image
left: 46px;
position: relative;Blurb Title
left: 46px;
position: relative;Blurb Content
min-width: calc(100% + 46px);
left: -46px;Below is the same live example of a Blurb module after the code has been applied:
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Customize The Numbers
Keep in mind, the numbers can be changed, especially if you change the size of the image or icon. You may need to play around with the number, and just make sure to match it in all three code boxes.
NOTE: I also added “margin-top: 4px;” to the Blurb Title to make the title text look more aligned vertically with the icon.
Thank you for this tutorial Nelson.
Is there an easy way to get the blurb image to appear below the Title and body text?
Just wondering if this is easily achieved.
Thanks again!
Hmm, so image at the bottom? That should be doable. add display: flex; and flex-direction: column; to the .et_pb_blurb_content and then assign the opposite order to the child divs, order: 2; to et_pb_main_blurb_image and order: 1; to et_pb_blurb_container
How would one actually align the blurb module centre horizontally within a column? I was 100% sure there was a way of doing this from the module settings but there isnt which seems very strange.
It depends what you mean. If you mean to align any modules within a Divi column, you can enable the Equalize Column Height in the row add align-self: center; to the column main element.
Hi Nelson! Firstly, thank you so much for this tutorial! I come to you every time I want to do somehting that is out of the scope of divi’s normal behaviour..
I just want to ask if there is a specific way I could enlarge the image a bit. I am not using an icon but an actual image so the image width slider that would usually make something bigger doesn’t seem to be working. I have also tried to manually enlarge it by placing code but that just makes the text overlap th image. I might be missing something horrifyingly obvious here as I am exhausted but hopefully you could help out!
Thanks again.
Hi Kayla,
I’m not sure, but this tutorial doesn’t change anything with the image size, so it must be something else conflicting.