Flexa Block Pro

The Animated Headline Block: One Line That Says More Than One Thing

A headline whose middle part types itself out, flips through a list of words, or gets struck through with a stroke that draws when the line scrolls into view. The words are content you edit in the sidebar, not a snippet in a theme file.

Part of Flexa Block Pro

The headline that has to say four things at once

You’re building a landing page for a client and the hero has to speak to four kinds of visitor — the agency, the shop owner, the studio, the freelancer. Only one of them fits in the headline, so the copy goes vague, or someone drops in a snippet that swaps the word every few seconds and it ships. Months later the client wants a fifth audience, the snippet lives in a child theme nobody documented, and the line still jumps sideways every time the word changes because nothing reserved the space.

The Animated Headline block moves that changing part into the headline itself, as a list of words you type into the sidebar. They are content, not code, so whoever owns the copy can add the fifth audience without opening a file — and the slot keeps the width of the longest word, so the line stays put while it changes.

Typing, with a blinking caret. Each word is typed out a character at a time, held for a beat, then erased before the next one starts.

Built for agencies

What you get to decide

Five ways the line can change — typed out, flipped, faded, slid up, or one phrase struck through with a drawn stroke.
Your own pacing — typing speed, how long a finished word is held, how fast it is erased, and whether it loops or stops on the last one.
Four stroke shapes for the highlight — marker, underline, circle or strikethrough — with the thickness set per screen size.
The changing part is styled on its own — size, weight, colour and its own background — so it carries the emphasis while the rest of the line stays calm.
The slot holds the width of the longest word so the line never jumps, and the changing part can drop onto its own line on phones.
Plus the usual spacing, colour and responsive controls, so it fits your design instead of fighting it.

Under the hood

Motion in a headline is easy to get wrong in ways nobody on the project ever notices, because everybody on the project has a fast machine, a mouse and no screen reader. This block is built for the visitor as much as for the person editing it.

A screen reader hears one steady sentence instead of a line that rewrites itself mid-word.
The first word is already in the page before any JavaScript runs, so the headline still reads correctly if a script never loads.
Visitors whose system asks for reduced motion get the headline standing still, wording intact.
Every colour has a light and a dark counterpart, and the styling is worked out when you save the page, so the visitor’s browser has nothing left to compute.

The same block, set up two other ways

Words flipping past on a timer. Nothing is typed here — each word simply hands over to the next one, at whatever interval you set.

One editor, every landing page

One phrase, circled by a stroke that draws itself. The drawing waits until the headline has scrolled far enough into view, so nobody misses it.

Write the line once, circle the part that matters and move on.

Setting one up takes about a minute. Drop the block in, type the part of the line that stays the same, add the words that change, pick an effect, and the editor plays it back while you work. No CSS, no shortcode, nothing to hand over in a document.

It sits in the same editor as the blocks you already use and shares the same spacing, colour and responsive controls, so a headline you build here lines up with the rest of the page instead of looking bolted on. It just needs Flexa Block switched on alongside it.

Give your headline something to say

Animated Headline is one of the blocks in Flexa Block Pro. Have a look at what the rest of them do.

See Flexa Block Pro
More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found