The Turbo theme 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.
Additionally, you can configure some mobile-specific settings for your slideshow such as image cropping and text position to fine-tune the content for all devices.
-
Section Settings
The section settings determine the look and layout of the overall section. Click the Slideshow section to open these settings.
Wide Display
Enable Wide display to have the section extend the full width of the screen. Otherwise, the section will sit in a 'container' on the page and with a limited width.
Text Animation
The Text animation setting allows you to choose which animation style for loading the slide's text. You can choose from: None, Fade in, Fade up, or Fade down.
Gallery Transition
The Gallery transition setting allows you to choose which transition style you'd like for your slides within the slideshow. You can choose from: Slide or Fade:
Change slides every
The Change slides every setting allows you to adjust the number of seconds it takes to change slides within your slideshow. Choose from 0 - 12 seconds. Choosing 0 seconds means that the customer will have to manually click through the slides instead of them changing automatically.
Enable adaptive height
In general, the slideshow section's height is determined by the largest image's height. So if you try to upload different sized images, often there would be a large amount of whitespace underneath the smaller images as it's taking the height of the tallest image.
With the Adaptive height slideshow setting, this now allows the slideshow height to adjust based on the height of the individual images in each slide. -
Content Block Settings
Add image
The content block settings are for configuring each slide block within the slideshow section.
Click Select Image to assign an image to the slide block. You can also add a Mobile image to display separate images for desktop and mobile devices.Add headings
Include a Preheading, Heading, and Subheading using the provided text fields.
Add buttons
Add the text, links, and colors for your button(s).
Adjust text appearance
Adjust the copy's appearance using the Text alignment and Text position settings.
To create more contrast between the text and image, activate one of the Contrast technique settings.
Mobile layout
When viewed on a mobile device, the Slideshow section either stacks vertically with the banner image displaying at the top and the text and buttons display underneath, or with the text/button displaying on top of the image – depending on your 'mobile' settings.
The 'mobile' settings allow you to choose the text position and specify different colors for text if you wish.
Show text below image
By default, the text and buttons will display below the banner image on mobile. If you'd like the text to display on top of the banner image, you can disable the 'show text below image' setting.
Text
You have the option to choose a specific color for the text on mobile.
Image cropping
This setting is located within the content block settings in each Slide.
By default, the section displays the entire banner image on mobile without any cropping/zooming which typically results in a narrow banner. If you'd like to allow a greater display area on mobile, you can enable 'image cropping' which will crop and zoom in on the image (left, center, right).