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
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
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
Border
Corner radius
Available for Full width padded and Page width options.
Dropshadow
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