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.
You’ll need some tools and you’ll need to set up your page correctly.
These are the tools you’ll need to add gradient colors to your headings in 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.
- 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.
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.
But you also need the right setting activated.
Follow these steps to ensure the gradient heading module is active.
Now you can add gradients to your headings in WordPress.
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.
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…
Add the gradient effect
To add a gradient couldn’t be easier. Follow along…
Once you flip the switch to enable gradient text, your text should immediately sport two new colors.
You can make angle, color, location and gradient type adjustments to your gradient effect.
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).
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.
Now you’ve set your two colors for the gradient.
Let’s change the 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.
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.
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.
Elementor is a great page builder, but adding Piotnet takes it a few notches up.