Search

How to Rotate Icon on Divi Blurb Module

Are you tired of static icons in your Divi Blurb modules? Rotation may bring life and visual excitement!

This tutorial explores the exciting world of transforming icons, equipping you with the knowledge and techniques to create captivating effects. We’ll cover it all, whether you want to just flip your icon (normal) or do a slight hover.

Icons rotated (normal and hover)

Steps to Rotate Icon on Divi Blurb Module

1. Display the Icon

Open your Divi Builder editor and add the Blurb module to the canvas area. Once you add the Blurb module, navigate to the module settings, then enable the icon option (Content tab -> Image & Icon -> Use Icon)

Next, pick an icon you want to display with your blurb in the icon library.

2. Rotate the Icon

As we mentioned earlier, we will show you how to rotate the icon on the Blurb module in two ways; normal state and hover effects. You can choose a rotating style that matches your design.

  • Normal

In the module settings, go to the Advanced tab -> Custom CSS -> Module Elements -> Blurb Image.

Copy the CSS snippet below and paste it into the available input field.

transform: rotate(-25deg);

Note: Replace the value -25deg with your preferred number of rotating degrees

  • Rotate on Hover

In the module settings, go to the Advanced tab -> Custom CSS -> Module Elements -> Blurb Image.

Once you enter the Blurb Image section, please enable the hover option by clicking the cursor/hover icon. Afterward, copy the CSS snippet below and paste it into the hover field.

transform: rotate(-25deg);
transition: transform 0.5s ease-in-out;

Note: Replace the values of rotating angle and animation speed with your preference.

That’s it. Save your project and see the result by clicking the Exit Visual Builder button.

The Bottom Line

This quick guide empowers you to add a dynamic touch by rotating an icon on your Divi Blurb modules, making them more engaging and visually appealing for your website visitors.

Remember, you can personalize the rotation angle and animation speed to perfectly suit your design preferences. Now get out there and rotate your icons!

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.