1. Home
  2. Docs
  3. Creative Elements
  4. Gradient Heading

Gradient Heading EA Element

Gradient Heading element allows you to create some stunning heading with gradient effects in it. Here in this tutorial, you’re going to learn how to use the Gradient Heading element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Gradient Heading Element

 

 

»Content

 

Content Settings

⇒Title: Type your gradient heading title.

⇒Link: Want to add a link to your heading? Then write down the link here and click the cog to set the link to either open in a new window or to add rel=nofollow to the link.

⇒Title HTML tag: Define the HTML tag for the heading text. Respectively h1, h2, h3, h4, h5 & h6 from bigger to smaller in size.

⇒Alignment: Set the alignment of your gradient heading.

 


»Style

 

Title

⇒Text Color: Set the text color type either Classic or Gradient. And then customize the text style according to your preference.

 

⇒Classic Color Type: The following options are available for the classic text color settings:

→Color: Add a custom solid color to the title text of the gradient heading.

 

⇒Gradient Color Type: The following options are available for the gradient text color settings:

→Color: Add a custom gradient color to the title text of the gradient heading.

→Location: Set the location for the color to be spread.

→Second Color: Add the second gradient color to the title text of the gradient heading.

→Location: Set the location for the second color to be spread.

→Type: Set the type of gradient color either linear or radial gradient.

→Angle: Customize the gradient angle for the heading.

 

⇒Typography: Set the typography options for the heading.

⇒Text Shadow: Add the text-shadow to the heading text. Customize the shadow color, blur radius, horizontal and vertical shadow manually.

⇒Blend Mode: Set the blend mode for the gradient heading text.


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Gradient Heading Element.


Was this article helpful to you? Yes No

How can we help?