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.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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