A store’s header often carries a single line of promotional text — a delivery threshold, a sale, a shipping note — and it’s almost always static, meaning every new message requires someone to edit code or replace a whole text widget rather than simply adding a line.
Why a text widget wasn’t enough
Elementor’s stock text-editor widget can show one message, once, in a fixed space. Showing several rotating messages meant either building a JavaScript slider from scratch inside a page, or, better, packaging the whole thing as a genuine reusable Elementor widget — something the site owner could then use anywhere, configured entirely from Elementor’s own interface.
The widget
We built Firefly Marquee Bar as a native Elementor widget with its own Content and Style tab controls, registered the same way any of Elementor’s built-in widgets are:
- A repeatable list of messages, each optionally linkable to a URL.
- Configurable scroll direction and speed, plus a pause-on-hover toggle.
- Full colour, font size, letter-spacing and font-weight controls in the Style tab — no CSS knowledge required to restyle it.
The seamless-loop technique
The scrolling itself is a pure CSS animation, not JavaScript: the full message list renders twice, back to back, inside a flex container, and the whole track animates via translateX from 0% to exactly -50%. Because the second copy is identical to the first, the moment the animation resets to 0% is visually indistinguishable from mid-loop — producing an infinite, seamless scroll regardless of how much text is in the list, with no JavaScript timing logic to get wrong.
Key takeaways
- When a client will need to repeat a customization pattern, building it as a real, reusable widget beats a one-off page-level hack — even if the immediate use case is a single header.
- A duplicated-content-plus-50%-translate technique produces a seamless CSS marquee loop without any JavaScript, and without timing bugs at the loop boundary.
- Exposing style controls (colour, speed, spacing) through the builder’s own Style tab is what actually makes a widget “editable by the client” rather than just “built for the client.”
Running into a similar limitation in your own WooCommerce or WordPress admin? Let’s Talk — Artintech Solution builds exactly this kind of custom store tooling.