Learning Divi: The blurb module

You are here:
Estimated reading time: 3 min

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”.

Create a new Page
Add a title and click on 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”.

Choose “Build from scratch”

You will immediately be asked to insert a row. For this demo we chose the three column row option.

Choose the type of row
Choose the type of row

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.

Choose a module from the list. We are using Blurb.
Choose a module from the list. We are using Blurb.

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.

The main blurb module

Next we need to click on the Use Icon button to change from an image to the icon.

Let’s use 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.

Choose the icon
Choose the icon

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.

Customize the icon's properties
Customize the icon’s properties

There are options to add a circle to your icon like we see in most modern designs.

You can add a circle to the icon
You can add a circle to the icon

You can choose where you want the icon located be it on top of the text or beside it at the left side.

Choose the icon's location
Choose the icon’s location

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.

Use Icon Font size to make the icon bigger or smaller
Use Icon Font size to make the icon bigger or smaller

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.

Customize the blurb's text to your liking
Customize the blurb’s text to your liking

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.

Click on the arrow to add a hover state
Click on the arrow to add a hover state

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.

Moving the blurb module

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.

Duplicate your module once you've configured it
Duplicate your module once you’ve configured it

There are many other options that can be changed in the Design tab, for example you can add a border to your module.

Adding a border to your module
Adding a border to your module

You can also add a shadow to your module. There are 7 options to choose from.

Add a shadow effect on your module
Add a shadow effect on your module

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!

Was this article helpful?
Dislike 0
Views: 12