How to Move the Icon to the Right on the Divi Blurb Module

If you’re a WordPress user and building your website with Divi Builder, you must be familiar with the Divi Blurb module. The Divi Blurb module allows you to create engaging and visually appealing content sections on your website by combining text and images/icons.

The Blurb module is a versatile tool, but we found a little issue here. As we mentioned, this module combines text and image/icon, but unfortunately, there’s no option to place the image/icon to the right of the text by default.

This article will show you how to move the icon to the right on the Divi Blurb module.

Steps to Move the Icon to the Right on the Divi Blurb Module

Step 1: Add the Divi Blurb Module

First, open your Divi Builder and add the Blurb module to the canvas area. Once you add the Blurb module, you can edit and style up your module as you prefer. In this example, we add four Blurb modules and place all the icons to the left of the text, in which two modules we’ll set the icons to the right of the text.

Once you edit and style up the module, add a unique CSS class name to the specific module/s that you want to move the icon to the right of the text.

On your module settings, navigate to the Advanced tab -> CSS ID & Classes. You can use this CSS class name “blurb-icon-right“, put that CSS class name on the CSS Class input field.

Step 2: Add the Custom CSS

Next, we want to add custom CSS to the page to move the icons to the right of the text.

Go to the Page Settings by clicking the gear button (⚙️) on your Divi Builder editor. Afterward, navigate to the Advanced tab -> Custom CSS. Once you enter the Custom CSS section, copy the simple CSS snippet below and paste it into the Custom CSS input field.

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

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

The Code Explanation:

1. The first rule targets elements with the classes “.blurb-icon-right” and “.et_pb_blurb_content“, which blurb-icon-right is a CSS class name we’ve added to the specific blurb module to make the icon move to the right of the text and .et_pb_blurb_content is a CSS class selector that targets HTML elements (the blurb contents). It applies the following styles below:
   • display: flex; It sets the element to use a flexbox layout.
   • flex-direction: row-reverse; It changes the direction of flex items within the container to be in reverse order horizontally.
2. The second rule is used to fix the problem between the module’s content and the icon. It applies the following style below:
   • padding: 0 15px 0 0; It sets the padding of the element. The values indicate that the top and bottom padding is 0, the right padding is 15 pixels, and the left is 0.

Combining these two lines of code allows us to easily align the icon on the right side of any blurb module in the Divi Builder.

That’s it. As you can see from the image above, once you add the custom SS to the page, the specific icons are moved to the right of the text. Don’t forget to save your project or publish it if you want to.

The Bottom Line

This article shows how easily you can move the icon to the right of the text on the Divi Blurb module. You can now create content with the Divi Blurb module with more flexibility by adding some simple custom CSS.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.