The Flex theme includes a traditional Slideshow section to enhance pages. Add images to appear in a sequence, then connect them to URLs and add text and buttons.
The Slideshow section can be used to promote new collections, sales, or specials, simply as a 'gallery' to showcase some high-quality images with complementary text, or to display introductory content that links out to more informative pages - just to name a few!
This section also includes additional layout settings and advanced CSS fields for further flexibility as well as mobile image cropping settings to get your image looking just right on smaller screen sizes.
Additionally, you can even upload a mobile-specific image if you'd like to display a totally different image on mobile.
Add this section to the
Slideshow Section Settings
Click the Slideshow section to open general settings for the section.
Image transition
Use the Image transition setting to have the slides Fade or Slide for the transition.
Change image every
Adjust the Change image every setting to control the delay between slide transitions. Choose from 0 - 12 seconds. Setting to 0 will disable the slideshow from autoplaying.
Show arrows
If you'd like arrows to display on top of the images in each slide, you can enable the Show arrows setting. To hide the arrows, simply disable this setting.
Show navigation dots
For navigation dots to appear at the bottom of the Slideshow section, enable the Show navigation dots setting.
Show text below image for mobile devices
For mobile, choose between having the text and buttons display below the slideshow or having them display on top. If you'd like the text to appear below on mobile, enable the Show text below image setting.
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
Spacing
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings.
Animation
The Animation setting will determine how the feature appears as it loads. The options for animation are None, Fade in, Fade in down, Fade in left, Fade in right, Slide in left, Slide in right, and Zoom.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature
Content Block Settings
Slides in the Slideshow section, are added as content blocks.
Click one of the preloaded blocks to customize it. Add more by selecting (+) Add slide.
Image
Click Add Image to connect your media with the slide.
We recommend an image size of 1800 x 900px.
Mobile image
To use an alternate image for mobile, upload a different image under Mobile image option.
Link
To add a link to your slide without displaying buttons, you can enter the URL in this Link field.
This link will only be active when there are no buttons added.
Messaging
For each slide, add text to the Preheading, Heading, and Subheading fields.
You can then select specific colors for each if you'd like in the color pickers below.
Text alignment
Adjust the Text alignment of your text and buttons by selecting Left, Center, or Right.
Horizontal position
Select the Horizontal position for your text and buttons. Choose from Left, Center, or Right.
Text background
If you need more contrast between your text and the banner image, you can add a Background color and adjust the Opacity. You can select a background color from the color picker and select the opacity, as well. 0 is completely transparent (or invisible), while 100 is completely opaque.
Border
Enable a Border around your text/background and you can adjust the thickness with the Border width setting.
Text width
The Text width setting controls how wide the background for the text/buttons spans across your slide. You can choose from 40% - 100%.
Button labels/Button links/Button Styles
Two Buttons can be added to the content area of the Slideshow section. You can input your button labels and button links, and choose between your Primary, Secondary, and Link button styles for each button.
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 what you've selected in the Mobile - Show text below image section settings.
Additionally, upload a Mobile image if you would like an alternate image to appear only on mobile.
Additionally, there are more mobile settings per slide in the content block settings.
Image cropping
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.
Mobile messaging
Select specific colors for the Preheading, Heading, and Subheading text for mobile.