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.
▶️ Please watch the video above to get all the exciting details! 👆
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;
Excellent as always! But aside from moving the icon from the left (of the Title text) to the right, is there a way I can display an icon on BOTH sides. Meaning, display an icon on the left as well as on the right of the Title text. Please let me know.
Thanks,
Gary
Hi Gary!
You can use the following code to add the icon after the title.
.custom-blurb h4.et_pb_module_header > span:after {
content: “\21”;
margin-left: 10px;
font-size: 20px;
font-family: ‘ETmodules’;
}
Use the custom class custom-blurb for the blurb module. Use the needed icon code. You can get the icon codes by searching Divi icon codes on Google.