How To Add A Color Gradient To Your Headings In WordPress

It's a subtle effect, but a gradient colored heading might just be what your web pages need to make them pop.
Categories: Tags: , ,
Get Piotnet for Elementor
Our articles are FREE to read. But when you buy through our referral links we earn commission. You don't pay more but we get rewarded for our hard work. It's like a salesman in a shop showing you the goods. Thanks for your support.

It’s easy to add a color gradient to your headings in WordPress if you’re using the Elementor page builder.

Follow along and you’ll have gradient headings in no time.

The setup

You’ll need some tools and you’ll need to set up your page correctly.

The tools

These are the tools you’ll need to add gradient colors to your headings in WordPress.

  • WordPress.
  • Page Builder Framework.
    • You don’t need Page Builder Framework per se, but I strongly recommend you get it. It’s a fantastic WordPress theme built to be used with page builders like Elementor and Beaver Builder.
  • Elementor.
    • You’ll need the free version of Elementor for this tutorial.
  • The PAFE Piotnet plugin.
    • This plugin enables you to add gradient colors to your headings.

The page

You’ll need to activate Elementor for your page or post if you’d like to use Piotnet for adding gradient headings.

You can read my post on how to activate Elementor.

The plugin

Before you continue, the PAFE Piotnet plugin must be installed. You can read my post about installing a WordPress plugin if you’re not sure how to do it.

But you also need the right setting activated.

Follow these steps to ensure the gradient heading module is active.

Inside Your WordPress Dashboard, Click On Piotnet Addons In The Sidebar

Inside Your WordPress Dashboard, Click On Piotnet Addons In The Sidebar.

Ensure The Gradient Text Option Is Active

Ensure The Gradient Text Option Is Active.

Now you can add gradients to your headings in WordPress.

The result

You can head over to my test site to see the gradient text in action.

Let’s get started with adding a gradient heading.

Add the heading

Let’s go through the steps of adding a gradient to a heading.

Drag A Headline Into The Section On The Page That Reads, Drag Widget Here

Drag A Heading Into The Section On The Page That Reads, Drag Widget Here.

This Adds A Headline With The Default Text, Add Your Heading Text Here

This Adds A Heading With The Default Text, Add Your Heading Text Here.

This adds an H2 heading element to the page. Whether that’s correct is debatable. But this is not a post about SEO so we won’t worry about that now.

The next step is optional…

Change The Text To Something More Sensible

Change The Text To Something More Sensible.

Add the gradient effect

To add a gradient couldn’t be easier. Follow along…

Make Sure The Heading Element Is Selected

Make Sure The Heading Element Is Selected.

In The Sidebar, Click On The Style Tab

In The Sidebar, Click On The Style Tab.

Click On The Tab That Reads, Pafe Gradient Text

Click On The Tab That Reads, PAFE Gradient Text.

The Gradient Text Effect Is Off By Default. Flip The Switch To Activate It

The Gradient Text Effect Is Off By Default. Flip The Switch To Activate It.

Once you flip the switch to enable gradient text, your text should immediately sport two new colors.

The Heading With A Gradient Effect

The Heading With A Gradient Effect.

Adjust

You can make angle, color, location and gradient type adjustments to your gradient effect.

Angle

The default angle for a new gradient is vertical at a 180 degrees.

You can rotate the angle along a 360 degree axis in 10 degree increments, but for the purpose of this post we’ll make it vertical (270 degrees).

In The Sidebar, Click The Up Or Down Arrow Under The Angle Setting Until You Reach An Angle Of 270 Degrees

In The Sidebar, Click The Up Or Down Arrow Under The Angle Setting Until You Reach An Angle Of 270 Degrees.

The Gradient Now Runs From Left To Right

The Gradient Now Runs From Left To Right.

Color

Changing the color is easy.

How you do it depends on whether you’ve set up global colors or not.

I’ve not set up global colors on my test site so I’ll add new colors to this heading manually.

Click On The Color Icon Of The Top Color

Click On The Color Icon For The Top Color.

Adjust The Slider And Color Picker Or Simply Paste A New Hex Code Into The Box To Change The Color

Adjust The Slider And Color Picker Or Simply Paste A New Hex Code Into The Box To Change The Color.

Now Adjust The Second Color In The Same Way

Now Adjust The Second Color In The Same Way.

Now you’ve set your two colors for the gradient.

Let’s change the location.

Location

You can choose where you want the color transition to be positioned in your heading. You can use this setting to make one color dominant, should you wish.

Both colors come with a location slider. This enables you to set the hardness of the transition too.

The default location for the first color is 0, while the default location for the second color is 100.

Let’s add a hard transition roughly in the middle of the heading to make the transition clear.

Set The Location For Both Colors To 71. In This Instance It Causes The Gradient To Have A Hard Transition Effect Between Words

Set The Location For Both Colors To 71. In This Instance It Causes The Gradient To Have A Hard Transition Effect Between The Words, gradient And to.

Playing around with the two sliders’ position will cause your gradient to grow or shrink and allow you to choose where the transition is positioned.

Type

The PAFE Piotnet plugin’s gradient effect can be set to linear or radial.

The above tutorial went through the steps to add a linear gradient.

Changing the type to radial will give the heading a central color that flows into a secondary color on the outside.

In all honesty, I don’t think it’s a good idea to add a radial gradient to your heading if your heading font is small. If your heading is a thick font and you display it large on your page it might work. But the linear gradient looks much better.

You Can Choose Whether You'd Like A Linear Or Radial Gradient

You Can Choose Whether You’d Like A Linear Or Radial Gradient.

Conclusion

Elementor is a great page builder, but adding Piotnet takes it a few notches up.

In my opinion, Piotnet makes the best WordPress form builder. These design extras like heading gradients only add more reason for you to get the PAFE Piotnet plugin for Elementor.

magnifiercrosschevron-down