Skip to main content

Slideshow

How to add a slideshow to your website

Updated yesterday

πŸ–ΌοΈ What is a Slideshow Widget?

A slideshow widget displays one image at a time that automatically changes after a few seconds. Unlike a gallery where all images are shown simultaneously in thumbnail format, a slideshow focuses on one image at a time with a smooth transition β€” perfect for creating a visual flow that tells a story or presents content in a more engaging way.


⚠️ Slideshow Widget Limitations

To keep your website fast and smooth, we recommend:

  • Max 10 images per slideshow

  • Max 3 slideshows per page to avoid long loading times


βž• Add Images to Your Slideshow

  1. Click on the slideshow widget you have placed on your page

  2. Click on "Manage Images"

  3. Click on "Add Images"

  4. Upload your images

  5. Select the images you want to use and click "Add Images"
    ​

    Screenshot 2024-09-17 at 11.06.01.png
    Screenshot 2024-09-17 at 11.09.53.png


    ​

You can always add or remove images later!


βš™οΈ Image Settings

Click on an image to the right and edit the settings to the left:

  • Add a link if you want the image to lead somewhere when clicked

  • Title and description β€” displayed on top of the image in the slideshow

  • Remove the image if you don't want it included

    Screenshot 2024-09-17 at 11.57.59.png

↕️ Change Image Order

  • Drag and drop the images to change the order in which they appear in the slideshow

    2024-09-17 11.59.45.gif

πŸ› οΈ Slideshow Settings

When you click on the slideshow widget, the settings panel opens where you can further customize the experience:
​

Transition Settings

  • Transition Type:

    • Fade β€” the image smoothly transitions to the next

    • No effect β€” the image changes directly without transition

  • Duration: How long each image is displayed before the next one appears

  • Speed: How fast the transition between two images occurs

Image Settings

  • Show Image Title: Toggle on/off to display the image's title

  • Show Image Description: Toggle on/off to display the description

  • Crop Image: Adjusts the image to fill the entire slideshow area

Display Options

  • Show Navigation Arrows: Allows visitors to click forward and backward

  • Allow Pause: Displays a pause button when the mouse pointer hovers over the slideshow

  • Show Indicator Dots: Small dots indicating how many images are present

  • Allow Loop: When the last image is shown, the slideshow restarts from the beginning

    Screenshot 2024-09-17 at 12.01.38.png

πŸ’‘ Tip: Use slideshows to create a professional and lively first impression β€” e.g., on the homepage or to showcase selected products, testimonials, or projects.

Did this answer your question?