Advanced Gradient Heading
The Advanced Gradient Heading module shows a heading with a gradient fill on the text. Its one job is a gradient title.
How to add it
- Open the page in the Divi 5 Visual Builder.
- Add a module to a row and search for Advanced Gradient Heading.
- Type your title under Content > Text.
Content tab
Text
- Title Text: use
<br>for a line break.
Link
- Use Link: off by default. Wraps the title in an
<a>tag. - Link URL.
- Link Options: Open in new window and Add nofollow.
Design tab
Gradient
- Gradient Type: Linear (default) or Radial.
- Primary Color: default #5b2cff.
- Primary Color Location: default 11.
- Secondary Color: default #e02b20.
- Secondary Color Location: default 37.
- Gradient Angle: default 130, range 0 to 360.
- Radial Position: Center Center (default), plus Bottom Center, Bottom Left, Bottom Right, Center Left, Center Right, Top Center, Top Left, Top Right.
Text
- Title font settings.
FAQ
Does it work in Divi 4?
Yes. A Divi 4 version exists (shortcode torq_gradient_heading). This page describes the Divi 5 settings.
How do I set the heading level?
Use the heading level control in the Title font settings under Design > Text. If none is set, the module renders an h1.
How is the gradient drawn?
The gradient is applied as a background image and clipped to the text with background-clip: text.
Can I use more than two colors?
The module has a primary and a secondary color, so it is a two-color gradient.