Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Right Align The Divi Blurb Module Image/Icon

Nelson Miller Profile Orange
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.

▶️ Please watch the video above to get all the exciting details! 👆

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 = 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.

margin-left: 12px;
display: flex;
flex-direction: row-reverse;
Categories: Divi CSS Tutorials

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!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

49 Comments

Comments By Others

  1. Mark Mapstone

    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) <span class="comment-author-role-label author-label">Author</span>

      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
  2. ck

    Thank you so much for the tutorials here and on Youtube. You’re a great teacher and we appreciate the brevity.

    Reply
  3. Sean

    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

      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
  4. Nat

    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

      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
  5. Heather

    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

      Hey Heather,

      Could you please share the URL of the page where you are facing the issue?

      Reply
  6. David

    I followed this tutorial but it aligns everything to the far right.

    Reply
  7. Richard

    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

      Hi Richard,

      Could you please share the URL of the page for me to investigate further?

      Reply
  8. sean

    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

      Hi sean,

      Could you please share the URL of the page where you are facing this issue for me to investigate further?

      Reply
  9. Andie

    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

      Just to confirm, do you want to center align the body text and the heading keeping the image to the right?

      Reply
      • Andie

        Yes, that’s it. 🙂

      • Hemant Gaba

        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.

  10. Jonas Heinzerling

    Embarrassed to say how long i spent trying to change the icon position before finding your tutorial. Thank you thank you!

    Reply
  11. Manuel
    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 ...
    
    Reply
  12. Anette

    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
      • Anette

        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).

      • Demitris

        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

        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. 🙂

  13. Kams

    Great tip!
    I am wondering how to achieve the same thing with the toggle module?

    Reply
  14. Aiman

    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

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

      Reply
  15. Rach

    Thanks again Nelson , worked wonders 🙂

    Reply
  16. Merry

    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
      • John

        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

        Actually you just have to insert the css code on the title tab:
        position:absolute;
        left:0

      • Ferg

        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.

  17. Jean-Victor Degrève

    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
  18. John

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

    Reply
  19. Armando

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

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart