There are two options for the position of the image/icon in the Divi blurb module by default, on the left and on the top. Now and then though, there is a good cause to have these icons show up on the right of the blurb module content. Here we’ll show you how to change the divi blurb icon position. All it takes is a little CSS.
Step 1
Adjust the settings of the Divi blurb module
Go to the “Design” tab.
Open the “Image & Icon” toggle.
Change the “Image/Icon Position” selector to “Left.”
Next, open the “Text” toggle
Change the “Text Orientation” to right aligned.
Step 2
Add CSS code to the blurb module
Open the blurb module settings.
Go to the “Advanced” tab.
Open the “Custom CSS” toggle
Add this code to the “Blurb Image”
margin-left: 12px;Add this code to the “Blurb Content”
display: flex;
flex-direction: row-reverse;
Here you’ll find more on the Divi blurb icon position
There is a great video tutorial on this by Pee-Aye Creative.
That’s it!
The blurb module is a great combination of text and imagery. Blurbs are a really good way to feature small sections of important information. Blurbs are often used in rows to showcase services or features. Blurb modules can be placed in any column and they can be stacked on top of each other.
All Divi blurbs come with extensive design features for customising typefaces. You can change the font, sizes, kerning, leading and colours. These variables are even able to be controlled across devices. You can also decide if you are using an image or an icon. Now Divi has included Font Awesome right out of the box. Now that is awesome! The icons too, are fully customisable. Below are some of our other tutorials and advanced tips on the Divi blurb module.
We have other tutorials on Divi blurb customisation
The basics of learning how to edit a blurb module on your Divi website
How to customise the spacing between the icon and the heading on a centred Divi blurb module