Scrollora Marquee for Elementor

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

1. Drag the Motion Text widget onto your page.
2. Under Content, add one row per item (name, headline, announcement, etc.). Add a URL to any row to make that item clickable.
3. Under General Settings, choose a scroll direction and speed, and decide whether hover should pause the scroll.
4. Under Advanced Motion, layer in fade edges, easing, reverse direction, or additional pause conditions as needed.
5. 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).