Where’s the right align?
There’s No Option To Right Align the Divi Blurb Module
I recently promised someone in a Facebook group that I would write a tutorial on how to right align the Divi blurb module. I knew this was something others have requested it as well, so I wanted to share it with everyone.
By default, there are two options for the position of the image/icon in the Divi blurb module, left and top. Maybe it is not as popular, but I have seen layouts from other WordPress builders that use these very nicely, and I have needed it on client sites.
The Default Choices
Here is an example of the two default choices:
Image/Icon = Left
This is an example of the default Divi blurb with the image/icon aligned to the left.
Image/Icon = Top
This is an example of the default Divi blurb with the image/icon on top.
The Result Using This Tutorial
Image/Icon = Left
This is an example of the Divi blurb with the image/icon right aligned using this tutorial.
Image/Icon = Left
This is an example of the default Divi blurb with the image/icon left aligned.
Step 1
Adjust The Blurb Module Settings
Go to the “Design” tab.
Open the “Image & Icon” toggle.
Change the “Image/Icon Position” selector to “Left.”
Next, open the “Text” toggle
Change the “Text Orientation” to right aligned.
Step 2
Add Some CSS Snippets To The Blurb Module
Open the blurb module settings.
Go to the “Advanced” tab.
Open the “Custom CSS” toggle
Add this code to the “Blurb Image”
margin-left: 12px;Add this code to the “Blurb Content”
display: flex;
flex-direction: row-reverse;
Thanks for the article Nelson, it was very helpful! I applied to the social media section, it worked perfectly.
Sounds great Armando, I’m glad this helped!
You’re doing the lord’s work sir.
Thank you
Thanks John!
hello , i tried your code , and it works , but i get a very very tiny image ….?
how can i adjust a proper size of the image ?
thanks
Hi Jean,
The image size is within the Divi module Design tab.
This is a great trick… Is there a way to swap the image in the blurb module without right-aligning the entire module? I’d like the image on the right of the header text, but to keep everything left -aligned…
Hi Merry,
Just keep the text alignment option set to align-left. Let me know if that helps!
Thanks again Nelson , worked wonders 🙂
You’re welcome! 🙂
This tutorials work well unless the image size overflow from main content.
I am not sure why it happen, when the image size set to 200px with the body blurb text take out almost 3 lines, it seem not good at all. I need to use very small size of image to make it fit inside the row container.
I discover that in blurb contents, i use direction: rtl; and the padding-left: 12px for image instead of margin fix this problem
Sure, whatever works, but I’d just do what I have since flex is standard.