Infinite Scroll, Text Ticker, Tag Grid and Counters settings

Four Showcase widgets for short, repeating bits: sliding pictures, a moving message bar, a cloud of tags and counting numbers. Each fills from the shared Manage window (add items by hand or From a collection), explained in Widget Design panel basics. Each ends with Spacing (margin) and Animations & Effects (Entrance and Scroll; see Animations and effects).

Visitors who ask their device for less motion see these widgets standing still.

Infinite Scroll

One or two rows of images (or text cards) sliding sideways forever. Often used as a logo strip.

How to add it

1. Click Add, open Showcase and drag Infinite Scroll onto the page.
2. Click Manage Images, then Add Items to pick several images at once.
3. For each item: the image with Focal point, Title (optional), Description (optional) and an optional Link this item. An item with no image shows as a text card.
4. Under the list: Rows (1 row or 2 rows; default 1) and the direction (Slide left or Slide right; default left). With 2 rows, the second row slides the other way.
5. Click Done.

Animation

• Speed: 5–200 px per second. Default 40. The speed stays the same however many items you add.
• Pause on hover: also pauses when a visitor tabs into it. Default on.

Items

• Item width: 60–800 px. Default 300 (250 Tablet, 200 Mobile). Per screen size.
• Item height: 40–800 px. Default 400 (350 Tablet, 300 Mobile). Per screen size.
• Gap between items: up to 120 px. Default 20. Per screen size.
• Corner radius: 0–60 px. Default 12.
• Image fit: Fill (crop) or Fit (logos). Default Fill (crop).
• Grayscale until hover (logo strips): gray logos that turn to color on hover. Default off.

Text

• Text over images: Plain, Light glass or Dark glass. Default Dark glass.
• Text card background: the background of items with no image. Default a purple gradient.
• Title and Description: text style controls (sizes up to 48 and 32).

Text Ticker

A bar of short messages scrolling across the screen, with a mark between each one.

How to add it

1. Open Add > Showcase and drag Text Ticker onto the page. It starts with four sample messages.
2. Click Manage Messages, then Add Message, and type each message's Text.
3. Optional, for collections: Split each text into messages on (optional), for example ✦ or ;. Keep a list of highlights in one collection text field and the ticker splits it into messages.
4. Name for screen readers: what a screen reader calls the ticker. Default "Announcements".
5. Click Done.

Scrolling

• Speed: 10–300 px per second. Default 60.
• Direction: Scroll left or Scroll right. Default Scroll left.
• Pause on hover: default on.

Ticker Bar

• Background: default dark navy.
• Bar height (padding): space above and below the text, 0–48 px. Default 12.
• Space around separators: 4–120 px. Default 32.

Separator

• Separator: •, —, ★, ♦, ✦, |, a lightning bolt, or None. Default •.
• Use any icon…: click Choose to pick any icon from the icon picker; Change swaps it.
• Separator color: works for icons too, and can follow a theme color. Empty means the text color.
• Separator size: 6–48 px. Default 14.

Ticker Text

Text style controls, size up to 48. Default 15 px, white.

Tag Grid

A wrapping grid of short text tags, like a list of services or areas served.

How to add it

1. Open Add > Showcase and drag Tag Grid onto the page. It starts with six sample tags.
2. Click Manage Tags, then Add Tag. Type the Tag text and optionally Link this tag.
3. For a collection: Collection values: split tags on: Comma ( , ), Semicolon ( ; ), Pipe ( | ), New line or Don't split. Default Comma. One collection field like "Roofing, Siding, Gutters" becomes three tags.
4. Click Done.

Layout

• Alignment: Left, Center or Right. Default Center. Per screen size.
• Gap between tags: up to 40 px. Default 10. Per screen size.
• Equal-width grid: makes every tag the same width in neat columns. Default off.

Tags

• Style: Filled, Soft or Outline. Default Soft.
• Shape: Pill, Rounded or Square. Default Pill.
• Tag color: default your theme's primary color.
• Side padding: up to 48 px. Default 18. Per screen size.
• Top / bottom padding: up to 32 px. Default 8. Per screen size.
• Hover animation: None, Lift, Grow, Fill, Glow or Shine. Default Lift.

Text

Text style controls, size up to 40. Default 15 px, bold.

Counters

Numbers that count up from zero when they scroll into view, shown plain or inside rings or bars.

How to add it

1. Open Add > Showcase and drag Counters onto the page. It starts with three sample counters.
2. Click Manage Counters, then Add Counter.
3. For each counter: Label (for example "Happy customers"), Number (1500), Before the number ($) and After the number (+). For rings and bars, Out of (rings / bars) (100 if blank). For example 98 out of 100.
4. Under the list, Style: Number, Ring or Bar. Default Number.
5. Click Done.

Layout

• Counters per row (0 = as many as fit): 0–6. Default 0 on Desktop, 2 on Mobile. Per screen size.
• Gap: up to 120 px. Default 32. Per screen size.
• Alignment: Left or Center. Default Center.
• Divider between counters: a thin line between counters. Default off. Divider color shows when it's on.

Counting

• Count duration: 0.5–8 seconds, in steps of 0.5. Default 2.5.
• Thousands separators (1,500): default on.
• Ring or Bar only: Ring color / Bar color (default your theme's primary color) and Track color (the unfilled part, default light gray).
• Ring only: Ring size: 80–320 px. Default 140.

Counter Card

• Background, Border (0–6 px; Border color when above 0), Corner radius (0–40 px), Padding (0–64 px, default 24).

Number and Label

• Number: text style controls, size up to 120. Default 48 (36 Mobile), bold.
• Label: text style controls, size up to 40. Default 16, gray.

Examples

• An electrician's trust strip: Infinite Scroll with certification logos, Fit (logos), Grayscale until hover, Speed 30.
• A shop's holiday banner: Text Ticker at the top of the page: "Free shipping over $50 ★ Open Sundays ★ Gift cards in store".
• A roofer's service areas: Tag Grid of town names, Outline, Pill, each linking to its area page.
• A cleaning company's stats: Counters with "12,000+ homes cleaned", "15 years" and "98% five-star reviews" as rings.

Limits and what it can't do

• None of these widgets has Connect to Data. Use From a collection in the Manage window instead.
• Text Ticker messages are plain text, with no links or bold words.
• Counters only count numbers. Text like "24/7" shows as typed without counting.
• The final numbers are always in the page, so search engines and visitors with reduced motion see them. The count-up runs once per page visit.
• When Zeus fills a template, counter numbers stay as the template's and are flagged for you to check, and logo strips use only the client's own logos (see Fill a template with Zeus).
• Clients with only Widget content can change items, but not the Design panel.

Who can use it

Anyone in your agency with the Mount Olympus tool. Client people need Editor to add, move, design or delete these widgets, or Widget content to change their items.

Troubleshooting

• The counters don't count up: they count when scrolled into view on the live site or preview, once. Visitors with reduced motion turned on just see the final numbers.
• The rings or bars are full or empty: check Out of (rings / bars). 98 with Out of 100 fills 98%.
• Logos are cropped: set Image fit to Fit (logos).
• The strip moves too fast: lower Speed. Adding items doesn't change it.
• The ticker shows the whole field as one message: set Split each text into messages on (optional) to the mark used in the field.
• Tags from a collection show as one long tag: set Collection values: split tags on to the right mark.
• Tag text is hard to read: clear Text color in the Text section so it picks a readable color for the tag color, or change Style.