How To Align The Divi Blurb Image Icon To The Right Tutorial by Pee Aye Creative

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.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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;

Last updated Aug 31, 2021 @ 6:28 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

44 Comments

  1. Armando

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

    Reply
  2. John

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

    Reply
  3. 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
  4. 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
      • 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.

      • Joao Correa

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

  5. Rach

    Thanks again Nelson , worked wonders 🙂

    Reply
  6. 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
  7. Kams

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

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

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

  12. 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
  13. 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
  14. David

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

    Reply
  15. 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
  16. 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
  17. 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

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart