Slideshow
Last updated
Was this helpful?
Last updated
Was this helpful?
The Slideshow Element is made to show several content items in one area, boosting your conversion rate. Use it to feature products, sales, testimonials, and more.
Watch our video for detailed steps on setting up the PageFly Slideshow element.
We offer many kinds of slideshows to fit your needs. Currently, you can choose from six types:
Blank
Single image
Image list
Text overlay image background 1
Text overlay image background 2
Video
You can add more elements to the slide to customize it to the form you want.
All slideshow types follow this structure:
For Gen 2 Editor: Slideshow > Slide 1 > Slide content (image, HTML video, heading, paragraph,..)
For Legacy Editor: Slideshow element > Slide element > Row > Column > Slide content (image, html video, heading, paragraph,..)
In the PageFly editor, click on the "Elements" icon, located as the second icon from the top on the left toolbar. Then, in the "PageFly" tab > choose "Slideshow".
Slides
Control the number of slides. Options include duplicating, adding, or removing slides.
Items Displayed
Decide how many slides to show at once. This depends on how many slides you have.
Items To Scroll
Choose how many slides appear after clicking the navigation button, depending on your "Items Per Show" setting.
Items Spacing
Adjust the space between slides.
Display Partial Items
Enable viewing parts of the previous and next slides.
Navigation
There are 5 different styles for the left/right arrow navigation button on the slide.
You can choose None and navigate between slides by clicking on the pagination.
Please note that some navigation options only appear on mouseover. And on mobile, all navigation types will be displayed as default.
Pagination
Select from three pagination styles.
Set Max Height
If turned on, the slideshow height will max out to the height of the tallest slide in the slideshow including invisible ones.
Enable Auto Rewind
Go back to the first slide after reaching the end.
Enable Autoplay
Enable / Disable autoplay of slides in the Slideshow.
This works on the live page only.
If you turn on Auto Rewind and Autoplay, your slide will auto-play to the end and turn back to the first slide.
If you turn off Auto Rewind and turn on Autoplay, your slides will autoplay from the first slide and stop at the last one
Slide Delay
Adjust the speed of your slide when you turn on Enable Autoplay.
The minimum speed is 1 second and the maximum is 20 seconds.
Pause On Hover
When turning on Enable Autoplay, you can select to pause the autoplay by hovering on a slide.
The Slideshow element is the combination of multiple slides and you can edit and settings for each slide.
No. Of Slides
Show the number of slides of a slideshow. You can duplicate, add or remove a slide.
Name
Change the name for each slide by adding text in the placeholder
Using a slideshow as a hero banner is popular. For the best CRO score, show slide indicators, use autoplay with a 5-7 second delay. However, avoid using a slideshow for your hero banner if you only have one slide.
Excessive nesting of elements can complicate page structure, increase HTML code, slow down page loading speed, and make editing more difficult. If you only want to display a single-image banner, consider using a one-column section instead.
Gen 2 Editor
To stretch the slideshow across the full screen, set its section to full width. This can be done by clicking the section, going to the Styling tab, and picking "Fill container" for the "Content width" option.
Legacy Editor
To stretch the slideshow across the full screen, set its section to full width. This can be done by clicking the section, going to the General tab, and picking "No" for the "Set Fixed Width" option.
To adjust the height of a slide, click on it, go to the Styling tab, and change the padding at the top and bottom.
1. What's the PageFly slideshow element?
It's a feature that lets you put different kinds of content together in one slide, making your page look neat and improving conversion rates.
2. What types of content can be added?
On a single element, you could add slides and items, as types of items are single image, image list, text overlay image and video. Then, you can freely edit the settings of each item, including: to show, to scroll, space and to navigate.
You can get further information about VISIBILITY, ATTRIBUTES, and ANIMATION parameters
You can check more information about the Styling tab
You can get further information about ACTION, ATTRIBUTES, and TRACKING parameters
You can check more information about the Styling tab .
For more information on creating hero banners in PageFly, please refer to our .