Seventh > Sections > Scrolling text

Scrolling Text

The Scrolling Text section creates a horizontal scrolling marquee display with text, images, and other content. Perfect for announcements, promotions, or continuous content displays.

What It Does

This section displays content in a continuous horizontal scroll:

• Content scrolls horizontally across the screen
• Supports text, images, buttons, icons, and countdown timers
• Continuous loop animation
• Pause on hover option
• Adjustable scroll speed and direction

Section Settings Explained

Scrolling Options

Scroll Direction Controls which direction content scrolls:

• Left to Right (LTR) - Content scrolls from left to right (default)
• Right to Left (RTL) - Content scrolls from right to left

Scroll Speed Controls how fast content scrolls:

• Range: 20-300 seconds (default: 100)
• Lower values = faster scrolling
• Higher values = slower scrolling

Pause on Mouseover

• When enabled: Scrolling pauses when mouse hovers over banner
• When disabled: Scrolling continues continuously
• Default: Enabled

Horizontal Padding Controls horizontal spacing around content

Typography

Text Size Controls the size of text in the banner

Section Design Options

Color Scheme

• Choose from your theme's color schemes
• Applies to the entire section

Top Padding

• Controls space above the section
• Options: None, Smaller, Default, Larger, Largest

Bottom Padding

• Controls space below the section
• Options: None, Smaller, Default, Larger, Largest

Extend Section Width

• When enabled: Section extends to full browser width
• When disabled: Section stays within container width

Show Media Background

• When enabled: You can add a background image or video
• When disabled: Uses solid color background

Background Image/Video (Only appears when "Show Media Background" is enabled)

• Upload an image or video for the section background

Background Overlay (Only appears when background is set)

• Add a color overlay on top of the background
• Adjust transparency for subtle effects

Parallax Effect (Only appears when background is set)

• Adds a scrolling parallax effect to the background
• Options: None, Subtle, Medium, Strong

Push Content Down (Only appears when background is set)

• Adjusts how content sits on the background

Make Section Full Height

• Makes the section fill the entire viewport height

Available Blocks in Scrolling Text

Each scrolling banner can contain any of these blocks:

Content Blocks:

• Simple Text - Text content that scrolls
• Simple Image - Images within the scrolling content
• Simple Countdown - Countdown timers
• Button - Buttons (though scrolling may affect usability)
• Icon - Icons within the content

Block Arrangement:

• Blocks appear in sequence and scroll together
• Multiple blocks create continuous scrolling content
• Content repeats to create seamless loop

Common Use Cases

Announcement Bar

• Display store announcements
• Show shipping information
• Highlight special offers
• Perfect for top of page

Promotional Messages

• Showcase sale information
• Display promotional codes
• Highlight limited-time offers
• Great for seasonal promotions

Social Proof

• Display customer testimonials
• Show review snippets
• Highlight awards or certifications
• Build trust and credibility

Product Highlights

• Showcase featured products
• Display product names or tags
• Include product images
• Great for product promotions

Tips for Success

Scrolling Settings

• Speed - 80-120 seconds works well for readability
• Direction - Left to right is standard, right to left for variety
• Pause on Hover - Enable for better user experience

Content

• Keep It Short - Brief messages work best
• Repetition - Content repeats automatically
• Visual Balance - Mix text and images for interest

Typography

• Text Size - H3-H4 works well for most content
• Readability - Ensure text is readable while scrolling
• Contrast - Use high contrast colors

Spacing

• Horizontal Padding - Medium to Large works well
• Content Gap - Space between blocks for clarity
• Section Padding - Minimal padding for compact display

Troubleshooting

Content Not Scrolling

Problem: Banner content doesn't scroll.

Solutions:

1. Check Blocks - Ensure blocks are added to the section
2. JavaScript - Verify theme JavaScript is loading
3. Browser Support - Check browser compatibility
4. Speed Setting - Verify speed is set correctly

Scrolling Too Fast or Slow

Problem: Scroll speed doesn't feel right.

Solutions:

1. Adjust Speed - Lower values = faster, higher = slower
2. Test Different Speeds - Try 80-120 for standard speed
3. Content Length - Longer content may need slower speed

Content Not Visible

Problem: Content is cut off or not displaying.

Solutions:

1. Check Blocks - Verify blocks are added correctly
2. Content Width - Ensure content fits within section
3. Padding - Adjust horizontal padding if needed

Pause Not Working

Problem: Banner doesn't pause on hover.

Solutions:

1. Check Setting - Verify "Pause on Mouseover" is enabled
2. JavaScript - Verify theme JavaScript is loading
3. Browser Support - Check browser compatibility