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.

Note

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 (px), percentage (%), viewport height (vh), or em.

Max Height [mobile]

Exact height of the image for mobile devices. Use pixels (px), percentage (%), viewport height (vh), or em.

Max Width

Exact width of the image for desktop and tablet devices. Use pixels (px), percentage (%), viewport width (vm), or em.

Max width [mobile]

Exact width of the image for mobile devices. Use pixels (px), percentage (%), viewport width (vm), or em.

Image separation

Space between images for desktop and tablet devices. Use pixels (px), percentage (%), or em.

Image separation [mobile]

Space between images for mobile devices. Use pixels (px), percentage (%), or em.

Image Height

Height of the image to fill the container for desktop and tablet devices. Use pixels (px), percentage (%), viewport height (vh), or em.

Image Height [mobile]

Height of the image to fill the container for mobile devices. Use pixels (px), percentage (%), viewport height (vh), or em.

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 padding CSS shorthand property.

Margin

Margin around the container of the image banner. Use the margin CSS shorthand property.

Border

Border around the container of the image banner. Use the padding CSS shorthand property.

Background

Background color of the banner. Use the color CSS property.

Default: transparent.

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 (px), percentage (%), viewport width (vw), or em.

Image overlay max width [mobile]

Maximum width of the overlay text for mobile devices. Use pixels (px), percentage (%), viewport width (vw), or em.

Image overlay top position

Starting top position of the overlay text for desktop and tablet devices. Use pixels (px), percentage (%), or em.

Image overlay top position [mobile]

Starting top position of the overlay text for mobile devices. Use pixels (px), percentage (%), or em.

Image overlay left position

Starting left position of the overlay text for desktop and tablet devices. Use pixels (px), percentage (%), or em.

Image overlay left position [mobile]

Starting left position of the overlay text for mobile devices. Use pixels (px), percentage (%), or em.

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 CSS property.

Font Family Bold

Font family for the button text. Use the font-family CSS property.

Do you have some feedback for us?

If you have suggestions for improving this article,