Scrolling blocks

Add a horizontally moving stream of text to your page to capture visitors' attention.

Last updated April 9, 2024

Use scrolling blocks to add text that scrolls horizontally across the page, similar to a theater marquee or news ticker. This is a great option for adding visual flair to your text, or drawing visitors' eyes to important information.

Watch a video

Add a scrolling block

To add a scrolling block:

  1. Edit a page or post, click Add Block or an insert point, then click Scrolling. For help, visit Adding content with blocks.
  2. Open the block editor by clicking the pencil icon on the block.
  3. In the Content tab, add or edit text items.
  4. To turn the scrolling block into a clickable link, add a web address in the Link field, or click “the to add different types of links. When visitors click the scrolling block, it takes them to the link you added.
  5. Click Design to customize the block.
A_scrolling_block_with_the_text_Dream_It.gif

Note

On iOS devices, scrolling blocks won't scroll if the visitor has the Accessibility feature Reduce Motion activated.

Add and edit text items

When you add a scrolling block, it includes two items by default. One includes the text Dream It, and the other includes a "wavy dash" emoji that acts as a divider.

You can add new items or edit existing items with your own text.

Add new items

To add a new item:

  1. Click Edit on the page with the scrolling block, click the block, then click the pencil icon or Edit.
  2. In the Content tab, click Add Item.
  3. This creates a new item with default text. To edit the text, click the item in the list and click into the Text field.

Edit existing items

To edit, duplicate, or delete existing items, click the item in the Content tab of the block editor. Edit text in the field, or click Duplicate or Delete.

You can also delete items directly from the Content tab by clicking the trash can icon.

Rearrange items

The item list in the Content tab sets the order of scrolling text. To rearrange items:

  1. Click Edit on the page with the scrolling block, click the block, then click the pencil icon.
  2. In the Content tab, click and hold the :: icon to the left of the item title.
  3. Drag the item to the place you want it to appear in the list.
  4. Repeat for other items until the list is in the order you want.

Customize the design

In the Design tab of the block editor, you can customize the look of the scrolling block in a variety of ways. We recommend experimenting with the different settings until you find a combination you like.

Each scrolling block has its own design settings. You can't automatically apply settings to all scrolling blocks on your site.

Text wave

You can add a wave to the text, making the text rise and fall vertically in the block, with the following tweaks:

  • Wave Intensity - Set the vertical height of the wave. The far left setting has no wave and the far right has the highest wave height.
  • Wave Width - Select SML, or ... for a custom setting. At a smaller wave width, more peaks and valleys of the wave display in your scrolling block. At a larger wave width, the wave may appear as a long slope and its peak may not be visible.

Here's an example of a scrolling block with a medium wave intensity and a small wave width:

A_scrolling_block_with_the_text_Dream_It_that_goes_up_and_down_in_waves_.gif

Text style and size

Set the text style and size with these tweaks:

  • Text Style - Select Paragraph or Heading. The text follows the global paragraph or heading styles based on your choice. This sets text font and other style settings, but not size.
  • Text Size - Select SML, or ... for a custom setting.

Change text color in site styles. The text color follows Paragraph Color or Heading Color tweaks under Scrolling in the section's color theme, depending on what you select for the text style.

If you add a background color to the scrolling block, text follows Paragraph Color on Background or Heading Color on Background under Scrolling.

Keep in mind, the "wavy dash" is an emoji with a set color that can't be customized.

Scroll style

Customize scroll behavior and appearance with these tweaks:

  • Direction - Set the block to scroll left or right.
  • Speed - Set the scrolling speed to 0.5x1x, or 2x.
  • Pause on hover - Switch this toggle on to make the scroll pause when visitors hover over the block. The animation won't pause while you're in Edit mode.
  • Fade at edges - Switch this toggle on to make the text semi-transparent at the left and right edges of the block.
  • Item Spacing - Set the distance between text items in the scroll.

Other style options

To customize the appearance of the scrolling block:

  • Stroke - Enable a solid or dotted line outlining the block. For both solid and dotted lines, set the stroke Color and Thickness
  • Blend Mode - Use the dropdown menu to choose a transparency setting. These effects are ideal if you're overlaying a scrolling block in front of an image or other visual content.
  • Blur -  Switch the toggle on to blur either the Element or Backdrop, and use the slider to adjust the level of blurriness.

Accessing this feature

Stroke, Blend Mode, and Blur customizations are available for Fluid Engine sections. For sections using the classic editor, only Stroke is available.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.