Slide Show: Getting Started

This applies to both Responsive and Non-Responsive Websites.


How to Add a Slide Show Tool to a Page

  1. In Site Manager, navigate to the page where you would like to add the Slide Show tool.
  2. Click on the "Select a Tool to Add" drop down menu in the location where you would like the Slide Show Added.
  3. Choose "Slide Show". 
  4. This will take you to the Slide Show properties page. 
    • Slide Order: Select if you want the slides to go in a random order or in the order that you select within the tool.
    • Maximum # of Active Slides: We recommend limiting your slide show to about 5 active slides (or fewer). By setting this property, any slides added over the maximum number of active slides will automatically be inactive.
    • Width Options: Choose if you want the slide show to be a custom width, the interior width of the content area or the full width across your entire page. 
    • Maximum Photo Height and Width: If you chose a custom width, enter the dimensions that you want for your slideshow in pixels. If you chose "Interior Width of Content Area" or "Full Width of Site", leave the width alone, but enter your desired height for the slideshow.
    • Resize All: Check this box if you are updating your slide show dimensions AND you want all existing slides to be downsized to fit the new dimensions. Slides cannot be made larger to fit a slideshow that is being made larger. The slides must be uploaded again.
    • Transition Type: Select the type of transition that you would like for your slide show. Most transition types work universally, but some work better with particular dimensions. For example, the carousel works best with square or portrait oriented photos.
    • Transition Seconds: From the drop down menu, select how long you would like the transition to take in seconds.
    • Seconds Between Slides: From the drop down menu, select how long you would like between slides.
    • Pause on Hover: Check this box if you want your slide show to pause if someone hovers over the slide with their mouse.
    • Captions: Select how you would like captions to be displayed on your slideshow. 
    • Controls: Select the type of controls that you would like for your slides. Some controls work better with different styles, transitions and dimensions of slideshows.
  5. Click "Update.
  6. Now your slide show is added to a page, but nothing will show up on the live page until you add a photo.

How to Add Photos to a Slideshow

The Slide Show tool pane is a functional pane, which means that you can click within the tool pane on your summary page to make changes to the tool. One such change is adding photos. 

  1. To add photo(s), select the number of photos that you would like to add from the drop down menu inside the tool pane and click "Add". Screen Shot 2014-05-13 at 11.41.40 AM.png
  2. Position After: Select if you want these photos to be at the top or which photo you would like them to be after.
  3. Click "Choose File" on the first box to select your first photo. Screen Shot 2014-05-13 at 11.43.14 AM.png 
  4. This will open up your file uploads. You can either: 
    • Select a photo that is already in your file uploads by double-clicking on it.
    • OR, upload a new photo by clicking the green upload button at the top left, then selecting a photo from your computer. Once the photo has been uploaded, it will appear in the file uploads box and you can double click on it.Screen Shot 2014-05-13 at 11.45.44 AM.png
  5. Now that you have selected your photo to add, a new box of properties will appear below the "choose file" field. Screen Shot 2014-05-13 at 5.26.10 PM.png
    • Crop or Downsize: We always recommend choosing crop. Downsize can distort your image, if the dimensions of your image differ from the dimensions of your slide show. Cropping gives you the best quality and the most control over your image.
    • Hyperlink Image: Select if you would like the image to be hyperlinked. If yes, a box will also appear for you to enter a hyperlink and select if you want it to open in an existing window or a new window. If this link is within your website, you should select "existing" and if it is off of your website, select "new".
    • Alt Tag: This is where you can enter an alt tag, which is a short description of the image, which appears when a user mouses over the image. This is used by search engines as well as other purposes, such as screen reading software.
    • Caption: Enter a caption here. It should only be text; no formatting is allowed. 
  6. Repeat steps 3-5 for any additional images.
  7. Click "Add". 
  8. If you selected to crop your images, this will now take you to a screen where you can do that. Screen_Shot_2014-05-16_at_1.12.28_AM.png
  9. When you click on the image, a cropping box will appear. You can drag the corners of that box to make it larger, and move it around by holding down on it and moving your mouse.
  10. Once you have cropped all images, click "Crop Photos & Finish". 
  11. The images are now added to your slideshow!
Was this article helpful?
1 out of 2 found this helpful
Have more questions? Submit a request


Powered by Zendesk