Banner additional settings

Appearance styles settings

When you select a template for a Sitecore Discover banner widget, you configure settings to personalize the appearance of the widget.

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 the following fields for basic settings:

Field	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 the following fields for image settings:

Field	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 the following fields for box model settings:

Field	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 the following fields for overlay text settings:

Field	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 the following fields for overlay position settings:

Field	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 the following fields for font settings:

Field	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.

Slide settings

Set up some or all of the following fields for variables for each slide's settings:

Field	Description
Image Url	Source URL of the image on this slide for desktop and tablet devices.
Image Url (mobile)	Source URL of the image on this slide for mobile devices.
Image Alt	Hover text for the image.
Clickthrough URL	URL of the destination page associated with the image on the slide.

Autoplay settings

Set up some or all of the following fields for autoplay settings:

Field	Description
Enable Autoplay	Whether you want the carousel to loop continuously. Enter 1 if you want autoplay and 0 if you do not want autoplay. Default: 0.
Autoplay Speed	Time, in milliseconds, between each slide if you enable autoplay. Default: 3000.

Slider container style settings

Set up some or all of the following fields for slider container style settings:

Field	Description
Slider Container Background	Background color of the banner. Use the color CSS property.Default: transparent.
Slider Container Border	Border around the slide container. Use the border CSS shorthand property. This sets the same width, color, and style for all four borders.
Slider Container Border Radius	Corner roundess of the slide container border. Use the border-radius CSS property.For example, set this variable to % to get a circular shape.5px 5px 0 0 to apply a 5 pixel radius to the top-left and top-right corners, and no radius to the bottom-left and bottom-right corners.Default: 0.
Slider Container Box Shadow	Box shadow of the slide container. Use the box-shadow CSS property.
Slider Container Margin (desktop &tablet)	Margin around the slide container for desktop and tablet devices. Use the margin CSS shorthand property.
Slider Container Margin (mobile)	Margin around the slide container for mobile devices. Use the margin CSS shorthand property.
Slider Container Height (desktop & tablet)	Height of the slide container for desktop and tablet devices. Use pixels (px), percentage (%), viewport height (vh), or em.
Slider Container Height (mobile)	Height of the slide container for mobile devices. Use pixels (px), percentage (%), viewport height (vh), or em.
Slider Container Width (desktop & tablet)	Width of the slide container for desktop and tablet devices. Use pixels (px), percentage (%), viewport width (vm), or em.
Slider Container Width (mobile)	Width of the slide container for mobile devices. Use pixels (px), percentage (%), viewport width (vm), or em.

Image style settings

Set up some or all of the following fields for image style settings:

Field	Description
Image Height (desktop & tablet)	Height of the image for desktop and tablet devices. Use pixels (`px`), percentage (`%`), viewport height (`vh`), or `em`.
Image Height (mobile)	Height of the image for mobile devices. Use pixels (`px`), percentage (`%`), viewport height (`vh`), or `em`.

Arrow style settings

Set up some or all of the following fields for arrow style settings:

Field	Description
Display Arrows	Whether you want to show or hide navigation arrows. Enter 1 if you want to show arrows and 0 if you do not want to show arrows. Default: 1.
Arrow Color	The color of the arrow on the slide. Use the `color` CSS property. Default: `#fafafa` (light grey)
Arrow Size (desktop & tablet)	The arrow size for desktop and tablet devices. Use pixels (`px`).
Arrow Size (mobile)	The arrow size for mobile devices. Use pixels (`px`).
Arrow Top Position (desktop & tablet)	The position of the top of the arrow for desktop and tablet devices. Use pixels (`px`).
Arrow Top Position (mobile)	The position of the top of the arrow for mobile devices. Use pixels (`px`).

Dot style settings

Dots indicate that there is more than one image. Set up some or all of the following fields for dot style settings:

Field	Description
Display Dots	Whether you want to show dot pagination. Enter 1 if you want to show dots and 0 if you do not want to show dots. Default: `1`.
Dots Alignment (desktop & tablet)	Alignment of dots on the slide for desktop and tablet devices. Enter left, right, or center. Default: center.
Dots Alignment (mobile)	Alignment of dots on the slide for desktop and tablet devices. Enter left, right, or center. Default: center.
Dots Active Color	Dot color for the currently displayed slide. Use the `color` CSS property.
Dots Color	Dot color for the inactive slides. Use the `color` CSS property.
Dots Size (desktop & tablet)	Dot size for desktop and tablet devices. Use pixels (`px`).
Dots Size (mobile)	Dot size for mobile devices. Use pixels (`px`).
Dots Bottom Position (desktop & tablet)	Position of the bottom of the dot for desktop and tablet devices. Use pixels (`px`).
Dots Bottom Position (mobile)	Position of the bottom of the dot for mobile devices. Use pixels (`px`).
Dots Space Alignment (desktop & tablet)	Space between the slide container and the dot container for desktop and tablet devices. The variable is only applicable when dots are left or right, aligned. Use pixels (`px`), percentage (`%`), or `em`. Default: 10 px.
Dots Space Alignment (mobile)	Space between the slide container and the dot container for desktop and tablet devices. This variable is only applicable when dots are left or right, aligned. Use pixels (`px`), percentage (`%`), or `em`. Default: 10 px.

If you have suggestions for improving this article, let us know!