BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Animated Headline Widget for Elementor Pro

Headlines with rotating words or a hand-drawn highlight shape

Overview

What Animated Headline does

Animated Headline builds one heading from three parts: text before, an animated part, and text after. The animated part either rotates through a list of words with one of 12 effects, or stays fixed while a hand-drawn shape is drawn around it. Use it for hero headings and section titles where one phrase should stand out.

Live demo

See it in action

Video

See it in video

Features

What it can do

  • Two styles in one widget: Rotating Words and Highlighted Shape.

  • 12 rotation effects, including Typing, Clip, Flip, Swirl, Blinds, Wave, Drop In, Zoom, Fade and Blur.

  • 10 drawn shapes, including Circle, Curly, Underline, Double Underline, Underline Zigzag, Strikethrough, X and Brush Stroke.

  • Solid, gradient or outline-only fill for the animated text.

  • Typing cursor in bar, underscore or block style, with optional blinking.

  • Separate timing for word display, transitions, typing, deleting and letter delay.

  • Can wait until the headline scrolls into view, and can pause while hovered.

  • Screen readers get the full sentence as plain text instead of the moving letters.

Use cases

When to use it

Hero section heading

Keep one sentence and rotate the last word through the services or benefits you offer.

Highlight a key word

Circle or underline a single word in a section title to draw the eye to it.

Typewriter intro

Use the Typing animation with a cursor for a typed look on a landing page or portfolio.

Sale or offer callout

Draw a brush stroke or strikethrough over a word in a promotional heading.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Animated Headline onto the page and open the Headline section.

  2. Set Style to Rotating Words or Highlighted Shape.

  3. Type the fixed parts in Before Text and After Text.

  4. For rotating words, pick an Animation and enter one word or phrase per line in Rotating Text. For a shape, choose a Shape and fill in Highlighted Text.

  5. Open Animation Settings and adjust Word Display Time (ms), Transition Duration (ms) or Draw Duration (ms).

  6. Pick the HTML Tag and Alignment, then style the plain text and the Animated Text in the Style tab.

FAQ

Questions and answers

How do I add the rotating words?

Type them in Rotating Text, one word or phrase per line. Empty lines are ignored.

Can the animation stop after one pass?

Yes. Turn off Infinite Loop. Rotating words stop on the last word, and a highlight shape is drawn once and stays.

Is an animated heading readable by screen readers and search engines?

Yes. The heading uses the tag you choose and contains a plain text version of the full sentence, with the rotating words listed one after another.

Can the animated word use a gradient?

Yes. In Style, Animated Text, set Text Fill to Gradient and choose Gradient Start, Gradient End and Gradient Angle.

Bright Addons Pro

Get Animated Headline with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.