Scrolling text banner

Announcement Bar
Background video
Before and after
Benefits product
Benefits video reels
Brands
Collage
Collection feature
Collection list
Feature collection
Featured navigation
Features banner
Grid view
Header
Image banner
Image with text
Image with video
Image with video (Home)
Logo banner
Lookbook
Multicolumn
Newsletter with image
Parallax section
Products slider
Rich text with image
Scrolling text banner
Shoppable image
Shoppable video
Shoppable video reels
Slideshow
Testimonial video reels

What is the Scrolling Text Banner section?

The Scrolling Text Banner section offers a dynamic and visually engaging way to showcase your content. This section features separate images for desktop and mobile, but its standout feature is the scrolling text overlay, which creates a sleek animated effect. You can disable the background image for a minimalist look and focus solely on the text animation. With customizable animation speed and an optional call-to-action button, this section provides versatile options to grab attention and convey your message effectively.

Main Settings

General Settings

  • Heading: Add a title for the section.
  • Make section full width: Enable this option to extend the section across the full width of the page.
  • Animation speed: Adjust the speed of the scrolling text (1 for slowest, 10 for fastest).

Section Height

  • Height: Choose between "Adapt to Image," "Fixed Height," or "Fixed Height and No Image."
  • Desktop fixed height: Set a specific height (in pixels) for desktop devices when "Fixed Height" is selected.
  • Mobile fixed height: Set a specific height (in pixels) for mobile devices when "Fixed Height" is selected.

Large Screen Version

  • Image: Upload or select an image for large screens.
  • Large screen text alignment: Vertically align text (Top, Center, or Bottom) and horizontally align text (Left, Center, or Right).

Mobile Version

  • Image: Upload or select an image for mobile devices.
  • Mobile text alignment: Vertically align text (Top, Center, or Bottom) and horizontally align text (Left, Center, or Right).

Colors

  • Heading color: Set the color of the heading text.
  • Section background color: Choose the background color for the section.
  • Background opacity: Adjust the transparency of the section's background.
  • Text color: Set the color of the scrolling text.
  • Image container color: Define the background color of the image container.
  • Image container opacity: Adjust the transparency of the image container.

Section Spacing

  • Distance from the top: Adjust the space between the section and the top of the page.
  • Distance from the bottom: Adjust the space between the section and the bottom of the page.

‍

Customize heading block

Click one of the preloaded heading block to customize it.


Customize button block

Click one of the preloaded button block to customize it.

‍

Mobile view example

Back