How to Add Scrolling Text in the WordPress Block Editor (No Elementor, No Code)

To add scrolling text in the WordPress block editor, install the free MarqueeX plugin, insert the Text Marquee block, type your message, set the speed and direction and turn on pause on hover. To show it on every page, add the same block to your block theme's Header template part. No page builder and no code needed.

Set it up in a page or post

1. In Plugins → Add New, search for MarqueeX, then install and activate it.
2. Edit a page, open the block inserter and search for marquee.
3. Insert Text Marquee.
4. Type your message. Add separators — "✦", "•" or "—" — between phrases so the loop reads cleanly.
5. In the sidebar, set the speed, direction (left, right, up or down), pause on hover and edge fade.
6. Style the typography, colours, spacing and background.
7. Publish and check it on a phone.

The Text Marquee can also scroll live post titles instead of typed text. For a "Breaking" or "Latest" label beside the headlines, use the News Ticker block — see how to add a news ticker.

Show it on every page (block themes)

In a block theme, the header is a template part used by every template:

1. Go to Appearance → Editor → Patterns and open your Header template part (or open a template and select the header).
2. Insert the Text Marquee block above or below the navigation.
3. Style it as a thin strip — small text, a contrasting background.
4. Save. It now appears on every page that uses that header.

In a classic theme, wrap your text in the [marqueex_slider] shortcode and place it in a widget area near the top of the page, if your theme has one, or in individual pages:

[marqueex_slider speed="30" direction="left" pause_on_hover="true"]Free shipping over $50 ✦ New collection out now[/marqueex_slider]

Ideas that work

• Announcement strip: "Free shipping over $50 ✦ New collection out now ✦ Order by Dec 18 for Christmas".
• Big display type: one bold word or phrase at a huge size, scrolling slowly across a section — a common agency and portfolio look.
• Services list: "Branding • Web design • SEO • Content" as a strip between sections.
• Latest posts: live post titles on a blog or magazine homepage.

Why not the <marquee> tag?

Old tutorials suggest pasting <marquee>Your text</marquee> into a Custom HTML block. Avoid it:

• It's obsolete in the HTML standard; browsers keep it only for old pages.
• Visitors can't pause it.
• It ignores reduced motion, so it keeps moving for visitors who've asked their device to stop animations.
• It can stutter and jump at the loop point.

MarqueeX scrolls with CSS keyframes, which the browser animates smoothly, loops seamlessly, pauses on hover and respects reduced motion.

The CSS-only alternative

If you're comfortable with code, a CSS animation with @keyframes and transform: translateX() on a duplicated line of text gives a smooth loop — that's essentially what MarqueeX does for you. Doing it by hand means handling the seamless repeat, pause on hover, reduced motion and responsive sizes yourself, for every marquee you add.

Other block-editor options

Marquee Block is a single block that scrolls any blocks you put inside it. MarqueeX's Infinite Slider block does the same, alongside dedicated Text, Image, News Ticker and Post marquee blocks — so one plugin covers scrolling text, logos and posts. See the marquee plugin comparison.

Keep moving text readable

• Slow it down. If you can't read a phrase before it leaves the screen, it's too fast.
• Short phrases with clear separators.
• One marquee per screen. Two moving strips compete for attention.
• Contrast between text and background.
• Pause on hover always on.

On an Elementor site instead? See how to add scrolling text in Elementor without Elementor Pro. MarqueeX Pro adds scroll interactions — visitors can drag the text or spin the mouse wheel to speed it up or reverse it.