NewThe Supreme Bundle: every Divi Supreme plugin, 31% less than buying separately.See what’s inside →

Text Notation module

Divi Text Notation draws on your headlines.

Text Notation for Divi 5. Hand-drawn underlines, circles and highlights that sketch themselves in when the heading scrolls into view.

Build pages that
convert
Faster
than custom code
No more
plugin bloat

What is the Divi Text Notation module?

Text Notation is a Divi 5 module in Divi Supreme Pro that draws a hand-made mark on part of a heading. Use it to underline a key word in a hero, circle a price, highlight an offer, strike through an old price or bracket a quote.

Split the heading into Before Text, Notation Text and After Text, and only the middle part gets the mark. Choose from seven types: Underline, Box, Circle, Highlight, Strike Through, Crossed Off and Bracket. Then set the colour, stroke width and number of iterations, and decide how much of the heading must be in view and how long to wait before it draws.

notation types

max iterations

default viewport trigger

HTML tags

Start from a Text Notation recipe.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Try every Text Notation setting.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Everything Text Notation can do.

Seven notation types

Underline, Box, Circle, Highlight, Strike Through, Crossed Off and Bracket.

Mark only what matters

Before Text and After Text stay plain; only the Notation Text is drawn on.

Bracket styles

Left To Right, Right To Left, Top To Bottom or Bottom To Top.

Stroke and iterations

Stroke Width from 1 to 29 and up to 5 passes for a sketchier look.

Starts in view

Animate in Viewport sets how much must be visible, 80% by default.

Delay

Wait up to 5000ms before the mark draws, to time it with other animations.

SEO-friendly tags

Output H1 to H6, Div, Span or P, with separate styling for each part.

Dynamic content

Fill any of the three texts from a post title, custom field and more.

Text Notation documentation

Step-by-step guide to notation types, brackets, stroke, iterations and viewport timing.

Questions about Text Notation.

How do I underline one word in a Divi heading?

Add Text Notation, put the words before it in Before Text, the word itself in Notation Text and the rest in After Text. Underline is the default Type, so only the Notation Text gets the hand-drawn line.

Which notation types are there?

Seven: Underline, Box, Circle, Highlight, Strike Through, Crossed Off and Bracket. With Bracket you also choose a Bracket Style: Left To Right, Right To Left, Top To Bottom or Bottom To Top.

How do I make the line thicker or sketchier?

Raise Stroke Width (1 to 29, default 1) for a thicker line and Iterations (1 to 5, default 2) to draw it more times for a rougher look.

When does the animation start?

When the heading scrolls into view. Animate in Viewport sets how much of it must be visible, 80% by default, and Delay adds a wait of up to 5000ms (0ms by default).

Which HTML tag does the heading use?

H1 by default. Change it with Heading HTML Tag under Heading Settings: H1 to H6, Div, Span or P.

Can I style the before, notation and after text separately?

Yes. Before Text, Notation Text and After Text each have their own font, Background Color and Display (Inline Block, Inline or Block) settings in the Design tab.

What colour is the notation by default?

#7ebec5. Change it with Color under Notation Settings.

Can the text come from dynamic content?

Yes. Before Text, Notation Text and After Text all support dynamic content.

Next module, A to Z

Text Path Module

Related modules

Mask Text Module

Image or video inside text.

Text Badges Module

Headings with a small badge.

Typing Effect Module

Text that types itself.

4.9 out of 5

Rated 4.9 by Divi designers on Trustpilot. Running on 350,000+ sites.

Make the key word impossible to miss.

Text Notation comes with 70+ Divi 5 modules and 16 extensions in Divi Supreme Pro.

Divi Supreme