How to Align Divi Blurb Module Icon/Image to the Right

Change the Image/Icon Placement in the Blurb Module

The Blurb module is a very versatile module within Divi. It can be used for many different purposes and styled in many different ways. It is one of the most popular modules, but there is one styling option that is missing in the Design settings for that element. It’s the possibility to align the Image or the Icon to the right side. By default, we can only choose the “Top” or “Left” placement of the Image/Icon.

In this short video walkthrough, I would like to show you how to use CSS Flexbox to easily change the alignment of the Blurb content and icon. I will also give you a few tips on how to create a simple timeline section.

Align the Icon with CSS

To target a specific module, and not all Blurbs on the entire website, we’ve added a custom CSS Class in the Blurb’s Settings, Advanced section: dl-blurb-icon-right. This bit of CSS changes the alignment of the icon:

.dl-blurb-icon-right .et_pb_blurb_content {
        display: flex;
        flex-direction: row-reverse;
    }

The CSS code below fixed the spacing problem between the content and the icon:

.dl-blurb-icon-right.et_pb_blurb_position_left .et_pb_blurb_container {
        padding: 0 15px 0 0;
    }

Use Media Query

If you’d like to make sure that the alignment is altered only for desktop, you’d wrap the CSS inside a media query, which targets screen sizes of 981px and above. That would be the final version of the code:

@media (min-width:981px) {
    .dl-blurb-icon-right .et_pb_blurb_content {
        display: flex;
        flex-direction: row-reverse;
    }
    .dl-blurb-icon-right.et_pb_blurb_position_left .et_pb_blurb_container {
        padding: 0 15px 0 0;
    }
  }

Final Thoughts

Don’t forget to check out the demo page to see two examples of the right-aligned icons in action!

Sign up for the newsletter so you don’t miss out on any Divi tutorials. Also, keep an eye out for future Divi freebies. If you’re a subscriber feel free to download the Features and Timeline sections I created as an example.

As always please leave a comment with your thoughts below! I hope you’ll find this helpful.