Learn how to use the slideshow widget
A slideshow is a type of a gallery widget with automatic or manual image playback. In other words, it displays multiple images one by one. A slideshow can be used as a gallery instance anywhere on the page. Furthermore, it can also work as a sequence of hero images that automatically replace each other at the top of your page. You can either set your slideshow to display pure images or put some text on top of it. You’ve got lots of options for using this widget.
Adding a Slideshow to a Page
To add the slideshow widget to your page:
- Click the “+” icon in the left sidebar when in the editor;
- Choose “Slideshow” and pick a preferred widget template;
- To add the widget, simply drag it to the canvas (the widget selection menu will automatically disappear) and drop it wherever you need it (the drop area will be highlighted).
Note: To cancel the process, press “Esc” on your keyboard while dragging the widget.
Moving the Widget
To move your slideshow to a different area of the page, click on the widget to call out its controls. Click and hold the “crossed arrows” icon and drag the widget to any other location on the page. The drop area will be highlighted on the canvas.
Resizing the Widget
To resize the widget, simply highlight it and drag one of its anchor points up/down or left/right until you get the desired result. You can also adjust the widget’s padding in the similar way. Hover your cursor over the area around the anchor point (it will become highlighted as a half circle) and drag it up/down or left/right, accordingly.
Editing the Widget
To start editing your slideshow, click on the widget to call out its controls. Then hit the “Edit” button. The widget editing menu will appear.
In the widget editing menu, you can customize your slideshow. It contains several tabs, allowing you to adjust the widget to your specific needs.
Add, swap, or replace slides as required.
To add a slide, click “Add slide”. The duplicate of the last slide will appear in the list.
To change the slide image, click the “Settings” icon next to the slide you want to modify and select “Change background”. The background editing menu will appear.
Select the “Image” icon, hover your cursor over the image preview and choose one of the two available options: “From computer” or “From library”. The former allows you to upload an image from your computer directory, while the latter opens your asset library.
Note: Uploading an image from your computer automatically adds it to your asset library.
To adjust the image transparency, use the “Opacity” slider.
Apart from images, you can use specific colors and gradients as a slide background. For this, select the “Color” icon in the background editing menu. Then choose colors using the color picker.
To duplicate or delete a slide, click on the “Settings” icon next to the target slide to call out the contextual menu and select the corresponding option.
To change the sequence of slides, simply drag them across the list to the required position.
Select your preferred slideshow design.
Configure your Slideshow paddings, toggle navigation controls and autoplay, and set content alignment.
Adjust the visual parameters of your widget, such as borders, shadows, background and navigation colors, etc.
Toggling some of the parameters on opens additional tweaks.
Show different animation effects when changing slides.
Switching Between Slides
You can manually switch between your slides either by clicking on the widget navigations (e.g., arrows) right on the canvas or by using the element’s navigation tab.
Deleting the Widget
To delete a Slideshow from the canvas, call out the widget controls by clicking on it and hit the “Trash bin” icon.
Theory is good, but practice is better!