The Slideshow module gives you six different layout choices for an image slideshow that you can drag-and-drop onto your web page and easily click-to-add images from My Drive.



Step 1: Open the target page

In the website builder, open the page of your site that you want to add the slideshow to.


Step 2: Open the Modules tab

In the left sidebar menu, click on Modules:


Step 3: Locate the slideshow module icon

In the Modules sidebar, you will see the Slideshow module icon.



Step 4: Click and drag the slideshow module icon onto your page

Point your mouse at the slideshow module, click and drag it onto your page to where you want the slideshow to be located. Then drop it.

As you drag the icon around the page, you will see black lines appear, indicating the edges of the existing elements on the page. Use these lines as guides help you drop your slideshow module in the right place. You can add spacers or other elements later to adjust its position if desired, but slideshows will span the entire width of your page.

For this example, we will add a slideshow to the About page in the Elenore Designs template, beneath the template’s sample content.


Below you can see the slideshow module before it was dropped, hovering over the page. The black line indicates the top edge of the spacer that separates the content elements from the social media buttons. When the slideshow module is dropped now, it will insert between the content elements and the spacer.


Step 5: Choose slideshow settings

When you drop the slideshow, the Image Slideshow settings window will open (see image below).

You have six choices of slideshow style:

  • standard (single image, no thumbnails)

  • slideshow row

  • thumbnails on top

  • thumbnails on bottom

  • thumbnails on left

  • thumbnails on right

Click to highlight the style you want. You can change it later in the slideshow format options bar, and try out a few styles.


You can also check the boxes for additional settings:

  • Autoplay

  • Show image titles

  • Show counter


Click the Save button to proceed to selecting your images.


Step 6: Select the images for your slideshow

It’s time to select the images for your slideshow. A dual pop-up box will open. On the right side is the images folder of My Drive. On the left side is the Image Slideshow box (empty to start with) for your selected images. Double-click images in the My Drive window to add them to your slideshow. In the image below, three images have been added to the slideshow so far.


Tip: Add images in the order you want them to appear in your slideshow from first to last, as there is currently no feature to rearrange images inside the slideshow.



To remove an image from the Slideshow, click the X at the top right corner of the image.

Clicking the Settings button returns you to the previous pop-up box, in Step 5.

When you’ve added all your images, click the Save button to continue.


Step 7: Review your slideshow

Your new slideshow is added to your page. In this example, we added a 5-image slideshow using the thumbnails on the bottom style.


Tip: To move the slideshow module around, including removing it to the trash can, click the thick black grab bar in the center-top and drag it.



Step 8: Slideshow module formatting options bar

Click inside the slideshow to open the format options bar beneath the slideshow. (see above image)

Here’s a closer look at the options bar.

Here’s a brief description of these options:


Padding is the amount of white space around your slideshow. Your padding options are: None, Small, Medium or Large.



Clicking this icon opens the settings box, which contains all the same settings as before: slideshow style, and image options. Use this setting to try out some different options.



My Drive

Clicking My Drive opens the dual pop-up box from Step 6 where you can select or remove images for your slideshow.


Step 9: Saving the changes

Once you have finished with your slideshow, remember to click the Save button at the bottom center of the modules sidebar to save and protect your changes.



This concludes our guide How to add a slideshow module.



Did this answer your question?