Create rotating text

Rotating text turns a highlighted fragment into an animated sequence of words. For example, the heading “We deliver furniture | lighting | decor” shows one word at a time and switches to the next after a pause. It works in Gutenberg, Elementor, and WPBakery.

Highlighted words switch in a cycle.

Set up rotating text

Type all the variants one after another, separated by the | symbol, and highlight the whole sequence. In Gutenberg, select furniture|lighting|decor and apply Adv Highlight. In Elementor and WPBakery, wrap it with the <u></u> tag: <u>furniture|lighting|decor</u>. For details, see Highlight text in titles and paragraphs.
Open the element’s highlight settings and set Effect to Rotating text.
Pick the Animation type and, if needed, adjust Duration and Delay.
Preview the page.

The Gutenberg editor shows the whole sequence with the | separators, and the animation runs only on the live page. The Elementor editor preview plays the animation.

Settings

Option	Description
Effect	None keeps the highlight static. Rotating text turns on the animation.
Animation	How one word replaces the next: Typing, Clip, Slide up, Drop-in, or Fade.
Duration (ms)	How long the transition lasts. Defaults to 600. For Typing, this is the time it takes to type the whole word.
Delay (ms)	How long each word stays on screen before the next one appears. Defaults to 2500.

Animation types

Typing: the current word is briefly selected and removed, then the next word is typed letter by letter behind a blinking cursor.
Clip: the word is hidden by a sweep from right to left, then the next word is revealed the same way.
Slide up: the current word slides up and out while the next one comes in from below.
Drop-in: the next word scales down into place while the current one shrinks and fades out.
Fade: words cross-fade.

Don’t miss WoodMart updates

Receive feature updates, tutorials, and WoodMart news via email.