---
title: "How to Add Heading Animation in Elementor?"
url: https://theplusaddons.com/docs/add-animated-headings-in-elementor/
date: 2024-06-14
modified: 2026-04-09
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Animated-Headings-In-Elementor-1-1024x536.jpg
word_count: 486
---

# How to Add Heading Animation in Elementor?

## Key Takeaways

- The Plus Addons for Elementor includes a Heading Animation widget that offers 6 pre-defined animation styles.
- Users can activate the Heading Animation widget by navigating to The Plus Addons u2192 Widgets and turning on the toggle.
- The Heading Animation widget allows users to add multiple animated texts, each on a separate line.

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/heading-animation)

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- Make sure the Heading Animation widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Heading Animation and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=LTgDD_v8ioA

## How to Activate the Heading Animation Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/06/heading-animation.png)

## 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.

> *Note: By clicking on the **Import Presets** button, you can import a ready-made design and customize it as per your requirements.*

From the **Animation Style** section, 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.](https://theplusaddons.com/docs/add-text-typing-effect-in-elementor/)

![](https://theplusaddons.com/wp-content/uploads/2024/06/heading-animation-typing-effect-demo.gif)

### Style 2 

This will [create a flipping text effect.](https://theplusaddons.com/docs/add-a-flipping-text-effect-in-elementor/)

![](https://theplusaddons.com/wp-content/uploads/2024/06/heading-animation-flipping-effect-demo.gif)

### Style 3 

This will create a zoom-in text effect.

![](https://theplusaddons.com/wp-content/uploads/2024/06/style-3-demo.gif)

### Style 4 

This will create a text underline animation effect.

![](https://theplusaddons.com/wp-content/uploads/2024/06/style-4-demo.gif)

### Style 5 

This will create a slide-in text animation effect.

![](https://theplusaddons.com/wp-content/uploads/2024/06/style-5-demo.gif)

### Style 6 

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

![](https://theplusaddons.com/wp-content/uploads/2024/06/style-6-demo.gif)

Select the style as per your requirements.

![](https://theplusaddons.com/wp-content/uploads/2024/06/heading-animation-content-new.gif)

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.

![](https://theplusaddons.com/wp-content/uploads/2024/06/heading-animation-style.png)

**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](https://theplusaddons.com/docs//on-scroll-view-animation/)

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

[View Advanced Tab Tutorial](https://docs.posimyth.com/tpae/advanced-tab/?_gl=1*1ddxxa0*_ga*NDA4ODUyMjYwLjE3MDEyMzIxNzE.*_ga_WXCC3REEFQ*MTcxNjQ1OTY0My40MzcuMS4xNzE2NDU5NzMyLjYwLjAuMA..)

## Frequently Asked Questions

**Q: What if the Heading Animation widget is not showing up in Elementor?**
A: If the Heading Animation widget is not appearing, ensure that you have The Plus Addons for Elementor plugin installed and activated. Additionally, verify that the widget is activated by navigating to The Plus Addons u2192 Widgets and searching for Heading Animation. If it's not toggled on, it won't be available for use.

**Q: Can I use the Heading Animation widget for a typing effect?**
A: Yes, the Heading Animation widget from The Plus Addons for Elementor allows you to create a typing animation effect. This is one of the six pre-defined animation styles available. When you select Style 1, it will create a typing effect that can engage visitors and enhance the visual appeal of your website.

**Q: What is the best way to style the Heading Animation widget?**
A: To effectively style the Heading Animation widget, use the options under the Style tab. You can manage typography and color for prefix, postfix, and animated text. This customization is crucial for maintaining brand consistency and ensuring that the animated text aligns with your overall website design.

**Q: Are there any limitations when using the Heading Animation widget?**
A: While the Heading Animation widget offers multiple animation styles, it is essential to consider how these animations perform on different devices. Always check the alignment settings for responsive devices to ensure that the animations display correctly across various screen sizes.

**Q: How do I activate the Heading Animation widget in Elementor?**
A: To activate the Heading Animation widget, go to The Plus Addons u2192 Widgets in your WordPress dashboard. Search for the widget name and toggle it on. This step is necessary to use the widget for adding animated headlines to your Elementor pages.

**Q: What happens if I don't select an animation style for the Heading Animation widget?**
A: If you don't select an animation style for the Heading Animation widget, the animated text will not display any animation. Selecting one of the six pre-defined styles is crucial for achieving the desired interactive effect and enhancing user engagement on your website.