Banner appearance styles settings
When you select an appearance style for a Sitecore Discover banner widget, you configure variables to personalize the appearance of the widget. These variables are grouped into different settings.
Unless specified, settings apply to all device types.
Basic settings
Depending on the banner widget you select, you set up some or all of these basic variables:
Variable |
Description |
---|---|
Image Url |
Source URL of the banner image for desktop and tablet devices. |
Image Url [mobile] |
Source URL of the banner image for mobile devices. |
Image Url [email] |
Source URL of the banner image for email messages. |
Image href |
Destination URL that the user goes to when they click the image banner. |
Clickthrough URL |
Destination URL that the user goes to when they click the banner. |
Image settings
Set up some or all of these basic variables:
Variable |
Description |
---|---|
Max Height |
Exact height of the image for desktop and tablet devices. Use pixels ( |
Max Height [mobile] |
Exact height of the image for mobile devices. Use pixels ( |
Max Width |
Exact width of the image for desktop and tablet devices. Use pixels ( |
Max width [mobile] |
Exact width of the image for mobile devices. Use pixels ( |
Image separation |
Space between images for desktop and tablet devices. Use pixels ( |
Image separation [mobile] |
Space between images for mobile devices. Use pixels ( |
Image Height |
Height of the image to fill the container for desktop and tablet devices. Use pixels ( |
Image Height [mobile] |
Height of the image to fill the container for mobile devices. Use pixels ( |
Box model settings
Set up some or all of these box model variables:
Variable |
Description |
---|---|
Padding |
Padding around the container of the image banner. Use the |
Margin |
Margin around the container of the image banner. Use the |
Border |
Border around the container of the image banner. Use the |
Background |
Background color of the banner. Use the Default: |
Overlay text settings
Set up some or all of these overlay text variables:
Variable |
Description |
---|---|
Image overlay title |
Title text that appears over the image. |
Image overlay subtitle |
Subtitle text that appears over the image. |
Image overlay button |
Text appears on the button on the image. |
Overlay position settings
Set up some or all of these overlay position variables:
Variable |
Description |
---|---|
Image overlay max width |
Maximum width of the overlay text for desktop and tablet devices. Use pixels ( |
Image overlay max width [mobile] |
Maximum width of the overlay text for mobile devices. Use pixels ( |
Image overlay top position |
Starting top position of the overlay text for desktop and tablet devices. Use pixels ( |
Image overlay top position [mobile] |
Starting top position of the overlay text for mobile devices. Use pixels ( |
Image overlay left position |
Starting left position of the overlay text for desktop and tablet devices. Use pixels ( |
Image overlay left position [mobile] |
Starting left position of the overlay text for mobile devices. Use pixels ( |
Fonts settings
Set up some or all of these font variables:
Variable |
Description |
---|---|
Font Family Light |
Font family for the title and subtitle. Use the |
Font Family Bold |
Font family for the button text. Use the |