In this article I will show you how to create a blurb with the Divi Builder that will change in color and move when you hover over it.
Install the Divi Theme
First you need to have the Divi Theme installed in your WordPress site. Divi is a premium theme so you need to have a subscription to use it. You can get the Divi Theme from the Elegant Themes website.
Add a new page and the blurb module
Now that your theme is installed you can start by creating a new page where we can add our blurb module. On your new page add a title and then click the purple button that says “Use Divi Builder”.
Next you will be shown three options to choose from, we need the first one “Build From Scratch”. Choose it by clicking on the blue button that says “Start Building”.
You will immediately be asked to insert a row. For this demo we chose the three column row option.
Then you are asked to insert a module. The Blurb module is visible from the first options you are shown so click on that to add it to your page.
Customizing the Blurb Module
Divi does a great job in showing you what a blurb should look like by adding a dummy image and dummy text to the module. This way you can better visualize what you want your blurb to look like. For this example we won’t be needing the body text so delete it.
Next we need to click on the Use Icon button to change from an image to the icon.
Select the icon you want from the box. For my project I needed some more icons so I used the WP & Divi icons Pro from my membership to Divi Space (https://aspengrovestudios.com/wp-and-divi-icons/). The plugin adds over 2500+ icons to the box options in the blurb module and what I like the most about it is the search feature the plugin adds to that icon box making it super easy to locate the icon you need.
Once you’ve chosen an icon you can move to the Design tab (middle) and start customizing your icon and text. On the Image & Icon section you can change the color of your icon.
There are options to add a circle to your icon like we see in most modern designs.
You can choose where you want the icon located be it on top of the text or beside it at the left side.
If you want to increase the size of your icon you can toggle the “Use Icon Font Size” switch and change the size with the slider or by directly inputting the font size you want.
The design tab in Divi is very powerful. In the blurb module you can change all the properties of the Title and Body text such as alignment, font size, font color and more.
Adding actions to the hover state
You can add hover states to the icon and the text of the module by clicking on the arrow icon and choosing the hover area. To have the arrow show up you have to hover next to the property you want to change, for example, in our image below you would hover over the question mark next to “Icon color” to show the desktop/hover options. In the example we changed the color from red to blue when someone hovers over the icon.
To cause movement you will use the Transform area. There are five different transform areas: scale, translate, rotate, skew, origin. To make the blurb move up we need the translate option. You can drag the little square in the middle to where you want it to move or add the number directly on the boxes. You might need to unlink the boxes if your blurb is only moving in one direction. On the demo we want it to go up only so we added a -30px to the Y axis. The value is negative because we are starting from an axis where the middle is 0. Anything that goes to the top or the left is negative. To the bottom or right is positive.
After you have made all the adjustments on your module you can copy it to make a similar one and then change the icon and links to your liking.
There are many other options that can be changed in the Design tab, for example you can add a border to your module.
You can also add a shadow to your module. There are 7 options to choose from.
So there you have it. The blurb module can be used to showcase services you can offer or products you sell. Try and play around with the options in the Design tab to see what else you can do with it.
Resources in this article
Divi Theme by Elegant Themes – https://www.elegantthemes.com/join/
WP & Divi icons Pro by Divi Space / Aspengrove studios – https://aspengrovestudios.com/wp-and-divi-icons/
Thank you for reading!