Add a text rotator to WordPress

One line of text that swaps its words in place, on a timer or as the page scrolls, with the transition you pick. Use it in a hero, a heading or a tagline.

Type

A Grinner block

Find it

Press + and search “Text Rotator”

Phones

It rotates. In Hero Mode, Pixel Reveal and Decrypt become a plain change

Speed

Simple transitions and scroll modes need no script

What you can change

The settings worth knowing.

Four settings do most of the work. The rest you can leave as they are.

Sketch it. Also: Build it., Ship it.

Transition

Eight ways to change

Fade, Fade Up, Fade Down, Blur In, Zoom Fade, Clip Reveal, Pixel Reveal and Decrypt. This one is Decrypt.

Scroll Also: a little, more, There.

Change the line

On a timer or the scroll

Over time, at the pace you set, or with the scroll. As the page scrolls from the top suits a first-screen line, and As the line crosses the screen suits one further down.

bright Also: bold, calm

Accents

Lines keep their accents

Bold, italic and your site accents stay on each line, like these markers.

Text Rotator example, a browser window showing “Make it fast.”, a lightning bolt and “0 s wait”

Hero Mode

Ready on the first screen

Turn it on for a rotator in your hero. The first line shows the moment the page paints, then the words start turning.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Add the Text Rotator

In the editor, press + and search for Text Rotator. It sits with the other Grinner blocks.

3

Write your lines

Up to ten. Pick a transition and a time, then publish.

Good to know

Fair questions.

The Text Rotator is a Grinner block that shows one line whose words take turns in the same place, with the transition you pick. Use it in a hero, heading or tagline to say several things in the space of one.

Simple transitions, such as Fade and Blur In, run with no script at all, and so do the scroll modes. Pixel Reveal and Decrypt add a small one, and only on pages that use them.

It rotates on phones too. In Hero Mode, Pixel Reveal and Decrypt become a plain change of line, so your first screen stays calm.

They see your first line, standing still. Nothing turns.

Not yet. Every line shows for the same time, anywhere from 0.6 to 10 seconds.

Yes. Set Change the line to a scroll mode. Pixel Reveal and Decrypt only change over time, and a scroll mode switches the entrance off.

Pairs well with

Try it with these.

Highlight words with a marker, underline, circle or serif italic, saved once for the whole site.

Motion in your hero, with the first screen still drawn straight away.

Headings that type, decrypt, reveal or arrive word by word.

Grinner grinning

Go make something
beautiful.

Free on WordPress.org · No Pro version