A Beginner’s Guide to Squarespace Scrolling Block
You can create an animated text marquee that will scroll across the screen using the Squarespace scrolling block.
Scrolling blocks are like tiny marquees that let your message scroll across the page.
Similar to a news ticker, you can use them to grab attention for important announcements, cool slogans, or anything else you want visitors to see right away.
Scrolling blocks can only feature text, not images, but you can add unicode characters or even throw in some emojis for extra pizzazz!
How to add a scrolling block to Squarespace
Here are a few examples of scrolling block with different design settings:
This scrolling block has faded edges
This scrolling block has faded edges
This scrolling block is the opposite direction.
This scrolling block is the opposite direction.
This scrolling block has a wave.
This scrolling block has a wave.
This scrolling block will pause on a hover (desktop only)
This scrolling block will pause on a hover (desktop only)
Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the scrolling option form the list of content blocks.
Double click on the scrolling block, or click once and select the pencil icon to open the content block.
The content tab is where you will add your text. You can add multiple items and adjust the distance between them on the design tab.
You can also add an active link, ideal for any scrolling bar that is announcing information that can be found on a different page.
Use the design tab, there are a lot of options like wave intensity, text style and size, direction, and speed.
You can use the settings in the design tab to add a background color, border (stroke), adjust the corner radius, padding, and you have options for both blur and blend mode.
You can also fade the edges and have the scroll effect pause on a hover, as seen in the scrolling examples on on this page!
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
Squarespace scrolling block design settings
Many of the design settings for a scrolling block can be found on the design tab for the individual block.
The font options (both heading & paragraph styles) use the site wide heading and paragraph font settings you assigned in your site style menu. You wont be able to change the scrolling marquee block font style separately.
Using the color menu, you can manually adjust the background color and border (stroke) color for a scrolling block for any color theme.
How to customize the Squarespace scrolling block with CSS
This tutorial will teach you how to use custom code to modify the style of your scrolling text block, beyond what you can do with your design menu options.
Where you can learn more about Squarespace content blocks
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog
Squarespace
made simple
Get all the info you need to confidently
launch your Squarespace website ASAP.