In this tutorial, you’ll learn about the Slideshow element and how to use it.
About Slideshow element
Slideshow element is designed to present a series of content items in a single compact view to help increase your conversion rate. You can use the Slideshow element to display featured products, sales campaigns, customer testimonials, etc.
To use the Slideshow element, choose Add element from the left sidebar > CONTAINERS > choose Slideshow element and then drag and drop this element into the page editor.
Note that you can search this element by using the search function instead of finding it in the sidebar.
The Slideshow element comes with multiple variations covering most needs. But we will continue to add more variations to help you save time.
Drag a variation to layout and see how it can be configured.
Slideshow element configuration
Slideshow element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.
Select the element in the layout to see its parameters.
In this article, we’ll show the parameters of the General and Styling tabs for the Slideshow element.
General tab’s parameters
Slideshow Navigation Styles
Slideshow Pagination Styles
The parameters in the General tab for the Slideshow element include:
| General tab’s parameters | |
| 1. SLIDER SETTINGS |
|
| 2. SLIDER ITEMS | You can add the slides and rearrange the order of these slides by dragging the 3 dots icon on the left of the slide’s name. You can also duplicate or remove the slide(s) from the slideshow.  |
| 3. ACTION | You can read more about the ACTION parameter here. |
| 4.ATTRIBUTES | This is a parameter that all elements have. You can read more here. |
| 5. VISIBILITY | This is a parameter that all elements have. You can read more here. |
| 6. ANIMATION | This is a parameter that all elements have. You can read more here. |
Styling tab’s parameters
| Styling tab’s parameters | |
There are 2 options that can be styled for including:
|
|
| 1. OVERALL | You can read about the OVERALL parameter here. |
| 2. SPACING | You can read about the SPACING parameter here. |
| 3. TYPOGRAPHY | You can read about the TYPOGRAPHY parameter here. |
| 4. BACKGROUND | You can read about the BACKGROUND parameter here. |
| 5. BORDER | You can read about the BORDER parameter here. |
| 6. DISPLAY | You can read about the DISPLAY parameter here. |
| 7. CUSTOM CSS | You can read about the CUSTOM CSS parameter here. |
Nested elements configuration
Please note that the Slideshow element is the combination of multiple slides each of which can contain various elements depending on your needs such as Heading, Paragraph, Image, Button, etc.
Additionally, you can also embed a link into each slide to redirect your visitor to the desired location after clicking anywhere on that slide.
To replace or add an image background for the Slideshow, you can choose the Slide you want, then go to the Styling tab > Background Image and choose the image you want.
You can see this image below to have a better demonstration
Common cases with the Slideshow element
Set full-width for the Slideshow
In case you want to set full-width for the slideshow, choose the Section which contains the Slideshow and disable the Set Fixed Width option in the General tab like the image below
You can check this article to know more details on how to create a full-width section.
Replace an image in a Slide
To replace an image in a Slide with another image, you can choose the Slide you want, then go to the Styling tab > Background Image and choose the image you want.
You can see this image below to have a better demonstration
How to add many products to the Slideshow?
You can drag and drop the Product List element to show many products of a collection in a slide.
You can check the gif below for more details
You can check a video tutorial about the Slideshow element here
