How to Use Scrolling Text Blocks in Squarespace
TL;DR:
- Scrolling blocks display horizontally scrolling text on your site
- Add them through the block editor and customize text content easily
- Make text clickable by adding URLs in the Link field
- Adjust design elements like wave intensity, scroll speed, and direction
- Scrolling effects won't work on iOS devices with 'Reduce Motion' enabled
Scrolling text blocks are a straightforward way to add movement to your Squarespace site. They work well for announcements, featured content, or drawing attention to specific messages.
Adding and Customizing Scrolling Blocks
Here's how to add a scrolling text block to your Squarespace site:
- Open your page or post editor and click 'Add Block'
- Select the 'Scrolling' option from the block menu
- Click the block editor (pencil icon) to add or change your text
- To make text clickable, add a URL in the Link field or use the link icon
- Switch to the 'Design' tab in the editor to customize appearance
When adding links, make sure they point to relevant content that actually helps your visitors. Random links just for the sake of it won't improve anyone's experience.
Editing and Organizing Text Items
The scrolling block comes with default text items that you can edit or build on:
- Add new items by opening the Content tab and clicking 'Add Item'
- Edit or delete existing entries using the options in the Content tab
- Rearrange items by dragging and dropping them where you want them
You can have multiple text items scrolling in sequence, which works well for displaying several pieces of information or multiple links.
Design and Animation Customizations
The design options give you control over how the text looks and moves:
Wave Intensity and Width: Controls how much the text moves up and down as it scrolls
Text Style and Size: Standard font and sizing options
Scroll Direction and Speed: Choose left or right movement and set the speed
Additional Effects: Includes pause on hover, fade at edges, item spacing, stroke style, blend mode, and blur settings
The wave effect can be quite subtle or more pronounced depending on your site's style. Test different settings to see what works best with your overall design.
Technical Considerations
Scrolling blocks work on most devices and browsers, but there's one important exception. iOS devices with the 'Reduce Motion' accessibility setting enabled won't display the scrolling animation. This is by design to help users who are sensitive to motion effects.
This means some of your visitors might see static text instead of the scrolling effect. Make sure your text still makes sense and looks good even without the animation.
FAQs
How do I make scrolling text clickable?
Add a URL in the Link field within the block editor. The entire text item becomes clickable when you do this.
Can I control how fast the text scrolls?
Yes, the scroll speed is adjustable in the block settings. You can make it move slowly for easy reading or faster for more dramatic effect.
Why isn't my scrolling block working on some mobile devices?
Check if visitors have 'Reduce Motion' enabled in their iOS accessibility settings. This feature stops animations and will make your scrolling text appear static.
How many text items can I add to one scrolling block?
There's no strict limit, but too many items can make the scrolling effect feel cluttered. Test with different amounts to find what works for your content.
Jargon Buster
Fluid Engine: Squarespace's design system that enables advanced effects like custom strokes and blur options
Block Editor: The tool you use to add and configure content blocks in Squarespace
Reduce Motion: An iOS accessibility feature that disables animations to help users who are sensitive to motion effects
Wrap-up
Scrolling text blocks can add visual interest to your Squarespace site without being overwhelming. They work particularly well for highlighting key information or creating interactive elements that encourage clicks.
The key is using them purposefully rather than just because they look cool. Consider whether the scrolling effect actually helps communicate your message or if it might distract from more important content on the page.
Remember to test how your scrolling blocks look on different devices and consider how they'll appear to users with motion sensitivity settings enabled.
Join Pixelhaze Academy for more Squarespace tutorials and design guidance.