How to Use Marquee Layout Controls in Elementor using Marquee Addons Pro?

What is the Marquee Layout Controls feature?

The Marquee Layout Controls in Marquee Addons Pro (Elementor) define a continuous, auto-scrolling track. Set direction, speed, and gap so your logos, products, or images flow smoothly in an infinite loop across all devices.

Marquee Controls

These controls appear after you choose Marquee in Content → Layout. They define how the continuous scroll behaves.

• Layout:
  1. Gaps: Control the horizontal and vertical spacing between product cards.

• Marquee Options:
  1. Marquee (On/Off): Turns the continuous scrolling effect on. Disable to return to a static strip.
  2. Show Vertical: Switches the marquee from horizontal to vertical scrolling (top ↔ bottom). Leave off for left ↔ right.
  3. Reverse: Flips the direction of travel (e.g., Right → Left becomes Left → Right, or Down ↔ Up when vertical).
  4. Pause On Hover: Stops the animation while the pointer is over the widget—recommended for readability and accessibility.
  5. Drag to Scroll: Allows users to click-and-drag (or swipe on touch) to manually move the marquee.
  6. Speed: Controls how fast items move. Higher numbers = faster motion. Start around 8–12 and adjust per device.
  7. Show Edge Shadow: Adds a soft fade at the container edges to hint that content continues off-screen.
  8. Scroll Effect:
     • Marquee on Scroll: Links the marquee motion to the page scroll. Items move as the user scrolls the page (instead of moving continuously on their own).
     • Speed: Sets how strongly the marquee responds to page scrolling.
     • Show Arrow Button: Displays left/right (or up/down) arrow buttons so users can nudge the marquee manually.

Style tab — Arrow Button

Use these settings to make arrow controls clear and tappable without overwhelming your design. These options appear when Arrow Button is enabled.

1. Button Size: Sets the overall clickable button size.
2. Icon Size: Controls the size of the arrow icon inside the button.
3. Icon Color: Chooses the arrow color.
4. Background Type: Selects the button background (solid or gradient).
5. Border Type: Defines the button’s border style.
6. Border Radius: Rounds the button’s corners (Top, Right, Bottom, Left).