

Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Right Align The Divi Blurb Module Image/Icon

Here is an easy tutorial to show you how to right align (reverse) the Divi Blurb module image and/or icon with just few snippets of CSS.

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;

Categories: Divi CSS Tutorials

I hope you enjoyed learning. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative and the product creator of many popular Divi Plugins, as well as WordPress products WP Inbox, WP SiteLauncher, and SurelyWP Addons For SureCart. Nelson lives with his wife Tashia and daughters Abrielle and Reiah in the beautiful state of Pennsylvania. Learn more on our About page!

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

51 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

Gary Gordon Divi Adventure Club Member on August 6, 2024 at 9:08 am

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
Reply
- Hemant Gaba Divi Adventure Club Member on August 7, 2024 at 3:19 pm
  
  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.
  Reply

Comments By Others

Mark Mapstone on September 13, 2023 at 5:48 am

Hi. This tutorial is great, but it has created confusion in the comments (including for me).
The tutorial aligns the icon and the blurb content to the right. However, most people just want the icon to the right of the last character in the Title, but everything else to the left (the Title and Icon combined, plus the blurb body copy).

How would you adjust the css to align only to the right of the Title (not the entire module)?

Thanks
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on September 14, 2023 at 11:44 am
  
  Hi Mark,
  I am not totally sure what you mean about both things – I am not seeing any other confusion about that, and cannot understand exactly what you are trying to achieve. You would not be able to move the image/icon within the title text div, as that is separate.
  Reply
ck on March 2, 2023 at 6:13 pm

Thank you so much for the tutorials here and on Youtube. You’re a great teacher and we appreciate the brevity.
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on April 11, 2023 at 2:46 am
  
  Thank you, I am so glad you are enjoying the resources!
  Reply
Sean on February 24, 2022 at 12:45 pm

Is there a way to do this where the Text/Title remains aligned to the left while the Icon is to the right?

Trying to build something like this: https://i.imgur.com/pPYY12H.png
Reply
- Hemant Gaba Divi Adventure Club Member on February 27, 2022 at 1:45 pm
  
  Hey Sean,
  
  Could you please point me to the exact text and icon where you want to do this in order for me to cure this issue?
  Reply
Nat on January 25, 2022 at 11:04 pm

Hi ! I’m trying theses snippets of code onto my blurb module, my image is indeed positioned on the right side of the blurb,

but the entire module itself, is aligned to the right side of the row, even if the module’s alignment is set to be left aligned,

Is there a way for the blurb module to stay left aligned within the row, instead of it being pushed to the right?

Here is a link:
https://didembasar.com/blurb/

Many thanks for all the tutorials you guys put out !
Reply
- Hemant Gaba Divi Adventure Club Member on February 7, 2022 at 8:10 am
  
  Hey Nat,
  
  To understand the issue properly I need the page URL where the issue is happening so that I can investigate the issue. The URL that you have provided is leading to a 404 error.
  Reply
Heather on January 2, 2022 at 2:43 pm

I’m having a problem with aligning the module to the right, when a left aligned icon is placed in the blurb module. You can no longer center it or right align the module at all. And if you align the text, the icon doesn’t follow. ugh. I’m hopeing I’ll figure it out myself today.
Reply
- Hemant Gaba Divi Adventure Club Member on January 13, 2022 at 12:28 pm
  
  Hey Heather,
  
  Could you please share the URL of the page where you are facing the issue?
  Reply
David on September 9, 2021 at 3:08 am

I followed this tutorial but it aligns everything to the far right.
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on September 9, 2021 at 2:59 pm
  
  Can you elaborate on that? What you described is what the tutorial does.
  Reply
Richard on July 20, 2021 at 3:22 pm

Thank you so much for this awesome tutorial, Nelson! I followed this along with your How To Add Font Awesome To Divi post to add Font Awesome icons to the right of Divi blurbs. 🙂

I do have a problem, though. My right-aligned Divi blurb Font Awesome icons are getting cut off horizontally. Do you know how I can prevent this from happening?
Reply
- Hemant Gaba Divi Adventure Club Member on August 3, 2021 at 8:17 pm
  
  Hi Richard,
  
  Could you please share the URL of the page for me to investigate further?
  Reply
sean on June 18, 2021 at 2:01 pm

Love the tutorial but it doesn’t seem to work with larger images, the text pushes the image off the screen, you can see what my result is here: https://i.imgur.com/6xuUmd0.png
Reply
- Hemant Gaba Divi Adventure Club Member on August 4, 2021 at 10:40 am
  
  Hi sean,
  
  Could you please share the URL of the page where you are facing this issue for me to investigate further?
  Reply
Andie on May 18, 2021 at 11:58 am

Hi there! Great tip, but I have a question. I want to center my blurb module inside the row, and the body text + image are quite a bit to the right inside the block. How can I fix that?
Reply
- Hemant Gaba Divi Adventure Club Member on May 25, 2021 at 8:56 pm
  
  Just to confirm, do you want to center align the body text and the heading keeping the image to the right?
  Reply
  - Andie on May 26, 2021 at 4:38 am
    
    Yes, that’s it. 🙂
  - Hemant Gaba Divi Adventure Club Member on May 26, 2021 at 5:39 pm
    
    You can follow this guide for the same with little changes. To make the text in the center, you need to choose the second Text Orientation Option(in the guide the choose option is third) and you need to remove the margin-left 12px and place the code given below in the Advanced > Custom CSS > Blurb Image:
    position: relative; left: -6em;
    
    You can change move the image left or right by changing the left value in the above code. You can also change the placement of the image for different screen sizes by using Divi Responsive functionality. Please let us know it that helps.
Jonas Heinzerling on May 8, 2021 at 9:07 am

Embarrassed to say how long i spent trying to change the icon position before finding your tutorial. Thank you thank you!
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on June 1, 2021 at 8:04 pm
  
  Haha don’t be embarrassed, it is pretty tricky!
  Reply

Manuel on February 3, 2021 at 11:00 am

Hello, thank you very much for your contribution, it is very good! consult ... how can I eliminate the space between the icon on the left and the content of the text, they are far apart ...

Nelson Lee Miller (aka The Divi Teacher) Author on February 11, 2021 at 12:22 pm

Hi Manuel,
If you share the link I may be able to help.
Reply

Anette on December 26, 2020 at 6:54 pm

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 🙂
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on December 28, 2020 at 8:07 pm
  
  Hi Anette,
  You can change the image width in module’s Sizing settings. Give that a try.
  Reply
  - Anette on December 29, 2020 at 5:20 pm
    
    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).
  - Nelson Lee Miller (aka The Divi Teacher) Author on December 30, 2020 at 10:34 am
    
    Okay in that case just also add min-width: 150px; to the Blurb Image in the module.
  - Demitris on April 3, 2021 at 12:59 pm
    
    I just added min-width: 150px; and all that it did was move the image to the left. Any idea how I can increase the size of the image it’s self?
    
    BTW I’m loving your Responsive Helper plugin.
  - Hemant Gaba Divi Adventure Club Member on April 3, 2021 at 7:32 pm
    
    First please go to the Blurb Module Setting > Advanced > CSS ID & Classes and give a Custom Class to the blurb module. For example, the class is pa-blurb-module
    After that go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the code given below:
    .pa-blurb-module .et-waypoint { font-size: 100px !important; }
    You can increase or decrease the font size value as per your liking.
    
    Please let us know how it goes. 🙂
Kams on November 27, 2020 at 10:17 am

Great tip!
I am wondering how to achieve the same thing with the toggle module?
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on November 28, 2020 at 1:04 am
  
  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!
  Reply
Aiman on July 29, 2020 at 3:37 am

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.
Reply
- Aiman on August 1, 2020 at 8:57 pm
  
  I discover that in blurb contents, i use direction: rtl; and the padding-left: 12px for image instead of margin fix this problem
  Reply
  - Nelson Lee Miller (aka The Divi Teacher) Author on August 3, 2020 at 4:02 pm
    
    Sure, whatever works, but I’d just do what I have since flex is standard.
Rach on May 16, 2020 at 7:21 am

Thanks again Nelson , worked wonders 🙂
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on May 16, 2020 at 12:54 pm
  
  You’re welcome! 🙂
  Reply
Merry on January 10, 2020 at 1:44 pm

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…
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on January 10, 2020 at 7:56 pm
  
  Hi Merry,
  Just keep the text alignment option set to align-left. Let me know if that helps!
  Reply
  - John on April 10, 2023 at 10:08 am
    
    Another way to do that Joao would be “justify-content: flex-end;” this will align the item at the left side but keep the blurb icon on the right
  - Joao Correa on April 29, 2022 at 12:43 am
    
    Actually you just have to insert the css code on the title tab:
    position:absolute;
    left:0
  - Ferg on February 24, 2021 at 7:39 am
    
    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.
  - Nelson Lee Miller (aka The Divi Teacher) Author on February 24, 2021 at 12:12 pm
    
    I don’t understand what you are asking. This tutorial is about the image or icon, not the text.
Jean-Victor Degrève on October 7, 2019 at 9:34 am

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
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on October 7, 2019 at 7:09 pm
  
  Hi Jean,
  The image size is within the Divi module Design tab.
  Reply
John on May 12, 2019 at 3:19 pm

You’re doing the lord’s work sir.
Thank you
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on May 15, 2019 at 10:29 pm
  
  Thanks John!
  Reply
Armando on May 10, 2019 at 1:45 pm

Thanks for the article Nelson, it was very helpful! I applied to the social media section, it worked perfectly.
Reply
- Nelson Lee Miller (aka The Divi Teacher) Author on May 11, 2019 at 5:17 pm
  
  Sounds great Armando, I’m glad this helped!
  Reply