Magnolia - Scrolling text banner

Magnolia features a scrolling text banner on Home Option 2, as well as on the Sales page.

How to add your text to the scrolling text banner

On the front end of your site, the text banner will slowly scroll to the left, marquee-style:

In the Block Editor, the animation doesn't run so that you are able to edit the text. You'll see all of the text for the entire banner like this:

Simply select the demo phrases and replace them with with your own!

We recommend leaving the spacing dots in place, since they are what separate each phrase and space them apart. You can use different text for each phrase, or repeat the same phrase over and over again like on Home 2:

Change scrolling text banner appearance

Background Color: Click on the Row Layout block that encompasses the banner. Click on the Style tab and select your desired background color.

Text Color: Click on the text in the Block Editor. Click on the Style tab and select your desired text color.

Dot Color: Click on the text  in the Block Editor. Click on the Style tab, then go to Advanced Highlight Settings and select your desired color.

Font: Click on the text in the Block Editor. Click on the Style tab, then go to Advanced Typography Settings to select a different font.

Spacing between items: Click on the text in the Block Editor. Click on the Style tab, then go to Advanced Highlight Settings. Scroll to the bottom and find the padding section. Change the Right and Left padding values to adjust the spacing between items.

Resetting the banner

Made an editing error and want to start over? Super easy – just insert a fresh copy of the block using the Magnolia Block Collection.

Change scrolling text banner speed

Requires light code editing. Please proceed with caution.

Go to Appearance > Theme File Editor > js > sliding-banner.js. Look for this section:

    // Define different speed factors for desktop and mobile
    const speedFactor = 20; // Desktop speed factor
    const mobileSpeedFactor = 5; // Mobile speed factor<br>

20 is the default speed on desktop; 5 is the default speed on mobile. You can update these numbers to adjust the speed.