Marquee

The Marquee element scrolls a row of items past the visitor without stopping — logos, awards, product cards, short pieces of scrolling text. Each item is a small panel with a title, a meta line, text, an image or icon and a link, so the same element covers a plain logo ticker and a row of full cards.

Adding the element

Add an element in the YOOtheme Pro builder and pick Marquee from the Planckie Elements group. The builder starts you with three example items so the motion is visible immediately.

One element is one row. For rows travelling in opposite directions, add a second marquee and set its Direction the other way; each keeps its own speed, gap and items. It loads its own stylesheet and script, once per page however many marquees the page holds, and only where one is used.

Content

Option	Description
Items	The panels that scroll.
Show the title	Hides or shows that part across every item.
Show the meta text	As above.
Show the content	As above.
Show the image	As above. Also covers the icon, since an item has one or the other.
Show the link	As above.

The switches hide content without deleting it, so full cards and a bare logo ticker come from the same items.

Marquee items

Option	Description
Title	The item's heading line.
Meta	A secondary line, for a date, a category or a short caption.
Content	Longer text, over several lines if needed.
Image	The item's image, with its own alt text and focal point.
Image Alt	Alternative text for the image.
Icon	An icon from the icon library, available only while no image is set.
Link	Where the item leads.
Link Text	A different link text for this one item.
Link ARIA Label	A different link ARIA label for this one item.

An item's Settings tab overrides four things for that item alone: the panel Style, its HTML Element, the image Focal Point and the link Style. Everything else is set once on the marquee.

Settings

Marquee motion

The Marquee group holds the movement itself.

Option	Description
Direction	Left or Right. Left by default.
Speed	Time in seconds to scroll one container width, from 5 to 120, 30 by default. Lower is faster, and the figure is relative to the element's own width.
Pause on hover	On by default, and it is about the pointer. Keyboard focus pauses the row whether this is on or off.
Fade edges with gradient	Off by default. Fades both edges, whichever way the row travels.
Fade width (pixels)	0 to 200, 80 by default. Appears once the fade is on.

Grid

Option	Description
Column Gap	The space between items — Small, Medium, Default, Large or None.
Divider	A vertical line between items, drawn in the middle of the gap. Unavailable when the gap is None. Its color adapts on dark panels and sections.
Center rows	Centers items vertically against each other, for a row of logos of different heights.

Panel

Style covers the card and tile variants of the active theme style, or a blank panel, with Padding and the option to attach a top, left or right image to the panel edge. Link panel makes the whole panel clickable where the item has a link, optionally with a card or tile hover style.

Max Width caps each item and defaults to Medium. This is what gives the row its rhythm: items keep their width instead of stretching. 1 Column Content Width and Expand image work as they do in the native Grid element of YOOtheme Pro.

Title, Meta and Content

The three text parts each take a predefined style, a color and top and bottom margins, and each can be switched off entirely in the Content tab.

The Title defaults to h3 and can be linked on its own, with its own hover style. Its Alignment puts it above the rest of the item or to the left of it; the left position adds grid width, gaps and a stacking breakpoint.

The Meta defaults to the Text Meta style and to a div, so a caption does not enter the document outline. Its Alignment places it above or below the title, or above or below the content.

The Content adds a drop cap, text columns with an optional divider and breakpoint, and a switch that forces left alignment inside a centered item.

Image

Loading, Border, Box Shadow, Box Decoration, the hover transition and hover shadow, the SVG options and the link work as they do in the native Image element of YOOtheme Pro. Icon/SVG Color defaults to Emphasis, which is what an icon item uses when you set no image.

Alignment decides where the image sits: Top, Bottom, Left, Right, or Between, which places it between the title and the content. Side alignments get their own grid width, gaps, breakpoint and vertical centering.

Link

Text, ARIA label, target, download and rel options, then a style from the theme buttons and links, a size, a full-width switch and a margin. Text defaults to Read more, and any item can set a different one.

Accessibility

Option	Description
ARIA Label	Names the row for assistive technology, for example Our clients. Left empty, it reads Marquee.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-marquee, .pe-marquee-track, .pe-marquee-item, .pe-marquee-title, .pe-marquee-meta, .pe-marquee-content, .pe-marquee-image, .pe-marquee-link

Two CSS custom properties are read from the stylesheet and can be overridden on .pe-marquee:

Property	Effect
--pe-marquee-gap	The space between items, when none of the five Column Gap sizes is the one you want.
--pe-marquee-fade-width	The width of the edge fade, if you need a value outside the slider or a different width per breakpoint.

The element also writes --pe-marquee-speed and --pe-marquee-pause-on-hover, but the script takes both from the element's own configuration, so changing them in CSS has no effect. Use the Speed and Pause on hover settings instead.

Accessibility and keyboard

The row is a named group with a tab stop, holding a ul with one li per item. It is not a live region, so nothing is announced as the items move.

The tab stop is what makes the row usable without a mouse: a band of logos holds nothing focusable of its own.

Key	Action
Tab	Moves focus to the row, which stops the motion. Tab again continues into the links inside the items.
Left arrow	Scrolls the row back, by about a tenth of its width.
Right arrow	Scrolls the row forward by the same step.

There is no Home or End: a loop has no first item to return to.

To fill the width, the element duplicates items in the browser. A duplicate is aria-hidden and its links leave the tab order, so a screen reader and the Tab key meet your items exactly once, in the order you entered them. It stays clickable with a pointer, because on a short row most of what passes the visitor is a duplicate.

Motion stops for anyone with reduced motion enabled in their system settings, and while the element is scrolled out of view.

Keyboard focus stops the motion whatever Pause on hover is set to, because that setting governs the pointer alone. Switching it off therefore never leaves a visitor with motion that cannot be stopped, which is what WCAG 2.2.2 asks for.

Notes and limits

• The element renders nothing unless at least one item has a visible title, meta, content, image or icon. A link alone does not keep an item, or the element, on the page — switch off all four content parts and nothing renders, however many items are configured.
• If your items do not cover the container twice over, the element repeats them until they do. A duplicate carries no id and no reference to one, so clicking it follows the same link as the item it was copied from and can never act on that item's controls.
• The gap is applied as padding on each item rather than as a gap on the row. This is what makes the loop seamless, and it is why the divider sits at the middle of the gap rather than at the item edge.
• Speed is measured against the element's own width, not the window, so the same marquee runs slower in a narrow column than in a full-width section.
• Items keep the width set by Max Width; they do not stretch to fill the row, and there is no per-item width.