Rolling text

Overview

The Rolling text block displays continuously scrolling content in a horizontal loop.
It’s designed for decorative, eye-catching text that reinforces branding, messages, or highlights key phrases.

This block is ideal for:

• Brand slogans or taglines

• Promotional messages

• Repeating keywords or values

• Decorative separators between sections

• Logo, icon, or thumbnail marquees

---

Where to use this block

You can use Rolling text in sections that support blocks, such as:

• Homepage decorative sections

• Landing pages

• Campaign or promotional layouts

• Between major content sections as a visual break

---

How to add this block

1. Open the Theme Editor

2. Navigate to a section that supports blocks

3. Click Add block

4. Select Rolling text

5. Add scrolling items inside the block

6. Adjust animation and typography settings

---

How content works (Block structure)

Rolling text uses a looped list of items that scroll infinitely.

Rolling text
├── Text item
├── Extra heading text
├── Icon
└── Thumbnail

The list is duplicated automatically to create a seamless infinite scroll effect.

---

Scrolling items (Blocks)

You can add multiple item blocks inside Rolling text.

Available item types

Depending on your theme setup, Rolling text supports:

• Normal text
  Standard text items that scroll horizontally.

• Extra heading text
  Larger, bolder text for emphasis.

• Icon
  Decorative icons that scroll with text.

• Thumbnail
  Small images (logos, product thumbnails, badges).

You can freely mix and reorder these items.

---

Scrolling behavior

Speed

• Scrolling speed (Desktop)
  Controls how long one full scroll cycle takes on desktop.

• Scrolling speed
  Controls the scroll speed on mobile devices.

Lower values = faster scrolling
Higher values = slower scrolling

---

Direction

• Normal
  Scrolls from right to left.

• Reverse
  Scrolls from left to right.

---

Pause on hover

When enabled, scrolling pauses when the user hovers over the content.
This improves readability for longer text.

---

Spacing

Item spacing

Controls the gap between scrolling items.
This setting affects visual density and rhythm.

• Smaller spacing → compact look

• Larger spacing → airy, decorative look

---

Typography

Font size

Controls the base font size of scrolling text.

• Applies proportionally using theme font scaling

• Extra heading items automatically use heading font scale

---

Font type

When enabled, the block can inherit heading fonts instead of body fonts, making the scrolling text more impactful.

---

Layout settings

Desktop layout

Width (Desktop)

• Fit content

• Fill

• Custom width (percentage)

---

Mobile layout

Width (Mobile)

Same options as desktop, optimized for small screens.

---

Padding

Controls spacing around the Rolling text block:

• Top

• Bottom

• Left

• Right

Padding helps separate the scrolling content from surrounding sections.

---

Responsive behavior

• Scrolling is continuous on all devices

• Speed and width can differ between desktop and mobile

• Items scale responsively with font settings

• Animation remains smooth and looped

---

Tips for best results

• Keep individual text items short and readable

• Use Extra heading text sparingly for emphasis

• Combine text with icons or thumbnails for visual interest

• Use slower speeds for long phrases

• Enable pause on hover when text needs to be read

---

Common mistakes

Scrolling text feels too fast
→ Increase scrolling speed value

Content looks cluttered
→ Increase spacing or reduce number of items

Text hard to read
→ Increase font size or slow down animation

Block appears empty
→ Make sure at least one scrolling item is added

---

Limitations

• Rolling text is decorative by design

• Not suitable for long paragraphs

• Overuse may impact visual clarity

• JavaScript animation is disabled only in design mode previews

---

Common use cases

• “Free shipping • Easy returns • Secure checkout”

• Brand value statements

• Repeating promotional messages

• Logo or partner marquees

• Decorative separators between sections

---

Need help?

If the Rolling text block isn’t working as expected:

• Make sure at least one item block is added

• Check scrolling speed and direction

• Disable pause on hover if animation feels stuck

• Preview on both desktop and mobile before saving