The Slides component is similar to the [Image Carousel] component, but instead of images you can create slides with any kind of content you want. You can also style each slide individual for a really dynamic look. To get started, drag the Slides component to a page of your site in the editor. Next, click on it to open up the component options panel to the side.
Slides
By default there will be one slide on the component; this is shown in the list of slides at the top of the options panel. To add another slide, click the Add Slide button.
Note: To view the slide and easily edit, you’ll need to use the arrow buttons on the component itself to switch between slides. If you are having trouble, click on the three vertical dots for a slide in the list and drag the slide to the top of the list. This will update the component to show that slide as the first where you can edit it.
To customize the background, click on the slide in the list and the options panel will update. Choose your preferred background option, such as a color, gradient, or image, then configure it as you’d like. There’s also an Add Content button here - click on that to choose content to add to the slide. Content on a slide can be edited and controlled just like content elsewhere on a page of the site.
To delete a slide, click on the red X on a slide in the list.
Behavior
In this option group are two options:
- Autoplay - Toggle this off if you would prefer visitors to manually switch between slides.
- Interval - When Autoplay is on, this option controls how long each slide is shown. 1000ms is equal to one second.
Size
The Height option here controls how much vertical space the slideshow includes by default. Note that you may need to increase this if your slides have a lot of content.
Design
There are two options found in this group that control some overall styling of the component:
- Shape - By default this uses the shape setting of your site, but you can override this with this option. You can also set this separately for different screen sizes by clicking the desktop/mobile icon. Note that if you are not using a border or background for slides you may not see any change.
- Border - With this option you can add a border around the component, with controls for width, color, and style.
Spacing
There are two options related to spacing for the component, both of which can be set separately for different screen sizes by clicking the desktop/mobile icon for each.
- Margin - This is space around the component itself.
- Spacing - This is spacing around any content added within each slide.
Hover
To customize how the component looks a visitor hovers over it with a mouse, click on Hover at the top of the options panel. You can customize the width, color, and style of the border.