How to Create Attention-Grabbing Headings in Divi using Text Notation Module

Would you like to grab user attention to your content? To grab the user’s attention you’ll need something really attractive. That’s why we’ve recently added a new Module to our Amazing Module list called Divi Text Notation ModuleUsing this Module you can easily add a Heading with Highlighted Text. We don’t need to do any coding, you can easily create it by doing a few settings. That’s what we’re going to learn in this very short Tutorial.


That looks really attractive, so now let’s see how to implement this same thing on your site as well.

Let’s create this

First of all, you’ll need to enable the Divi Builder and choose the location on the page where you want to show this Animated Heading Text. After choosing your location you’ll need to insert Module as Supreme Text Notation. We’re using the Holistic Healer Landing Page Layout in our Example.

So insert the Module

Now you’ll need to add Content while you’re in the Content Tab

Now you can scroll down a bit to Notation Settings Panel and this is where you can do so much. Firstly You’ll need to choose the Animation Type from 7 Different Styles. For our example, we’ve chosen the Box Style.

You can also change the Color of the Notation Animation and play with other settings as well:


  • Color – You can change the color of the animation here to whatever you want. we’ve added this color #665540
  • Stroke Width – Change the width of the annotation Stroke here. We’ve changed it 3.
  • Iteration – By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right, and then back from right to left. Setting this property can let you configure the number of iterations. We’ve changed this to 5
  • Animate in Viewport – Here you can set a custom value for the Animation to play at a specific Viewport. We’ve changed it to 100% because it’s in Hero Section.
  • Delay – Add a delay to the Notation Effect to start after the time you’ll set. We’ve added a 500ms delay for the animation to start.

Now you can move on to the Design Tab and play around with Designing the Notation Text and Before/After Text.

Changing the HTML Tag

If you prefer to change the Heading Tag from Default H1 to something your own like H3 or Other you can do so in the Heading Settings Panel you can even change the tag to Paragraph, Span, and Div If you really want to. We’d like to stick with H1 Because it’s on our Hero Section.

Now you can move to design the actual Text -> Notation, Before and After or Main Text Settings.

Main Text Settings

In the Main Text Settings, all the changes you’ll make will affect the Before/After and Notation Text. We’ve changed the Text Size and Font and others. Here are the changes we made in the Main Text Settings:

  • Main Font – Abel
  • Main Font Weight – Bold
  • Main Text Size – 70px
  • Text Alignment – Center

Now If you want to make changes to each Specific Text like If you want to have a different font for the Notation Text you can go to Notation Text Panel and make your own changes to Notation text there. Same goes for Before and After Text, you can also design them separately by going to Before or After Text Panel and make your changes there.

So that’s it, we’ve just created a very nice looking Attention-Grabbing Heading Text for our Hero Section, the same technique you can apply to create more appealing Heading Text in Divi.

Final Result

So that’s it for today’s short and Fun Tutorial, we hope you found it helpful and you may also get more creative by creating more meaningful Headings for your own site. Let us know what you think about this beautiful thing to add to your site in the comment section below.
Have a great day!

How to access the Text Notation Module

To use the Text Notation Module, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Text Notation Module in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 20 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.


Submit a Comment

Your email address will not be published. Required fields are marked *

Divi Supreme
Divi 5 is coming soon, and we are diligently converting all our Modules to the Divi 5 Infrastructure. Take a look at a Quick Demo →
Divi 5 is coming soon. Take a quick look at a demo of our modules in Divi 5.