How to Add a Scrolling Text Block to Your Squarespace Website

Do you have a brand new offer? A message you want to highlight? Maybe a social media account you want people to follow?

Then you might want to try Squarespace’s scrolling text block.

---

What is the Scrolling Text Block?

The scrolling text block animates your text so that it runs horizontally across your browser. Squarespace describes it as “similar to a theater marquee or news ticker”. It’s great for bringing attention to a line of text, but should be used in a limited way.

This block is available in Squarespace 7.0 and 7.1 and can be used with both the fluid engine editor and the classic editor (like this blog).

Here is an example:

This is a scrolling text block

✏️

This is a scrolling text block ✏️

---

How to Add a Scrolling Block to Squarespace

1. Click EDIT on the page you want the scrolling block

2. Click ADD BLOCK + for the Fluid Engine Editor or click on an insert point for the Classic Editor

3. Choose Scrolling from the pop-up

---

Add Your Text to the Scrolling Block

1. Click on the pencil icon to access the editor (if you don’t see the pencil click on the block)

2. In the Content tab click Add Item

3. Click on the default text to edit

4. Write your new text in the Text field

You can also add a link by clicking Attach Link. This adds a link to the entire scrolling block.

---

Can I Add Images to the Squarespace Scrolling Block?

You can’t add jpg, tiff or gif images to the scrolling block, but you can add symbols, Unicode characters and even emojis. Squarespace even uses an emoji in its default text. Just paste them in!

---

How to Customize the Design of the Scrolling Block

You can adjust several aspects of the scrolling block from the design tab in the scrolling block editor. To access the design tab:

1. Click on the pencil icon to access the editor (if you don’t see the pencil click on the block)

2. Click on the Design tab

 Now you can change the following:

Wave Intensity: From a flat line to a large wave.

Text Style: Choose either a heading style or paragraph style for your text.

Text Size: Choose from small, medium or large. Or, you can click the three dots to choose an exact size in rem.

Direction: The text will flow from left to right or right to left.

Speed: Choose from half speed (0.5x), regular speed or double speed.

Pause on hover: Toggle this on so that viewers can stop the scroll to read. Note: this doesn’t show in editor mode, but will show in preview.

Fade edges: Toggle this on to fade the sides of the scroll so they “fade away”. This is helpful when using the classic editor as the scroll won’t go to the edges of the browser.

Item Spacing: This changes the space between your text item(s).

You can also choose to add a background or stroke to the scrolling block. The Fluid Engine editor will also give you the option of changing the blur or blend of the block.

---

For now at least you can’t change the text style (beyond paragraph or heading) or change the colour. You’ll need to use code for that. But you can get a pretty customized design for your scrolling block without using any code!