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 Module. Using 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.

Preview

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!