Description
Scrollora Marquee for Elementor adds a native, professionally-built widget to the Elementor editor panel, grouped under its own “Motion Text” category. There is no separate settings page, no shortcodes, and no dashboard to learn — every option lives directly inside Elementor’s own Content and Style tabs, exactly where Elementor users already expect it.
At its core, the widget renders a horizontally-scrolling line of text items (a “marquee” or “ticker”), each optionally linked to a URL, with a true, gap-free, seamless infinite loop. The loop is built and measured entirely client-side, so it stays seamless whether you add two items or twenty, and the animation itself runs on the GPU compositor via CSS transform, not JavaScript, for smooth, low-overhead motion.
Features
Content
* Repeatable list of text items, each with its own optional link (URL, “open in new tab”, “nofollow”).
* Dynamic tag support on both the text and the link, for use with Elementor Pro / ACF / dynamic data sources.
General Settings
* Direction: right-to-left or left-to-right.
* Speed, gap between items, pause-on-hover, and infinite-loop toggles.
Advanced Motion
* Optional fade edges (responsive width, custom color).
* Reverse direction, with five animation easing curves.
* Start offset, so multiple instances don’t all scroll in visual lock-step.
* Independent pause conditions: on hover/focus, when scrolled out of the viewport, and when the browser tab is hidden — all three can be combined freely.
* GPU-acceleration toggle.
Style — Typography & Colors
* Full typography group control (family, size, weight, style, transform, decoration, line-height, letter-spacing).
* Normal, Hover, and Active text colors.
Style — Background, Border & Shadow
* Classic or gradient background.
* Border type, width, color, and radius.
* Text shadow and box shadow.
Style — Spacing
* Wrapper padding, margin, and border radius.
* Independent per-item horizontal/vertical padding.
Style — Hover Effects
* Scale, opacity, and transition duration on hover — independent of the existing hover-pause behaviour.
Style — Icons & Dividers
* Optional decorative icon before and/or after each item (any icon from Elementor’s icon library), with size, color, and gap controls.
* Optional divider between items, with style (solid/dashed/dotted/double), width, height, and color.
Style — Advanced
* Gradient text (two colors + angle).
* Text stroke (width + color).
* Backdrop blur and a frosted-glass background preset.
Accessibility & Performance
* Respects prefers-reduced-motion at both the CSS and JavaScript level, and re-evaluates live if the visitor changes that preference mid-visit.
* Decorative clones and icons are aria-hidden; real content and real links stay fully keyboard- and screen-reader-accessible.
* No jQuery. Vanilla JavaScript only, loaded solely on pages that use the widget.
* Assets are registered (not force-enqueued) so they only load where the widget is actually placed.
Requirements
- Requires the free Elementor plugin to be installed and active. Elementor Pro is not required.
Usage
- Drag the Motion Text widget onto your page.
- Under Content, add one row per item (name, headline, announcement, etc.). Add a URL to any row to make that item clickable.
- Under General Settings, choose a scroll direction and speed, and decide whether hover should pause the scroll.
- Under Advanced Motion, layer in fade edges, easing, reverse direction, or additional pause conditions as needed.
- Under Style, set typography, colors, background, border, spacing, shadows, hover effects, icons, dividers, and any of the Advanced effects (gradient text, text stroke, backdrop blur, glass effect).
Installation
- Upload the
scrollora-marquee-for-elementorfolder to/wp-content/plugins/, or install the plugin zip via Plugins Add New Upload Plugin. - Activate the plugin through the “Plugins” screen in WordPress.
- Make sure Elementor is installed and active (WordPress will offer to install/activate it automatically if it detects it’s missing).
- Edit any page with Elementor and find the Motion Text widget under its own “Motion Text” category in the widget panel.
- Add your items in the Content tab, then fine-tune motion and appearance in the General Settings, Advanced Motion, and Style tabs.
FAQ
-
Does this plugin require Elementor Pro?
-
No. It is built entirely against the free Elementor Developer API (
elementor/widgets/register,elementor/elements/categories_registered) and works fully with Elementor Free. -
Does this plugin add a settings page?
-
No. There is no plugin-level dashboard or global settings screen. All configuration happens per-widget instance, inside the Elementor editor’s own Content and Style tabs.
-
Does this plugin use jQuery?
-
No. The frontend behaviour is written in vanilla JavaScript. It does integrate with
elementorFrontend(Elementor’s own frontend framework) so the widget re-initializes correctly inside the Elementor editor’s live preview. -
Will the scrolling animation play for visitors who prefer reduced motion?
-
No. The widget checks the
prefers-reduced-motionmedia feature both in CSS and in JavaScript, and shows a single static, non-animated line of items instead — updating live if the visitor changes that OS/browser preference while your page is open. -
Does the plugin store any settings or data of its own?
-
No. Every setting lives in the page’s own Elementor data (post meta), exactly like any other Elementor widget. The plugin itself creates no custom database tables, options, or transients, so there is nothing left behind if you uninstall it.
-
I only added two short items — why doesn’t the loop look empty or gappy?
-
The widget measures the rendered width of your items and automatically clones them client-side, as many times as necessary, until the track is at least as wide as its container, before duplicating that set once more for the seamless loop. This keeps the scroll gap-free regardless of how few or how short your items are.
-
Can I use custom icons before or after each item?
-
Yes. The Style Icons section lets you enable a before-icon and/or after-icon, chosen from Elementor’s built-in icon library, with independent size, color, and gap controls.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Scrollora Marquee for Elementor” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Scrollora Marquee for Elementor” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
First public release. Combines all functionality developed through the project’s internal Parts 1–5 into a single, audited, production-ready version.
Foundation
* PSR-4-style autoloader scoped to the MotionTextElementor namespace.
* Strict requirement checks (PHP version, Elementor presence/activation, Elementor minimum version) with actionable, dismissible admin notices and one-click install/activate links for administrators.
* Elementor integration registered on the correct, official extension points (elementor/elements/categories_registered, elementor/widgets/register, elementor/frontend/before_register_styles, elementor/frontend/before_register_scripts), fully compatible with Elementor Free.
* Dedicated “Motion Text” widget category in the Elementor panel.
Motion Engine
* True, gap-free, seamless infinite marquee loop, built and measured client-side from a single authoritative server-rendered set of items.
* GPU-accelerated animation via CSS transform: translate3d(); JavaScript only measures layout and assigns the animation once per (re)build — never on a per-frame basis.
* Flicker-free re-initialization on resize and inside the Elementor editor’s live preview.
* ResizeObserver-based responsive recalculation, with a debounced window-resize fallback for older browsers.
Advanced Motion
* Optional responsive fade edges with a custom color.
* Reverse direction (flips a running animation in place, without restarting it) and five easing curves.
* Start offset control, so multiple widget instances don’t scroll in visual lock-step.
* Three independent, combinable pause conditions: hover/focus, viewport visibility, and browser-tab visibility.
* GPU-acceleration toggle.
Style Controls
* Typography, Colors (normal/hover/active), Background (classic/gradient), Border, Spacing, Shadow (text/box), Hover Effects (scale/opacity/transition), Icons (before/after, with size/color/gap), Dividers (style/width/height/color), and an Advanced section (gradient text, text stroke, backdrop blur, glass-effect preset).
* Every applicable control is responsive (desktop/tablet/mobile) and updates live in the Elementor editor.
Accessibility, Security & Performance
* Full prefers-reduced-motion support, re-evaluated live if the preference changes.
* Decorative clones and icons are aria-hidden; real links and text remain fully accessible to assistive technology and keyboard navigation.
* Every dynamic output is escaped (esc_html(), esc_url(), Elementor’s own attribute/icon rendering); every control value is validated against an explicit allow-list before use (e.g. easing, direction).
* No jQuery; vanilla JavaScript only. Assets are registered, not force-enqueued, so they load only on pages that actually use the widget.
* No plugin-level database tables, options, or transients — nothing to clean up on uninstall.