Would you like to find out how to create a gradient title with Elementor?
When creating a web page or a template with Elementor, you can do a little experiment with the title element to make the page you create stand out. One of the experiments you can try is to add a gradient effect to the title element.
This article will show you how to get there.
You can also read: How to create a two-color title in Elementor
Elementor's native Title block does not offer any options to set a gradient effect. You can only use solid color for title text. But you can add custom CSS to add gradient effect to title element in Elementor using custom CSS which is only available on Elementor pro.
To do this we will offer you two methods: If you have the pro version and you are comfortable with CSS, use the first method. But if you like to use WordPress plugins the second method will be perfect.
Method 1: Add gradient effect on title element with custom CSS
Assuming you've upgraded your Elementor to the pro version, create a new page / template and edit it with Elementor. You can also edit an existing page or template.
Add the Title widget to the canvas area by dragging and dropping the Title element.
In the block Title under the tab Content, select a title level in the option HTML tag. You can use any level of title. You will need this as a CSS selector.
Go to the tab Advanced and open the block Custom CSS and paste the following CSS code.
selector h2 {background-image: linear-gradient (to right, # 463f64, # 463f64, # e2285c, # e2285c); -webkit-background-clip: text; display: inline-block; padding: 14px; -webkit-text-fill-color: # 00000000; }
Make sure to match the selector with the level of the title you selected in the previous step.
You can change the colors by pasting the hexadecimal code of the colors you like on the property background-image.
Or, you can also use the following code to create a gradient title with more colors on the gradient.
selector .elementor-heading-title {background: linear-gradient (90deg, red, blue, black); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Method 2: Create a gradient title in Elementor with a plugin
If adding CSS sounds scary to you, there is an easier way to create a gradient title in Elementor: by installing an add-on extension. One extension that allows you to create a gradient title is happy addons.
Discover How to install (add) a plugin on WordPress
Happy Addons is a freemium plugin and the element to create a gradient title (called Gradient Heading) is available on the free version. You can define the type of gradient (radial or linear), the position of the gradient and the location.
The Title element also offers the same gradient adjustment options as Happy Addons.
Here is! You just created a gradient title on Elementor.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. 404 Error Page Redirect to Homepage or Custom Page
Here is one of the best ways to easily add a 404 error page that will redirect the visitor to the homepage or custom page, after enabling this WordPress Plugin.
All 404 error pages will be redirected to the homepage or a custom URL. By using this WordPress Plugin, you will allow Google to reduce the pagerank of your website if it has many 404 error pages.
See also How to fix 413 error on WordPress
Ce WordPress Plugin does not just do redirection but it can also be a suitable solution to improve the ranking of your website in search engine results.
Download | Demo | Web hosting
2. WOOF
WOOF is a powerful premium WooCommerce product filtering plugin that extends its functionality to allow your online store users to search by categories, custom product attributes, by keywords and by personalized prices.
It has tons of professional and premium features and without a doubt, this will be the one that strikes you the most, if you try them all. It will improve the product search on your online store, with exceptional ease of use.
Download | Demo | Web hosting
3. Contact Form 7 Success Redirect
Contact Form 7 Success Redirect is an extension of the WordPress Contact Form 7 plugin that allows you to redirect a visitor or a user to a page after the submission of his contact.
It has been designed to make the form more user-friendly when the form submission process results in redirecting to the page chosen by the admin. It is extremely easy to configure. You can do this by selecting a page from the existing pages of your dashboard or by providing a Custom URL redirection.
So much to see... 8 WordPress plugins to improve the SEO of your blog
Each form will have its own configuration. Thus, each successful redirection can be defined in a unique way.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- Testimonials: How to increase the confidence of your visitors
- How To Fix A Website That Won't Update Instantly
- 7 WordPress plugins to embed a Google Maps on your website
- 10 WooCommerce plugins to create dynamic pricing
Conclusion
So ! That's it for this article. Now you will know how to create a degraded title on WordPress with the Elementor plugin. Leave us your Comments and remarks if you have any difficulty in doing so.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on WordPress blog creation.
Do not hesitate to share with your friends on your favorite social networks.
...
