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.

Types Of PageFly Slideshow

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.

PageFly Slideshow Element’s Structure

All slideshow types follow this structure:

For Legacy Editor: Slideshow element > Slide element > Row > Column > Slide content (image, html video, heading, paragraph,..)

For Gen 2 Editor: Slideshow > Slide 1 > Slide content (image, HTML video, heading, paragraph,..)

How To Access The PageFly Slideshow Element?

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”.

How To Configure The PageFly Slideshow Element

General Settings

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.

You can get further information about VISIBILITY, ATTRIBUTES, and ANIMATION parameters here

Styling Settings

You can check more information about the Styling tab here

How To Configure The PageFly Slide Element

General Settings

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

You can get further information about ACTION, ATTRIBUTES, and TRACKING parameters here

Styling Settings

You can check more information about the Styling tab here.

Common Cases

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.

For more information on creating hero banners in PageFly, please refer to our detailed guide.

Make The Slideshow Full-Width

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.

Gen 2 Editor

Gen 2 Editor Beta is now closed. Pages and sections created with Gen 2 Editor will remain fully functional. Enhanced version will be coming soon.

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.

Change Slide Height

To adjust the height of a slide, click on it, go to the Styling tab, and change the padding at the top and bottom.

Frequently Asked Questions

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.

Thank you for your feedback!

Did this answer your question?

Yes Not really

How to Use PageFly Slideshow Element?