Scrolling blocks

false

Scrolling blocks

Last updated August 04, 2026 22:44

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

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.
  2. Hover over the section and click Add block or + to open the block menu, then click Scrolling.
  3. Open the block editor by clicking the pencil icon on the block.
  4. In the Content tab, add or edit text items.
  5. To turn the scrolling block into a clickable link, add a web address in the Link field, or click The gear icon to add different types of links. When visitors click the scrolling block, it takes them to the link you added.
  6. Click Design to customize the block.

An example of a scrolling block with the text Dream It

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 S, M, L, 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:

An example of a scrolling block with the text Dream It that goes up and down in waves

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 S, M, L, 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.5x, 1x, 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.

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

Why isn't the block scrolling on mobile?

On iOS devices, scrolling blocks won't scroll if the visitor has Reduce Motion enabled. If you have an iOS device, enable Reduce Motion to test how your site displays, especially if your audience relies on accessibility features.

If you don't want a static scrolling block to appear on your site, you can hide the block on your mobile layout or use text blocks instead.

Watch a video (classic editor)

Was this article helpful?

Yes No

111 out of 293 found this helpful

Yes No

Scrolling blocks