Code by Day | Explore By Weekend

how to right align the divi blurb module image and icon

How To Right Align the Divi Blurb Module Image/Icon

Here is a quick tutorial to right align the Divi blurb image/icon and reverse the module.

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.

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.

margin-left: 12px;
display: flex;
flex-direction: row-reverse;
20

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
13 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Armando
1 year ago

Thanks for the article Nelson, it was very helpful! I applied to the social media section, it worked perfectly.

John
John
1 year ago

You’re doing the lord’s work sir.
Thank you

Jean-Victor Degrève
1 year ago

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

Merry
Merry
10 months ago

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…

Rach
Rach
6 months ago

Thanks again Nelson , worked wonders 🙂

Aiman
3 months ago

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.

Aiman
Reply to  Aiman
3 months ago

I discover that in blurb contents, i use direction: rtl; and the padding-left: 12px for image instead of margin fix this problem

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 4,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart