How to Add Heading Animation in Elementor?

Updated on July 11, 2024 by Editorial Team
Table Of Content

Adding an animated headline in Elementor can help you grab the visitor’s attention easily. Not only does it make your website more visually appealing, but it also adds an element of interactivity and engagement for your visitors. 

With the Heading Animation widget from The Plus Addons for Elementor, you can easily add different types of animation to text in Elementor.

Check the Live Widget Demo

Required Setup

Learn via Video Tutorial:

How to Activate the Heading Animation Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save.

Heading animation activate how to add heading animation in elementor? From the plus addons for elementor

Key Features

  • Multiple Animation Styles – You can choose from multiple animation styles.

How to Add an Animated Headline in Elementor?

Add the Heading Animation widget from The Plus Addons for Elementor to the page. 

From the Animation Style dropdown, you have to select an animation style. 

Here you’ll find 6 pre-defined animation styles. 

Style 1 

This will create a typing animation effect.

Heading animation typing effect demo how to add heading animation in elementor? From the plus addons for elementor

Style 2 

This will create a flipping text effect.

Heading animation flipping effect demo how to add heading animation in elementor? From the plus addons for elementor

Style 3 

This will create a zoom-in text effect.

Style 3 demo how to add heading animation in elementor? From the plus addons for elementor

Style 4 

This will create a text underline animation effect.

Style 4 demo how to add heading animation in elementor? From the plus addons for elementor

Style 5 

This will create a slide-in text animation effect.

Style 5 demo how to add heading animation in elementor? From the plus addons for elementor

Style 6 

This will create a text scale-down and scale-up animation effect.

Style 6 demo how to add heading animation in elementor? From the plus addons for elementor

Select the style as per your requirements.

Heading animation content how to add heading animation in elementor? From the plus addons for elementor

In the Prefix Text field, you can add a text before the animated text.

Then in the Animated Text section, you have to add the texts you want to animate. You can add multiple texts by adding one text in each line.

From the Animated Text Tag dropdown, you can set the HTML tag for the text.

In the Postfix Text field, you can add a text after the animated text.

From the Alignment section, you can align the text for different responsive devices.

How to Style the Heading Animation Widget?

To style the Heading Animation widget, you’ll find all the options under the Style tab.

Prefix and Postfix – From here, you can manage the typography and color of the prefix and postfix texts.

Heading animation style how to add heading animation in elementor? From the plus addons for elementor

Animated Text – From here, you can manage the typography, color and background color of the animated text.

On Scroll View Animation –  This is our global extension available for all our widgets, this adds scrolling animation as the widget comes in the viewport. You can learn more about this from here.

Learn more about On Scroll View Animation

Advanced options remain common for all our widget, you can explore all its options from here.

View Advanced Tab Tutorial

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X