How to Move Blurb Icon to Right in Divi Theme

Mar 5, 2021 | Blog, Divi Tutorial | 0 comments

In this article I will share the steps to move the icon to the right in the Blurb module. The Blurb module in the Divi theme only has option to show the icon on top and left by default.

The blurb module does not have an option to show the icon on the right. However with a little amount of css code the icon can be moved to the right.

Lets get started.

Blurb Settings to Move Icon to Right

First open the Blurb Module settings. Then go to Design > Icon > Alignment and set it Left.

Here is a screenshot to help you on where to find the option.

Divi Blurb Alignment Setting

Next go to Blurb Settings > Advanced > Custom CSS > CSS Class and then enter lwp-blurb-right.

If you are not sure where to add the class then please check the screenshot below.

Divi Blurb icon right css class

We are adding a custom class so that the code does not affect all the blurb modules on the website. If you want to move the icon to right for more than one blurb modules then you have to add the class lwp-blurb-right to all of them.

CSS Code to Move Icon to Right in Blurb Module

After the module is setup properly all we need to do is add the CSS code to move the icon to the right.

Go to your Dashboard > Divi > Theme Options > Custom CSS and then add the following css code.

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

.lwp-blurb-right.et_pb_blurb_position_left .et_pb_main_blurb_image {
    width: auto;
}

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

Here is a screenshot to help you find exactly where to add the css code.

Custom CSS Divi blurb icon right

That’s it. The icon in the blurb module should show on the right of the blurb module.

Here are more Divi tutorials that you can read next.

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

0 Comments

Submit a Comment

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

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month