---
title: "How to Add Animated Headings in WordPress?"
url: https://nexterwp.com/docs/add-animated-headings-in-wordpress/
date: 2024-12-06
modified: 2026-08-12
author: "Aditya Sharma"
description: "Adding an animated headline in WordPress is a great way to instantly capture your visitors' attention. An animated heading draws focus to your key message and gives your page an..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Animated-Headings-in-WordPress_-1024x519.jpg
word_count: 829
---

# How to Add Animated Headings in WordPress?

## Key Takeaways

- Nexter Blocks Heading Animation block adds text animation and highlight effects to headings in the WordPress block editor.
- Text Animation cycles through multiple words or phrases in the same heading position, and Highlights draw an animated underline or brush stroke under a specific word or phrase.
- Nexter Blocks offers 8 pre-defined animation styles for Text Animation, with transitions such as typewriter entry, fade, and slide.
- Required setup includes the default WordPress Block editor, the Nexter Blocks plugin installed and activated, and the PRO version because Heading Animation is a Premium block.

Adding an animated headline in WordPress is a great way to instantly capture your visitors' attention. An animated heading draws focus to your key message and gives your page an interactive feel that keeps visitors engaged.

The Heading Animation block in Nexter Blocks lets you add text animation and highlight effects to headings in the WordPress block editor. You can cycle through multiple words or phrases in the same heading position, or draw an animated underline under a specific keyword.

**Best Used For:**

- SaaS or agency homepages that cycle through different value propositions in the hero headline- Product landing pages that highlight a key benefit word with an animated underline- Portfolio and personal brand sites where a dynamic headline sets the tone on arrival

[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 (Pro)** – Choose between Text Animation (cycling through multiple words or phrases) and Highlights (drawing an animated shape under a word). Use Text Animation for hero headings that rotate through benefits; use Highlights to draw attention to one key word in a static heading.

- **Multiple Animation Styles (Pro)** – Select from 8 pre-defined animation styles for Text Animation and several highlight styles. Each style produces a different transition effect, from typewriter entry to fade and slide transitions.

## How to Use the Heading Animation Block?

Add the Heading Animation block to the page.

Click the **Design from Scratch** button to build your heading layout manually.

![](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, select the heading animation type. Two options are available –

- **Highlight** – Use this to apply an animated highlight effect to a specific word or phrase in the heading, such as an animated underline or brush stroke. See [how to highlight a text with animation](https://nexterwp.com/docs/highlight-a-text-with-animation-in-wordpress/) for detailed steps.

- **Text Animation** – Use this to cycle through multiple words or phrases in the same heading position, each appearing in sequence with a transition effect.

Select the type that fits your heading. The steps below use Text Animation as an example.

From the **Animation Style** section, select a pre-defined style. Eight styles are available, each producing a different transition effect between the cycling text items.

### Style 1

### Style 2

### Style 3

### Style 4

### Style 5

### Style 6

### Style 7

### Style 8

In the **Prefix Content** field, enter text that appears before the animated portion. Use this when your heading has a static first part, such as “We help you” before the cycling benefit.

In the **Labels** section, add the words or phrases you want to animate. Two repeater items are included by default. Open one to add your first text.

In the **Label** field, enter the word or phrase you want this item to display.

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

Click **+Add Label** to add more cycling text items. Each label becomes one word or phrase in the animation rotation.

In the **Postfix Text** field, enter text that appears after the animated portion. Use this for a static ending to the heading, such as “for your business.”

From the **Duration Timing** field, set how long each animated text item is displayed before transitioning to the next. Separate multiple values with | to assign a different display duration to each label individually.

From the **Alignment** section, set the horizontal alignment of the heading for desktop, tablet, and mobile separately.

From the **Select Style** section, choose a pre-defined visual style to apply a quick look without manually configuring typography and colors.

## How to Style the Heading Animation Block?

To style the Heading Animation block, go to the **Style** tab. The available options change depending on the animation type you selected in the Content tab.

**Prefix and Postfix** – Set the HTML tag (H1, H2, etc.), typography, and text color for the prefix and postfix portions of the heading. Use this to match the heading hierarchy to the surrounding page structure.

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

**Animated Text** – Control the font size, weight, font family, and color of the animated text portion. Use a contrasting color from the prefix and postfix to make the animated word stand out.

**Highlight Animation** – This tab appears only when you select Highlights as the animation type. Set the animation duration, stroke width, and color of the highlight line drawn under the selected word.

Advanced options are available in the **Advanced** tab and are common to all Nexter Blocks.

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