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 = Right
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!
Hi I have the text aligned to left but the whole module is still aligning to the right of the column. Not sure what I am doing wrong here. Any advice would be appreciated.
I don’t understand what you are asking. This tutorial is about the image or icon, not the text.
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.
Great tip!
I am wondering how to achieve the same thing with the toggle module?
Hi Kams,
Can you clarify this more? I don’t quite know what part you are comparing to the blurb. I do want to do some tutorial son the toggle/accordion so let me know!
Great tutorial! But I have one question. I had allready used CSS to make my blurb image larger than what is possible in the Divi module design tab, I used width: 150px;
Following this tutorial, it made my image small again. Is there any way of right aligning the blurb image, like in this tutorial, while KEEPING the width: 150px; ?
Thanks! Anette 🙂
Hi Anette,
You can change the image width in module’s Sizing settings. Give that a try.
Thanks, but nope. In the blurb module you can only change it from super small to small. If you want it a little bigger, you need to do that with CSS. And that’s what I have done. But when I tried your recipe for putting the image on the right, the size og the image changed back to the small standard size (the max size, wich is very small).
Okay in that case just also add min-width: 150px; to the Blurb Image in the module.
Hi Manuel,
If you share the link I may be able to help.