Slideshow
Last updated
Last updated
Layout:
Desktop/mobile height: Choose between Adapt, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, Small, Medium and Large, for both desktop and mobile. This setting will apply to all blocks.
Stack content: By default, text content is positioned over the image (the never option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on mobile only or always to stack on bock desktop and mobile.
Functionality:
Enable autoplay: This rotates the slides automatically. If you have concerns about accessibility, we do not recommend enabling this option. When enabled, a play/pause button appears. You can set styling and alignment below.
Autoplay speed: If autoplay is enabled, set the autoplay speed.
Enable looping: Unless enabled, the previous button on the first slide and the next button on the last slide are disabled. Enabling this option allows the smooth cycling through the slides.
Animation style: Choose between a fade or slide animation when users navigate between slides.
Navigation:
Button position: Choose overlay to always have the arrows visible on top of the slide, choose hover to turn the user's cursor into a previous/next button or choose below to display them underneath the banner.
Button style: Choose between primary, secondary or text for the button (when overlay position is selected) and the play/pause button (when autoplay is enabled).
Counter position: Choose to display the counter over or below the slide content.
Counter style: Choose between a simple counter or a progress bar.\
Autoplay button:
Button alignment: Choose top left, center or top right
Button display: Always display the play button or only display it on hover/focus.
Two block types are available:
Media: Choose a desktop image and, optionally, a mobile image
Layout:
Media frame: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
Media content padding: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. Default aligns the content to the page width where possible.
Text content:
Horizontal and vertical alignment: Text can be aligned to different horizontal and vertical alignments, depending on what works best for your image.
Colors:
Enable overlay: Enable this to improve contrast between the media and the content
Overlay color: Choose the overlay color and adjust the gradient to your liking
This block allows you to highlight key products along with a piece of visual media, either an image or video.
Media: Choose a desktop image and, optionally, a mobile image
Layout:
Media frame: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
Media content padding: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. Default aligns the content to the page width where possible.
Products: These horizontal/vertical settings determine the positioning of the mini products relative to the media (unless content is stacked, in which case it will always be below the media).
Colors:
Enable overlay: Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
Overlay color: Choose a linear gradient to apply when the overlay is enabled.
Can't find the setting you're looking for? The following settings are explained in detail in our
Can't find the setting you're looking for? The following settings are explained in detail in :
