Anyone else remember when marquees were everywhere back in ’06? Scrolling text across every MySpace page and personal blog in existence. They disappeared, but in the last few years they’ve made a real comeback.
Done right, a marquee adds movement and personality to your website. You’ve probably spotted them sliding across homepages between sections on some of your favorite websites.
The good news is you can build one using Kadence Blocks, with no extra plugin required. Just a Row Layout block and a small CSS snippet. Let me show you exactly how to do it!
What You’ll Need
- A WordPress website
- The Kadence Blocks plugin (the free version works perfectly)
- About five minutes
How to Create a Scrolling Marquee in Kadence Blocks
Step 1: Add a Row Layout Block
In the WordPress block editor, add a Row Layout block wherever you want your marquee to appear on the page.
When setting up the row, choose to display one column, and then in the toolbar above, set the alignment to Full Width so that the scrolling text stretches across the entire screen:
Once it’s placed, click on the block and head to the Advanced tab in the right-hand settings panel. In the Additional CSS Class field, type:
marquee-row
Optional: Click the Style tab at the top of the block settings and add a background color to the Row.
Step 2: Add Your Text
Inside the Row Layout block, click the + sign and add a Text (Adv) block. That’s the Kadence Advanced Text block, labeled Text (Adv) in the block inserter.
Type out whatever you want your marquee to say – a sentence, a list of words, whatever you want.
Optional: in the toolbar, you can adjust the heading tag (h2, h3, paragraph, etc.) On the right side, inside of the block settings, you can adjust the typography styles.
Then (and this is important!) to create that seamless infinite-scroll look, copy and paste your text multiple times on the same line, all inside that one block.
So it might look something like this inside your editor:
Travel • Fashion • Decor • Beauty •Travel • Fashion • Decor • Beauty •Travel • Fashion • Decor • Beauty •Travel • Fashion • Decor • Beauty •Travel • Fashion • Decor • Beauty •Travel • Fashion • Decor • Beauty •
Just make sure to keep everything in one single Text block. The repeated text is what makes the animation look continuous, like it could scroll on forever.
Here’s what mine looks like in the editor:
Step 3: Add the Custom CSS
Here’s where it all comes together! Click on your Row Layout block, go to the Advanced tab on the right, and find the Custom CSS field. Paste in this code:
(If you’re having trouble pasting anything inside the box, click “Open in modal” and paste it in the window instead > save)
.marquee-row {
overflow: hidden;
}
.marquee-row .kt-row-column-wrap {
display: flex;
flex-wrap: nowrap;
}
.marquee-row .wp-block-kadence-advancedheading {
white-space: nowrap;
animation: marquee-scroll 18s linear infinite;
will-change: transform;
}
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}The 18s value controls the scroll speed. Lower the number to speed it up, or raise it to slow things down.
Step 4: Save and Check the Live Site
Before you panic: the animation might not behave correctly in the page editor which is normal!
Save your page, then open it on the live site to see the real thing. That’s where you’ll see it scroll, get a feel for the speed, and decide if you want any tweaks.
Here’s how mine looks on the live site under my blog posts:
A Few Extra Tips
Style Your Row Block
Background color, background image, padding, borders… all adjustable right inside the Row block settings.
Style Your Text
Font size, font family, color/gradient, letter spacing. Make it big and bold, or keep it subtle.
Add Separators Between Repeated Phrases
This keep things visually clean as the text scrolls. A bullet (•), a slash (/) or em dash (—)works really well as a divider between phrases.
Use Intentionally
A little movement goes a long way! One marquee as an accent between your hero section and your blog posts, or maybe somewhere above your footer, tends to land better than multiple scrolling elements competing for attention on the same page.
Done!
You now have a fully custom scrolling marquee built entirely with Kadence Blocks, no extra plugins or bloat, and a CSS snippet you can copy and paste. Pretty satisfying for five minutes of work!
