Advanced Heading (Divi)

A heading for Divi 5 in three parts — before, highlighted and after text — each filled with a colour, a gradient (14 palettes, linear, radial or conic, three colours), an image or an outline. Add highlight marks, a sub heading, an icon, separators, a description and a giant background word, animate the gradients and reveal the heading as it scrolls into view. Each example is labelled with the settings that make it.

1. The default heading

Sub heading above · before text · highlighted text in the Indigo → Pink gradient · after text. Every part is its own text field with its own fill and Design-tab group.

2. Fourteen gradient palettes

Highlighted Text → Fill: Gradient · Palette · Gradient Type. Aurora, Gold and Rainbow use three colours; Custom lets you pick two or three colours and the angle.

Palette: Aurora (3 colours)

Palette: Rainbow · conic

Palette: Forest

Palette: Graphite

3. Custom colours on every part

Before, Highlighted and After each have their own fill. Here all three are gradients: custom colours, a middle colour, and different angles.

4. Animated gradients and hover effects

Effects → Gradient Animation (flow, shine, colour cycle, duration, reverse) and Hover Effect (shift the gradient, glow, lift). Hover the headings on the right.

Shine sweep

Hover: glow + lift (two modules)

5. Image, outline and stroke fills

Fill: Image inside the letters (from the Media Library, panning with the Flow animation) · Fill: Outline only · a gradient with an outline · a part nudged up with Vertical Offset.

Outline after text · 2 px stroke

Blend mode: multiply over a background word

6. Ten highlight marks

Effects → Highlight Mark on the highlighted text, shown always, drawn on scroll or drawn on hover. Highlight Mark design: colour, thickness, offset, behind or over the text.

Mark: Thick underline

Mark: Filled pill

Mark: Hand-drawn circle · drawn when scrolled into view

7. Eleven separators in five positions

Separator: style · position (below, above, at the very bottom, both sides, vertical bar). Separator design: colour, second colour, length, thickness, rounded ends, spacing, icon size.

Separator: Gradient bar · at the bottom

Separator: Zigzag

Separator: Icon between lines

Separator: star between lines, sides

8. Sub heading, icon, layout and background word

Sub Heading above, below or sideways, with lines · Icon above or inline · Stacked layout with Space Between Parts · Background Text behind (fill or outline, offset, rotate, opacity) · per-device alignment.

Icon above · sub heading below with a line

Background word, outline, rotated

Alignment per device: right on desktop, centre on tablets, left on phones

9. Scroll reveals

Effects → Reveal When Scrolled Into View: fade up, rise from a mask part by part, blur into focus, letter spacing closes in. Effect Speed sets the pace; the circle and brush marks wait for the reveal.

Mask, part by part · circle drawn on view

Letter spacing closes in

10. A dark hero, styled from the Design tab

Heading font 64 px (42 px on phones) · sub heading in a pill (Sub Heading: background, padding, radius) · before text in a light weight · background word outline · animated gradient · marker drawn on view · gradient separator at the bottom.