---
title: "How to Add Animated Headings in WordPress?"
url: https://nexterwp.com/docs/add-animated-headings-in-wordpress/
date: 2024-12-06
modified: 2026-04-14
author: "Aditya Sharma"
description: "Adding an animated headline in WordPress is a great way to instantly capture your visitors' attention. It enhances the visual appeal of your website and adds an interactive element that..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Animated-Headings-in-WordPress_-1024x519.jpg
word_count: 579
---

# How to Add Animated Headings in WordPress?

## Key Takeaways

- Nexter Blocks offers a Heading Animation block that allows users to add animations to text on their WordPress website.
- The Heading Animation block includes two animation types: Text Animation and Highlights, with eight pre-defined animation styles available.
- Users can customize the animation duration and alignment for different responsive devices within the Heading Animation block settings.

Adding an animated headline in WordPress is a great way to instantly capture your visitors' attention. It enhances the visual appeal of your website and adds an interactive element that keeps visitors engaged with your content.

With the Heading Animation block from Nexter Blocks, you can easily add different types of animation to text on your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-heading-animation/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Heading Animation block is activated, to verify this visit Nexter → Blocks → and search for Heading Animation and activate.

## Learn via Video Tutorial

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

## How to activate the Heading Animation Block?

Go to 

- **Nexter **→ **Blocks **

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

![](https://nexterwp.com/wp-content/uploads/2024/12/heading-animation-activation-new-1.png)

## Key Features

- **Two Animation Types **- You can choose from two animation types - Text Animation and Highlights.

- **Multiple Animation Styles** - You can choose from multiple styles for each animation type.

## How to Use the Heading Animation Block?

Add the Heading Animation block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/heading-animation-design-type-1024x192.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

From the **Type** section, you have to select the heading animation type. Here you’ll find two options -

- **Highlight** - With this, you can [highlight a part of the text with animation](https://nexterwp.com/docs/highlight-a-text-with-animation-in-wordpress/).

- **Text Animation** - With this, you can show multiple texts with animation.

Select the option as per your requirements, let’s select Text Animation here.

Then from the **Animation Style** section, you have to select a pre-defined style. Here you’ll find 8 pre-defined animation styles. 

### Style 1

### Style 2

### Style 3

### Style 4

### Style 5

### Style 6

### Style 7

### Style 8

Select the style as per your requirements.

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

Then in the **Labels** section, you have to add the texts you want to animate. By default, you’ll find two repeater items. Open one repeater item.

In the **Label** field, you have to add the text.

> *Note: In each repeater item, you can add one text*

You can click on the **+Add Label** button to add more text.

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

From the **Duration Timing** field, you can set the animation duration. You can use multiple values separated “|” to set different animation durations for individual texts. 

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

From the **Select Style** section, you can select a pre-defined style.

## How to Style the Heading Animation Block?

To style the Heading Animation block, you’ll find all the options in the Style tab. You’ll find different styling option for different animation type.

**Prefix and Postfix** - From here, you can manage the HTML tag, typography and color of the prefix and postfix texts.

![](https://nexterwp.com/wp-content/uploads/2024/12/heading-animation-style-new.png)

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

**Highlight Animation** - You’ll see this tab for the Highlights animation type. From here, you can manage the animation duration, stroke width and color of the highlighted line.

Advanced options remain common for all our blocks, you can explore all the options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Heading Animation block is not showing up?**
A: If the Heading Animation block is not appearing, ensure that the Nexter Blocks plugin is installed and activated. This block is part of the PRO version of Nexter Blocks, so double-check that you have access to the premium features. You can activate the block by navigating to Nexter u2192 Blocks, searching for Heading Animation, and turning on the toggle.

**Q: What are the best practices for using animated headings in WordPress?**
A: When using animated headings, consider the animation style that best fits your website's theme and user experience. Nexter Blocks offers eight pre-defined animation styles, allowing you to choose one that complements your design. Additionally, ensure that the animation duration is set appropriately to avoid overwhelming visitors; a duration that is too fast may be missed, while one that is too slow could disrupt the reading flow.

**Q: Does the Heading Animation block work with other page builders?**
A: The Heading Animation block is designed primarily for use with the Gutenberg Block editor, which is the default editor in WordPress. While NexterWP also supports Elementor and Bricks, the Heading Animation block's features are optimized for Gutenberg. If you prefer using other page builders, you may need to explore alternative options.