Announcement scroller

The Announcement scroller shows scrolling messages with icons, buttons, and images. Let customers know about current promotions, new products, or other need-to-know updates with links to more info.

Announcement blocks

Icon, text, and button

Alert, text, and button

Stacked text

Icon

Image

Button

Announcement blocks

---

Click the arrow next to the section, then click (+) Add block. Select one of six types of announcements.

_{Click an announcement block to add content}

Icon text and button

Display an icon, text, and button inline.

Text and layout

Text
Text size	1 - 4
Horizontal space between text and button	1 - 5
Button position	Inline Below
Mobile button position	Inline Below

Icon

Icon
Use custom icon
Custom icon
Icon size	S M L XL
Icon frame	None Circle Square
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Button

Link
Label
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Alert text and button

Display a flashing alert icon, text, and button inline.

Text and layout

Text
Text size	1 - 4
Space between text and button	1 - 5

Button

Link
Label
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Alert icon

Alert color

Stacked text

Display two announcements in a stacked column.

Space between announcements	1 - 5
Announcement 1 Text
Announcement 1 Text size	1 - 4
Announcement 2 Text
Announcement 2 Text size	1 - 4

Icon

Icon
Use custom icon
Custom icon
Icon size	S M L XL
Icon frame	None Circle Square
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Icon

Icon
Use custom icon
Custom icon
Icon size	S M L XL
Icon frame	None Circle Square
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Image

Image
Mobile image
Image ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (4:5) Custom
Mobile image ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (4:5) Custom
Corner radius
Apply circle crop to image
Image height	16 - 200
Mobile image height	16 - 200

Button

Link
Label
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft

Layout

You can increase or decrease the space between announcements, and choose to display announcement content at full width.

_{Click section to find settings}

Gap	0 - 200 px
Mobile gap	0 - 200 px
Full width
Vertical padding	0 - 27

Scroll behaviour

---

In the section settings, change the duration (speed) and direction of scrolling.

• Use the Scroll duration slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.

• Choose to scroll content towards the Left or Right.

Click section to find settings

Show on home page only
Scroll duration	5 - 60 seconds
Mobile scroll duration	2 - 40 seconds
Pause on hover
Scroll direction	Left Right

Section styles

---

Customize general style options for the section and content area. Settings for Content area allow you to adjust the width, borders, and dropshadow of the container of the section content.

_{Click section to find settings}

Content area

Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Set content to page width
	Available for Full width padded and Page width options.

Section

Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more