How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

December 29, 2018

No matter what kind of website you’re creating, highlighting copy and content remains one of the top priorities. With Divi’s built-in options, there are a ton of ways to get there. One of the possibilities you have is applying a gradient text color to your copy. This is a great approach for adding color to your website, especially if you’re keeping the rest of your website clean and minimalistic. It helps to balance whitespace and it gives your website a breath of fresh air.

In this tutorial, we’re going to show you how to give your text a gradient color using Divi’s built-in options only.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a look at the outcome on different screen sizes. We’ll show you how to make this work using both a light and dark color palette. Once you get the approach, you can create all kinds of designs with gradient text.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only Theme Builder Layout

Approach

1. Understanding Divi Blend Modes

Blend modes work exactly the way you’re used to them in image editing software. They’re based upon layer structures. Concretely, that means a blend mode in Divi will follow a certain hierarchy:

  • A blend mode applied to a module will blend the module + column below it
  • A blend mode applied to a column will blend the column + row below it
  • A blend mode applied to a row will blend the row + section below it

For this tutorial, it’s necessary to understand that a blend mode applied to a module will blend with the column below it. By giving the column a gradient background and the module in question a blend mode, we can manage to achieve gradient-colored text.

2. Choosing Between an Entirely Dark or Light Color Palette

To make this work, you’ll either have to use an entirely dark or light color palette. The blend modes we’re using, lighten and darken, will only deliver the desired outcome when you’re either using an entirely black or white color. When using other colors, the effect we’ve applied will kind of show through.

3. Removing All Gutter Width Between Columns & Modules

As mentioned in the first part of the approach, we’re going to use column gradient backgrounds. To make sure this gradient background doesn’t show up anywhere we don’t want to, we’re going to remove all the gutter width. By doing so, we’ll make sure that there’s no default custom margin being applied between modules. To make up for space we lose, we’ll manually add custom padding instead.

4. Using Padding Instead of Changing an Element’s Width

And to adjust the width of a design element, we’ll use custom left and right padding. Changing the width in the sizing settings would change the width of the entire module and would allow the column gradient background to show up on the left and right side, which is something we don’t want.

Let’s Start Creating!

Add New Section

Background Color

Let’s get started! Add a regular section to a new or existing page and give it the right background color (depending on if you want to recreate the light or dark layout).

  • Background Color: #ffffff (Light Layout), #000000 (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-1 Theme Builder Layout

Spacing

Continue by adding some custom padding to the section.

  • Top Padding: 215px
  • Bottom Padding: 215px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-2 Theme Builder Layout

Add Row #1

Column Structure

Then, add a new row using the following column structure:

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-3 Theme Builder Layout

Column 2 Gradient Background

Add a gradient background to the second column of the row. This is where we’ll place the title Text Module in the next part of the tutorial.

  • Color 1: #c700ff
  • Color 2: #32f1ff
  • Column 2 Gradient Direction: 150deg
  • Column 2 Start Position: 20%
  • Column 2 End Position: 60%

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-4 Theme Builder Layout

Sizing

Change the sizing settings as well.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-5 Theme Builder Layout

Spacing

And modify the spacing settings.

  • Top Margin: 50px
  • Bottom Margin: 50px
  • Left Padding: 50px
  • Right Padding: 50px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-6 Theme Builder Layout

Add Text Module to Column 2

Add Content

Now go ahead and add a Text Module to the second column of the row you’ve added.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-7 Theme Builder Layout

Background Color

Give your module the correct background, depending on the type of layout you want to recreate.

  • Background Color: #ffffff (Light Layout), #000000 (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-8 Theme Builder Layout

Heading Text Settings

Change the heading text settings next.

  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #000000 (Light Layout), #ffffff (Dark Layout)
  • Heading 2 Text Size: 67px (Desktop), 50px (Tablet), 40px (Phone)
  • Heading 2 Letter Spacing: -2px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-9 Theme Builder Layout

Spacing

And add some bottom padding. Remember, we’re using bottom padding instead of margin to make sure the column gradient background doesn’t show.

  • Bottom Padding: 50px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-10 Theme Builder Layout

Blend Mode

To make the column’s gradient background apply to the module you’ve added, apply a blend mode in the filters settings.

  • Blend Mode: Lighten (Light Layout), Darken (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-11 Theme Builder Layout

Add Divider Module to Row

Visibility

Second and last module we need in this row is a Divider Module.

  • Show Divider: Yes

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-12 Theme Builder Layout

Background Color

Change the background color according to the type of layout you’re recreating.

  • Background Color: #ffffff (Light Layout), #000000 (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-13 Theme Builder Layout

Spacing

To reduce the width of the divider, we’re going to add some custom padding to the left and right side.

  • Left Padding: 250px
  • Right Padding: 250px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-14 Theme Builder Layout

Blend Mode

Again, add a blend mode to make the column gradient background show.

  • Blend Mode: Lighten (Light Layout), Darken (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-15 Theme Builder Layout

Add Row #2

Column Structure

On to the next row! Use the following column structure:

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-16 Theme Builder Layout

Column 1 Gradient Background

Continue by adding a gradient background to the first column.

  • Color 1: #c700ff
  • Color 2: #32f1ff
  • Column 1 Gradient Type: Linear
  • Column 1 Gradient Direction: 105deg
  • Column 1 Start Position: 20%
  • Column 1 End Position: 50%

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-17 Theme Builder Layout

Column 2 Gradient Background

We’re using a gradient background for the second column as well.

  • Color 1: #32f1ff
  • Color 2: #c700ff
  • Column 2 Gradient Type: Linear
  • Column 2 Gradient Direction: 90deg
  • Column 2 Start Position: 40%
  • Column 2 End Position: 60%

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-18 Theme Builder Layout

Column 3 Gradient Background

Same goes for the third column.

  • Color 1: #c700ff
  • Color 2: #32f1ff
  • Column 3 Gradient Type: Linear
  • Column 3 Gradient Direction: 85deg
  • Column 3 Start Position: 20%
  • Column 3 End Position: 50%

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-19 Theme Builder Layout

Sizing

Change the sizing settings next.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-20 Theme Builder Layout

Spacing

And add some custom left and right padding.

  • Left Padding: 100px (Desktop & Tablet), 50px (Phone)
  • Right Padding: 100px (Desktop & Tablet), 50px (Phone)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-21 Theme Builder Layout

Add Blurb Module to Column 1

Add Content

Time to start adding modules! Add a Blurb Module to column 1 with a title of choice. Later on the post, we’ll use a separate module to add the body content.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-22 Theme Builder Layout

Choose Icon

Select an icon of choice.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-23 Theme Builder Layout

Background Color

And modify the Blurb Module’s background color.

  • Background Color: #ffffff (Light Layout), #000000 (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-24 Theme Builder Layout

Icon Settings

Continue by going to the icon settings and making some changes there.

  • Icon Color: #000000 (Light Layout), #ffffff (Dark Layout)
  • Image/Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 51px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-25 Theme Builder Layout

Title Text Settings

Change the title text settings as well.

  • Title Font Weight: Bold
  • Title Text Alignment: Center
  • Title Text Color: #000000 (Light Layout), #ffffff (Dark Layout)
  • Title Letter Spacing: -1px
  • Title Line Height: 1.2em

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-26 Theme Builder Layout

Spacing

Then, go to the spacing settings and add some custom margin and padding values.

  • Bottom Margin: 5px
  • Top Padding: 50px
  • Bottom Padding: 50px
  • Left Padding: 50px
  • Right Padding: 50px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-27 Theme Builder Layout

Blend Mode

Last but not least, apply the correct blend mode.

  • Blend Mode: Lighten (Light Layout), Darken (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-28 Theme Builder Layout

Add Text Module to Column 1

Add Content

We’re separating the title and body of the Blurb Module into two modules to make the blend mode apply to the icon and title only. Go ahead and add a Text Module right below the Blurb Module containing the body content.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-29 Theme Builder Layout

Background Color

Next, add a background color.

  • Background Color: #ffffff (Light Layout), #0c0c0c (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-30 Theme Builder Layout

Text Settings

And change the text settings.

  • Text Letter Spacing: 0.5px
  • Text Line Height: 2.3em
  • Text Orientation: Justify
  • Text Color: Dark (Light Layout), Light (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-31 Theme Builder Layout

Spacing

To give the module some space to breathe, add some custom padding values in the spacing settings.

  • Top Padding: 100px
  • Bottom Padding: 100px
  • Left Padding: 70px
  • Right Padding: 70px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-32 Theme Builder Layout

Box Shadow

And top it off, add a subtle box shadow as well.

  • Box Shadow Blur Strength: 56px
  • Box Shadow Spread Strength: -12px
  • Shadow Color: rgba(0,0,0,0.3)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-33 Theme Builder Layout

Clone Blurb Module & Text Module Twice + Place in Remaining Columns

Last but not least, clone both modules you can find in column 1 and place the duplicates in the two remaining columns. Change the content accordingly as well.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-34 Theme Builder Layout

Preview

Now that we’ve gone through all the steps, let’s take a final look at the end result.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only Theme Builder Layout

Final Thoughts

In this post, we’ve shown you how to create gradient text on your website using Divi’s built-in options only. To make this tutorial work, and to be able to practice the approach on other designs as well, it’s necessary you go through the approach section of this post and understand it while recreating the design. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Share this article:
 

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

10-divi-ui-kits-for-your-web-design-toolkit Theme Builder Layout

10 Divi UI Kits for Your Web Design Toolkit

Divi UI kits are a different type of layout. They can include full pages, but rather than only providing a full-page design they mostly focus on one thing, such as headers, footers, sections, and specific modules. They often provide more detail in styling for a module...

inserting-special-characters-into-the-block-editor Theme Builder Layout

Inserting Special Characters Into the Block Editor

For users of the Classic WordPress editor who often needed to insert special characters into their posts, life was once simple. Click the “Ω” button in the editor to open a modal with a list of characters not found on a standard keyboard. The user then only needed to...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.