Scrolling Text widget

The Scrolling Text widget lets you create continuously moving text that scrolls across the screen from right to left.

It can be used as a simple scrolling text line or combined with static text in the foreground and larger scrolling text behind it. This makes it useful for creating visual dividers, promotional messages, category lists, keywords, or other attention-grabbing sections.

This article explains every setting and control available in the Scrolling Text widget, along with tips for using it effectively.

Layout

The Layout setting controls how the static and scrolling text are displayed.

Available options

• Main text + big scrolling text behind

  Displays main text in the foreground together with larger animated text scrolling behind it.

  This creates a more decorative, layered effect and works well for section introductions or statement blocks.

  
  

• Scrolling text only

  Displays only the animated scrolling text.

  This is ideal for simple scrolling messages, keywords, categories, or visual separators between sections.

💡 Tip

Use Scrolling text only when you want a clean ticker-style effect. Use Main text + big scrolling text behind when the widget should become a more prominent design element on the page.

Main Text

When using the Main text + big scrolling text behind layout, you can enter the static text that appears in the foreground.

The main text remains in place while the scrolling text moves behind it.

Keep this text relatively short so that the moving background text remains part of the overall design rather than competing with the main message.

Scrolling Text

Enter the text you want to continuously scroll across the widget.

The text moves automatically from right to left and repeats continuously.

You can use:

• Words
• Short phrases
• Categories
• Product or service names
• Promotional messages
• Separators between repeated items

Example

· Courses · Memberships · Coaching · Communities · Digital products ·

Adding symbols such as ·, —, •, or emojis between items can help visually separate repeated words and make the scrolling text easier to read.

Main Color

Controls the color of the main static text when using a layout that includes main text.

For a consistent design, use colors from your website's Global Colors whenever possible.

Scrolling Color

Controls the color of the animated scrolling text.

Tips

• Make sure there is sufficient contrast against the background
• Use a subtle color when the scrolling text sits behind main text
• Use a stronger brand color when the scrolling text is the main visual element

Text Font Family

Controls the font family used in the widget.

For visual consistency, it is usually best to use the same font family as the rest of your website.

💡 Best practice

Avoid introducing a completely different font just for the scrolling text unless it is an intentional part of your design.

Scrolling Font Size

Controls the size of the scrolling text.

Larger text creates a stronger visual effect, while smaller text works better for subtle ticker-style sections.

The ideal size depends on:

• The selected layout
• The amount of text
• The height of the section
• How prominent you want the scrolling effect to be

Remember to check the result on both desktop and mobile.

Speed

Controls how quickly the text moves across the screen.

The value is displayed in seconds (s) and controls the duration of the scrolling animation.

• Lower value = faster scrolling
• Higher value = slower scrolling

For example, a higher value such as 30s creates a slower and more relaxed movement than a lower value.

Common use cases

The Scrolling Text widget works particularly well for:

• Listing services or offers
• Displaying product categories
• Highlighting keywords or benefits
• Creating visual separators between sections
• Promotional messages
• Adding subtle movement to a page
• Creating decorative section introductions

Best practices

• Keep scrolling messages short and easy to scan
• Use separators between multiple items
• Choose a speed that makes the text comfortable to read
• Maintain sufficient contrast between text and background
• Avoid using multiple scrolling sections too close together
• Check the effect on both desktop and mobile
• Use animation as a visual enhancement rather than for essential information

⚠️ Important information should not be communicated only through moving text. Visitors should still be able to understand the page without needing to wait for a specific message to scroll into view.

Summary

• The Scrolling Text widget creates text that continuously moves from right to left
• Choose between scrolling text only or main text with scrolling text behind
• Customize the text, colors, font, size, and scrolling speed
• Use short, readable messages for the best result
• Use the effect selectively to add movement without distracting from the main content

Used well, scrolling text can add movement and personality to a page while helping important words, categories, or messages stand out.