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.
Add this section to the
Section Settings
Click the Slideshow section to open its general 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
Select an option from Gallery transition to have the media Slide or Fade between transitions.
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 Blocks
Click one of the preloaded Slide blocks to customize its content. Add more by selecting (+) Add Slide.
Image
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
Complete the fields for First button label and Second button label to control the button text for your buttons.
Use the First slide link and Second slide link fields to connect pages to the buttons.
Select options from the First button color and Second button color to control the button's styling.
The options are:
- Primary button
- Banner button (outline)
- Banner button (solid)
- Banner text button (outline)
- Banner text button (Solid)
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.
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).