Retina includes a flexible Slideshow section to display large images. Assemble images into a sequence and combine them with headings and call-to-action buttons.
The Slideshow section can be used as a top 'hero' image, to promote sales or specials, simply as a gallery to showcase some high-quality images, or to display introductory content directing to more informative pages.
Section Settings
Click the Slideshow section to open its general settings.
Wide display
Enable Wide display to have the section expand beyond its default container size.
Slideshow height
Control the maximum height for your slideshow images by selecting Small, Medium, Large, or Full screen [default]. Select Original for the height to match the image's original height.
Slideshow height for mobile
Set a maximum image height for mobile devices by selecting Small, Medium, Large, or Full screen [default]. Select Original for the height to match the image's original height.
Desktop navigation style
There are two options for Desktop navigation style: Dots and Buttons.
Use Dots to have small circles for each slide centered at the base of the section. Customers can click the dots to navigate through the slides
Use Buttons to feature 'next' and 'previous' buttons on the left and right of the slides.
Transition
Use the Transition setting to control whether the slides Fade or Slide into view.
Slide rotation
Use the Change slides every setting to control the duration of each slide's visibility. Select a value between 1 and 12 seconds. To disable automatic rotation, set this to 0.
Slide Blocks
Click one of the preloaded Slide blocks (Slideshow) to customize its content.
Image
Click Select Image to connect an image with the slide.
Focal point
Select an option for the Image focal point to shift the focus of the image to the Top, Left, Center, Right, or Bottom.
Headings
Add an optional Heading and Subheading with the provided fields.
Text position
Control the position for the text by selecting an option from the Text position dropdown.
The options are:
- Top left
- Top center
- Top right
- Center left
- Center
- Center right
- Bottom left
- Bottom center
- Bottom right
Overlay opacity
Use the Overlay opacity slider to control the level of opacity (and transparency). Select a value closer to 1% for more transparency and a value closer to 100% for greater opacity. Disable the overlay by setting to 0%.
Colors
Select an Overlay color and Text color. These should contrast one another for the best results.
Links
To connect another page with the slide, use either the Background link or Link field.
The Background link will turn the entire slide into a link, while the Link adds a button.
Control the text for the button with the Button label field, then select one of the Button style options.