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.

This Two Section Layout is available to download for free to our subscribers.

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page! 

Can’t see the form? Click here

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.

Shares

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

8 Comments

  1. Peter

    Hello Ania!

    Can you help me out please?

    I would like to do the following:
    -2 row section with blurb modlue
    -i would like to aling only the image to the right like here in your video:
    https://youtu.be/0TxfXs_IWtw?t=428

    Headline: AWESOME FEATURES
    Blurb Title on the left: This is a great features
    Blurb icon on the right: check

    I dont want to reverse all the module element, i dont want to modify the blurb title and content.

    Can you help me please?

    Reply
    • Ania Romańska

      The text alignement is controlled by the module settings – the CSS I share only moves the icon to the right (and it sounds like it is what you want to achieve (?)

      Reply
      • Peter

        Well, sadly the code makes my full blurb module content to the right:

        https://www.loom.com/share/12a3302182254b72bc61451914be1093

        Am i doing something wrong?
        I would like to move only the icon to the right. I can not the title alignment controlled by the module setting.

      • Ania Romańska

        It looks like there is not enough content in your blurb (the text doesn’t fill the full width of the container). You would need to add justify-content: space-between; to the CSS. Or (for this layout it would be easier) use a standard Text module and add an Icon module and position it absolutely at the top right corner relative to the column.

  2. Víctor Hernández

    Great, thanks a lot for these beautifuls designs examples.

    Reply
  3. David

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

    Reply
    • Ania Romańska

      Can you share your URL? 🙂

      Reply

Submit a Comment

Your email address will not be published.

I want to stay in touch! I’d like to receive special offers and tutorials from Divi Lover. Sign me up for awesome content! I know that I can unsubscribe at any time.

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen