How To Use The Marquee Widget By Atomic Addons

The Marquee widget by Atomic Addons scrolls a row of words or images across the page without end, like a news ticker. Each word can have its own colors and link, and each image its own width and link. You set the speed and direction, and can let visitors pause or drag the row. This guide covers adding the widget, adding the items and the marquee options.

Enable the Marquee Widget

Marquee is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Marquee. You can also open the Creative category.

4. 4

   Turn the Marquee widget on.

5. 5

   Click Save Settings.

Add the Marquee Widget

Marquee works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Marquee. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

The row only moves on the live page. In the editor it stands still, as the note at the top of the panel says; switch to Preview to see it run.

Marquee

Open the widget and go to Content → Marquee:

1. 1

   Marquee Type: Text, the default, scrolls words. Image scrolls images.

2. 2

   Image Size: Image only: which image size WordPress serves, Medium by default.

3. 3

   Marquee Items: The items, six sample words or eight placeholder images by default. Click an item to open it.

A text item holds:

• Content: the words.
• Link: makes the words a link. New links open in a new tab with nofollow unless you change the link options.
• Color and Background Color: colors for this item only. A Text Color you set under Style → Marquee takes priority over the item colors.

An image item holds the Image, a Link (with the same new tab and nofollow defaults) and a Width in px, % or vw for that image.

When the items are narrower than the screen, the widget repeats them until the row fills it, so the loop has no gaps.

Marquee Options

Content → Marquee Options controls the movement:

1. 1

   Item Spacing: The space between items, 0 to 100px, per screen size.

2. 2

   Scroll Speed: How fast the row moves, in pixels per second: 50 by default.

3. 3

   Direction: Left, the default, or Right. On a right-to-left site the directions swap.

4. 4

   pauseOnHover: Stops the row while the visitor points at an item.

5. 5

   Draggable: Lets visitors drag the row sideways with the mouse or a finger. It snaps to the nearest item when they let go.

6. 6

   Clickable: When a visitor clicks an item, the row slides that item to the middle.

7. 7

   Offset & Rotate: Tilts the row, for the crossing banners often seen on landing pages. It adds Rotate, the angle from -100 to 100 degrees, Offset left, which pulls the row past the left edge, and Offset Right, which makes it wider so the tilted ends reach past the screen edges.

8. 8

   Shadow Mode: Fades the row out at both ends. Shadow Color sets the color it fades into: use your section's background color.

Style the Marquee

Everything below is on the Style tab:

• Marquee: shown for text. Text color, background, border, border radius, padding, typography, text stroke and text shadow, with Normal and Hover tabs.
• Marquee Images: shown for images. Height, background, border, border radius, padding and CSS filters, with Normal and Hover tabs.