Flex includes a Slideshow with text section that offers an alternative layout for showcasing images. Grab customer attention with eye-catching imagery paired with messaging and call-to-action links.
Section Settings
Click Slideshow with text to open general settings for the section.
Text and background colors
Select specific colors for the Background and Text for the text area of the slides.
Text alignment
Adjust the Text alignment of your text and buttons for the text area within the slides. Choose from Left, Center, or Right.
Text transition
The Text transition 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.
Button style
If you've included a button link for slides, adjust the Button style to use either Primary and Secondary.
Show navigation dots
To have navigation dots below the text area, enable the Show navigation dots setting. When the dots are enabled, you can switch between the slides by selecting a dot.
Image position
Use the Image position setting to position the images on the Left or the Right side.
Image transition
Select either Slide or Fade for the Image transition setting.
Change image 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.
Show arrows
Enable the Show arrows setting for arrows to display on top of the images in each slide. To hide the arrows, simply disable this setting.
Layout
The layout settings include options to adjust the spacing and width for the Slideshow with Text section.
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 are customized and added as individual content blocks. Click one of the preloaded blocks to customize its content.
Select image
Click Select Image to assign an image to the slide block.
Use an image close to 1600 x 1000px for the best results.
Add headings and text
Include a Preheading, Heading, and Text using the provided text fields.
To include a call-to-action button, complete the fields for Button label and connect a page to the Slide link field.