A Playful Text Section with Divi’s Gradient Feature

In our last post we tried to create some neat looking effects with Divi’s new gradient feature (5 Creative Ways To Use Divi’s Gradient Background). In this post we are looking at this new feature a bit different. We are going to use Divi’s Gradient Options to spice up a normal text module section. Make it more playful, you know ?!

Here is, what it’s going to look like:


Creating The Layout

First of all, to follow this short tutorial, create a new page using the Divi Builder. Go ahead and create a new standard section with 1 row and 3 columns. Before wie fill in some modules, let’s do the settings for the 3 columns first.

Bring up the settings for the row and click on the first tab (content) within the settings pop up window. You should see the option for creating a background for each column (column 1 – 3). Take a look at the screenshot below to make sure you are on the same page …

Defining Divi’s Gradient Feature

For each column we are going to define a gradient. At the background options for Column 1, click on the gradient tab and hit the “+” sign to start with a new gradient. Go ahead and copy the following values for each column.

Background Column 1
Color 1: #e02b20
Color 2: rgba(224,43,32,0)
Gradient Type : linear
Direction : 190deg
Start: 40%
End: 40%

Background Column 2
Color 1: rgba(41,196,169,0)
Color 2: #29c4a9
Gradient Type : linear
Direction : 190deg
Start: 40%
End: 40%

Background Column 3
Color 1: #0c71c3
Color 2: rgba(12,113,195,0)
Gradient Type : linear
Direction : 170deg
Start: 40%
End: 40%

You got that ?

Within the row settings pop up window, change tab from content to design now and scroll down until you see settings for “spacing“. For each column, we enter a custom padding (top, bottom, left and right ) : 20 px , and hit Save & Exit.

Bring in the Text-Module

At first, only for the first column, create a new text module, put in a basic title and some blind copy. In the first tab (content) of the text module settings, also head down to the background settings and create a new solid color background (#ffffff / white).

On the second tab (design) within the text module settings, go to “spacing” and enter a custom padding (left, right, top and bottom) : 20px .

Duplicate the Content

For sake of saving some time, copy and paste the first text module and shift it over for column 2 and 3. We have 3 text modules now with the same text and settings.

Last Setting

So we can make this 3 text modules a little bit more viewable we are going to make the background color of the entire section a subtle grey. Bring up the section settings and create a new background color with #e5e5e5 .

You did it !

Now save your page and preview the results. Pretty easy, huh ? If you got stuck somewhere during this instructions, don’t hesitate to write us here in the comment section or on facebook.com/teqme . Cheers !