---
title: "How to Add Animated Headings in WordPress?"
url: https://nexterwp.com/docs/add-animated-headings-in-wordpress/
date: 2024-12-06
modified: 2026-10-02
lang: en
author: "Aditya Sharma"
description: "A heading that names one thing names only that thing. A heading that cycles — creative, modern, bold — covers a whole positioning statement in one line. The Heading Animation..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Animated-Headings-in-WordPress_-1024x519.jpg
word_count: 589
---

# How to Add Animated Headings in WordPress?

## Key Takeaways

- Heading Animation block needs Nexter Blocks Pro, and it is enabled under Nexter > Blocks in the WordPress dashboard.
- Text Animation offers eight styles, with Style 1 and Style 4 swapping the whole word while Styles 2, 3, 5, 6, 7 and 8 split each word into individual letters.
- Duration Timing appears only for Style 1, accepts one value or pipe-separated values like 600|1500|300, and the two Types are mutually exclusive: Text Animation or Highlights.

A heading that names one thing names only that thing. A heading that cycles — creative, modern, bold — covers a whole positioning statement in one line.

The Heading Animation block does that, and can instead draw a hand-drawn mark over one phrase when a rotating headline would be too much.

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

## Before You Start

- **Edition:** **Pro** — the Heading Animation block needs Nexter Blocks Pro.- **Block to enable:** Heading Animation, switched on under **Nexter > Blocks** in your WordPress dashboard.

## Video Tutorial

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

## Steps

- Add the **Heading Animation** block to your page.

![Enabling the Heading Animation block in Nexter > Blocks](https://nexterwp.com/wp-content/uploads/2024/12/heading-animation-activation-new-1.webp)

- Under **Content**, pick a **Type**: **Text Animation** to cycle through words, or **Highlights** to mark one phrase.

![The Type control with Highlights and Text Animation](https://nexterwp.com/wp-content/uploads/2024/12/heading-animation-design-type.webp)

- For Text Animation, choose an **Animation Style** from Style 1 to Style 8.

- Add your rotating words in the text list, one entry per word or phrase.

- Add **Prefix** and **Postfix** text to sit either side of the animated part, and set the **Title Tag**.

![Prefix, postfix and title tag settings](https://nexterwp.com/wp-content/uploads/2024/12/heading-animation-style-new.webp)

![Nexter Blocks Heading Animation editor: Layout tab with the Type picker set to Text Animation and the eight Animation Style tiles](https://nexterwp.com/wp-content/uploads/2026/09/heading-animation-type-picker-full.webp)Layout tab: choose Text Animation, then one of eight Animation Styles.

## How It Behaves

The eight animation styles use two different mechanisms, measured on published pages:

| Styles | How the text animates |
| ------ | --------------------- |
| Style 1 and Style 4 | The whole word is swapped for the next one — measured cycling through all three test words and back to the first. |
| Styles 2, 3, 5, 6, 7 and 8 | Each word is split into individual letters that animate in and out in sequence — measured, 18 separate letter elements for three test words. The words still take turns; the letters just carry the animation. |

**Duration Timing is a Style 1 setting.** It takes one value, or one per word separated by pipes — `600|1500|300` gives the first word 600ms, the second 1500ms and the third 300ms, measured as those exact values on the published page. The field only appears when Style 1 is selected, because the other styles do not use it.

Each style has its own character — the demos below run through Style 1 to Style 8 in order.

![Nexter Blocks Heading Animation front end: Text Animation Style 1 cycling the words fast, reliable and beautiful between We build and websites](https://nexterwp.com/wp-content/uploads/2026/09/heading-animation-text-style-1.webp)Text Animation, Style 1.

![Nexter Blocks Heading Animation front end: Text Animation Style 2 cycling the words fast, reliable and beautiful between We build and websites](https://nexterwp.com/wp-content/uploads/2026/09/heading-animation-text-style-2.webp)Text Animation, Style 2.

![Nexter Blocks Heading Animation front end: Text Animation Style 3 cycling the words fast, reliable and beautiful between We build and websites](https://nexterwp.com/wp-content/uploads/2026/09/heading-animation-text-style-3.webp)Text Animation, Style 3.

![Nexter Blocks Heading Animation front end: Text Animation Style 4 cycling the words fast, reliable and beautiful between We build and websites](https://nexterwp.com/wp-content/uploads/2026/09/heading-animation-text-style-4.webp)Text Animation, Style 4.

![Nexter Blocks Heading Animation front end: Text Animation Style 5 cycling the words fast, reliable and beautiful between We build and websites](https://nexterwp.com/wp-content/uploads/2026/09/heading-animation-text-style-5.webp)Text Animation, Style 5.

![Nexter Blocks Heading Animation front end: Text Animation Style 6 cycling the words fast, reliable and beautiful between We build and websites](https://nexterwp.com/wp-content/uploads/2026/09/heading-animation-text-style-6.webp)Text Animation, Style 6.

![Nexter Blocks Heading Animation front end: Text Animation Style 7 cycling the words fast, reliable and beautiful between We build and websites](https://nexterwp.com/wp-content/uploads/2026/09/heading-animation-text-style-7.webp)Text Animation, Style 7.

![Nexter Blocks Heading Animation front end: Text Animation Style 8 cycling the words fast, reliable and beautiful between We build and websites](https://nexterwp.com/wp-content/uploads/2026/09/heading-animation-text-style-8.webp)Text Animation, Style 8.

## Limitations

- **Duration Timing only applies to Style 1.** The other seven styles run on their own timing and the field is not offered for them.- The two Types are mutually exclusive — a single block either cycles words or highlights a phrase, not both. Use two blocks if you need both.- Leave at least one entry in the animated text list. Measured: emptying it completely leaves nothing to animate and the page's script reports an error.- The rotating text is plain text; formatting inside an entry is stripped on the letter-splitting styles.

## Troubleshooting

### Only my first word ever shows

Check that each word is its own entry in the list rather than all of them typed into one entry. Measured, each entry becomes one step in the rotation.

### I cannot find the Duration Timing field

It only appears with **Style 1** selected — the other styles do not use it.

### My heading animates but the wrong text is emphasised

Prefix and postfix stay still while the middle cycles. Move any word that should not animate into the **Prefix** or **Postfix** field.

### Nothing renders at all

Check the animated text list still has at least one entry. Leave at least one entry in the animated text list. Measured: emptying it completely leaves nothing to animate and the page's script reports an error.

## Related Docs

- [Highlight a text with animation](https://nexterwp.com/docs/highlight-a-text-with-animation-in-wordpress/)- [Advanced Heading](https://nexterwp.com/docs/add-an-advanced-heading-in-wordpress/)- [Animated text](https://nexterwp.com/docs/add-animated-text-in-wordpress/)- [Advanced tab](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: What do I need before adding animated headings in WordPress?**
A: The Heading Animation block in Nexter Blocks is a Pro feature, so the block only works when Nexter Blocks Pro is enabled. The page also says it must be switched on under Nexter > Blocks in your WordPress dashboard. That matters because the block will not be available until both the Pro edition and the block toggle are in place.

**Q: Should I use Text Animation or Highlights for an animated heading?**
A: Text Animation is the better fit when you want a headline to cycle through words or short phrases, while Highlights is for marking one phrase with a hand-drawn style effect. The two Types are mutually exclusive, so one block does not do both at once. If you need both behaviors on the same page, use two blocks.

**Q: Why does only my first animated word show in the heading?**
A: That usually happens when all the words were typed into one list entry instead of being split into separate entries. In this block, each entry becomes one step in the rotation, so a single entry gives you only a single visible item. Breaking the text into one word or phrase per entry is what makes the cycle advance.

**Q: Why can't I find the Duration Timing field?**
A: Duration Timing only appears when Style 1 is selected. The other seven styles do not use that field, so Nexter Blocks hides it for them. That is intentional, because Style 1 is the only style that accepts one value or pipe-separated values like 600|1500|300 for per-word timing.

**Q: What should I use if I want only part of a headline to animate?**
A: Prefix and Postfix are the cleanest way to keep static text outside the animated middle. The page says those fields stay still while the center cycles, so any word that should not animate belongs there instead of in the rotating list. That keeps your positioning statement readable while still giving you motion where it matters.

**Q: Why does nothing render after I add an animated heading?**
A: An empty animated text list can break the block output. The page notes that leaving at least one entry is required, and emptying the list completely leaves nothing to animate and triggers a script error on the page. If you want a stable result, keep at least one word or phrase in the list before publishing.