The Divi Blurb module is a versatile tool that can be used to create eye-catching content layouts on your website. However, like any other design element, it can sometimes present spacing issues that need fixing to achieve the desired look.
In this tutorial, we’ll fix three common spacing issues encountered with the Divi Blurb module when having an icon to the left and text to the right.
Join +3 980 subscribers!
1. Left-aligning the Divi Blurb Module
When adding a Blurb module to a single column row, you might notice that their is a huge whitespace to the left of the Blurb module in desktop devices. Here’s how to remove this spacing and aligning the blurb module to the left of the row.
- Open the Blurb module settings by clicking the cogwheel icon
- Go to the Design tab and open the the Sizing tab
- Change the Content Width from 550 px to 100%
This adjustment will ensure that the Blurb is left-aligned without any additional spacing to the left.
Pro tip: If you are using much text in the Blurb, you might want to add some padding right, for example 50%, to improve readability. Make sure to set the right padding to 0 (zero) for phones, using the Divi responsive design settings. Check out the video above to for more details.
Before (Live Demo)
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.
After (Live Demo)
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.
2. Reducing the Space Between the Blurb Icon and the Blurb Text
When you reduce the size of the Blurb icon, you’ll notice the space between the icon and the Blurb text will increase. To fix this problem, we need to add a little CSS snippet.
- Open the Blurb settings by clicking the cogwheel in the Divi Visual Builder
- Go to Advanced » CSS ID & Classes
- Add the CSS Class dm-tight-blurb
- Save the page and exit the Divi Visual Builder
- Go to the WordPress dashboard and head over to Divi » Theme Customizer
- Click the Additional CSS tab and paste the snippet below:
/* Reduce left spacing between blurb icon and blurb text */ .dm-tight-blurb.et_pb_blurb_position_left .et_pb_blurb_container { padding-left:5px; } - Save the Theme Customizer settings and preview in frontend.
Please notice that the Theme Customizer preview is not always 100% accurate. Preview your changes in frontend and clear your browser cache and website cache if needed.
Pro tip: The default left padding for text in the Divi Blurb Module is 15 px. If you use less then 15 px, the distance between the icon and the text will decrease. If you use more than 15 px, the distance will increase. I’ve used 5 px padding in this example.
Before (Live Demo)
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.
After (Live Demo)
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.
3. Vertically Center the Blurb Icon and the Blurb Title
If you change the default sizes for the Blurb icon and the Blurb icon, you will probably see that they are no longer vertically center. To fix this, we’ll use a CSS snippet to push down the Blurb icon.
- Open the Blurb settings by clicking the cogwheel in the Divi Visual Builder
- Go to Advanced » CSS ID & Classes
- Add the CSS Class dm-tight-blurb
- Save the page and exit the Divi Visual Builder
- Go to the WordPress dashboard and head over to Divi » Theme Customizer
- Click the Additional CSS tab and paste the snippet below:
/* Vertically center blurb icon and blurb title */ .dm-tight-blurb.et_pb_blurb_position_left .et_pb_main_blurb_image { padding-top:10px; } - Save the Theme Customizer settings and preview in frontend.
Please notice that the Theme Customizer preview is not always 100% accurate. Preview your changes in frontend and clear your browser cache and website cache if needed.
Pro tip: Adjust the 10 px top padding to nudge the Blurb icon in the right position. The value depends on the sizing of the title text and the icon.
Before (Live Demo)
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.
After (Live Demo)
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.
Pro tip: You can use CSS Media Queries to set different values for phones, tablets and desktop devices.
That’s all for today!
I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.
👉 Related post: How to Vertically Center Content in Divi Using Flebox CSS
👉 Free course: Create a website from scratch with Divi
0 Comments