Marquee Text (Scrolling text banner)

A scrolling, animated text banner

Updated over a week ago

This section is reminiscent of an illuminated marquee sign such as ones seen above the entrances of hotels, theatres, or other venues. Here's how to set up a virtual, fully customizable version you can use on your website!

Step 1 - Within the page editor, click "Add section" and find the "Marquee text" block

Step 2 - Customize the Section

The settings on the left will be reflected in the preview on the right. You can change the text, how it looks, functions, and more.

Section Settings

Padding: Adjusts how much open buffer space there is between the text and the things above and below it. The options are none, small, medium, or large.

Min height: Change where the text is displayed. The options are auto, and 50%, 75%, or 100% of the viewport height.

Fullscreen width: When enabled, the text will flow from one edge of the screen to the other. The alternative is restricted to the narrower width of the page content.

Fade edges: When enabled, the left and right edge of the text will have a fade effect.

Background color: Optionally, change the background color behind the text.

Background image: Optionally, add an image behind the text.

Text color: Optionally, change the color of the text.

Speed: Make the text move slower or faster.

Pause on hover: When enabled, the text will slow to a stop when the computer cursor is hovering over the text.

Acceleration when scrolling: When enabled, the text will move reactively when the user scrolls up or down on the page.

Text block Settings

Should be a link: When enabled, the text can function as a link to direct those who click on it to a different webpage.

Text: This is the scrolling text that will be displayed on the webpage.

Font style: Matching the rest of your website, the text can be displayed as either the Header or Paragraph style.

Font size: Click and drag to increase or decrease the font size.

Text transform: Override the text to display capitalized, all uppercase, or as originally typed in the "text" section above.

Use custom color for text: Optionally, choose a color for the text to be.

Use image instead of text: Optionally, upload an image to display with the text. You can also add alt text, change the image shape, image height, and even have the image rotate when scrolling.


Remember to save your changes!

Did this answer your question?