The image slideshow is a great invention made to showcase more image assets on your page without taking up additional real estate.
ππ½ Adding a slideshow
As an Element
From the top menu bar, click on the Add Menu (
Shortcut: M
)Search for and select Slideshow
Click and drag the element onto your canvas
As a Section
From the top menu bar, click on the Add Menu (
Shortcut: M
)In Sections, search for and select Slideshow
Select Slideshow then press Alt (windows) or Option (Mac)
Insert the section by clicking Add section here
Uploading an Image
Double-click the slideshow
Click the Add icon (+)
Select Add image or choose an image from one of our free stock images libraries
π¨ Styling a slideshow
Spacing top: Add padding to the top of the Slideshow section in pixels or % to keep spacing between sections
Spacing bottom: Add padding to the bottom of the Slideshow section in pixels or % to keep spacing between sections
Width: The width of a Slideshow section can't be altered, it'll always be set to cover the 100%
Height: Set the height of the Slideshow section in Pixels, % or set it to Auto so that it grows as you add content to it
Min H: Sets the minimum amount of height pixels a Slideshow section can be. A red stippled horizontal line inside your section will reflect the minimum height
Clip content: Toggle to hide the content that goes beyond the section's edges
Resize to fill vertically: Click to set the section's height to 100%
Background:
Arrows: Change the arrow's background-color
NA: Change the background color of the navigation buttons
Selected NavBTN: Change the background color of the active navigation button
Hover NavBTN: Change the background color of the navigation button on hover
Text: Change the arrows' size and color
Margin: Add margin to both arrows and navigation buttons
Padding: Add padding to both arrows and navigation buttons
Border: Set a border color, opacity, and line weight for both arrows and navigation buttons
Border Radius: Curve the radius of the border of both arrows and navigation buttons
Effects: Add different types of shadows or blur effects to both the container and the navigation buttons
Opacity: Set the opacity for the container, arrows, and navigation buttons
Icons:
Set custom shape: Replace the arrow icon with a shape or a custom SVG
Set custom image: Replace the arrow icon logo with an image
βοΈ Configuration Options
Once you've added the Slideshow to your canvas, it's time to upload your image assets and adjust the configurations.
To start, double-click the element to open the configuration options.
Parameter | Description |
Images | Add and arrange the sequence of your slideshow images. |
Transition Animation | The animation used to transition between the sequence of images when the slideshow is playing. |
Hide dots | Optionally show or hide the navigation dots from the slideshow layout. |
Hide arrows | Optional show or hide the previous/next arrows from the slideshow layout. |
Add timer | Turns on autoplay - automatically skip to the next slide in the slideshow after a specified interval. |
Time in seconds | The interval used to control the speed of the slideshow when autoplay is activated (when the add timer option is turned on). |