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.
Share on email
Share on whatsapp
Share on linkedin
Share on reddit
Share on facebook
Share on twitter

Get WordPress tutorials and online marketing tips delivered to your digital door

My articles are FREE to read. But when you buy through my referral links I earn commission. You don't pay more but I get rewarded for my hard work. It's like a salesman in a shop showing you the goods. Thanks for your support. I really appreciate it.
Table of Contents

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.
    • This is the self-hosted version of WordPress, not wordpress.com.
  • 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.

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. This will make one color dominant.

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.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Scroll to Top
I won't spam you and you can easily unsubscribe any time you wish.

Get excellent WordPress & marketing tutorials delivered via email