---
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
lang: en
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?

## 

- Utilizes the Heading Animation widget from The Plus Addons for Elementor to enhance text interactivity.
- Offers six pre-defined animation styles including typing, flipping, and zoom-in effects for animated headlines.
- Requires Elementor FREE Plugin and The Plus Addons for Elementor plugin to be installed and activated for functionality.

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