Permissions are required to edit the website. Click here to learn how to view your permissions.
How to Add or Edit Slides
In the side menu, click Website Design.
Click the Photo Slideshow overlay.
Click a slide to update, or click Add Slide.
For an existing slide, click in the upper right of the photo to delete it, then click Remove to confirm.
If desired, click Download Stock Images on the right to open a site where you can download a zip file of images by sport, then unzip the file to access them for the next step.
Drag and drop a photo onto the Slide Photo area, or click the area and then double-click the desired photo.
You may optionally click Tint Color and pick a color overlay.
It will overlay the image but not the text and buttons (step 8 below).
Make sure to reduce the transparency slider, or else the color will completely hide the image.
If you want to link to another page when a user clicks the slide,
Fill in the On Click Link to field with the desired URL, or click the page icon and select a page on your site.
If you are linking to an external site, we recommend clicking the New Window radio button.
You may add text and a button to the slide.
Click Save.
Click Close.
Adding the Photo Slideshow component to another page will currently utilize the same set of slides.
Slide Dimensions and Aspect Ratio
The Photo Slideshow container has a 2.5:1 aspect ratio (also known as a 5:2 aspect ratio). That means the image should be 2.5 times as wide as high. So, although the precise dimensions are 1200x480, if you upload a photo that is 1500x600 pixels, it will still display perfectly.
We encourage you to resize and crop images to match the correct aspect ratio before uploading them. This way, they will be resized to fit exactly into the given space when Upscale is set to YES. However, we know not everyone will do this, so the Scale Type and Upscale settings can help (see below).
Actual dimensions: 1200x480 pixels for Classic and Clean templates, 2000x800 pixels for Business and Minimal templates. We recommend 1200x480 for the latter two templates because they look fine when enlarged and load much faster.
Controls
Slider Group
Allows you to have different slideshows on different pages, or even on the same page! It uses the Default set of slides. Select + Create new..., enter a name and click Create. Then select that group and add your slides to it.
Auto Slide
When set to YES, slides automatically advance from one slide to the next. When NO, the current slide stays on the screen until the user selects another slide with either the left or right arrows on the sides of the white dots at the bottom. The next three settings only work when Auto Slide = YES.
Slide Delay(s)
How many seconds does each slide display before advancing to the next slide?
Mode
None - After advancing through the slides, it stops on the last slide until the user selects another slide.
Reversed - After displaying the last slide, quickly scrolls through the slides in the reverse direction back to the first slide.
Loop - After displaying the last slide, advance to the first slide in the same right-to-left direction. Default.
Slide Speed
When advancing to the next slide, choose how fast it "slides" the slides—Slow, Normal (default), or Fast.
Scale Type and Upscale
The Scale Type and Upscale settings interact together and are designed to work with images that don't match the slideshow container's aspect ratio. Tall images are those higher than the slideshow container but not as wide. Wide images are wider than the slideshow container but not as tall. In all cases, it centers the photo horizontally and vertically.
If you want to see these settings in action, set Auto Slide to NO, then resize the browser back and forth horizontally to see how it resizes the slides.
Scale Type: Fit Center, Upscale: NO
Scale the image so its top and bottom fit within the container height (when tall), or its sides fit within the container width (when wide). When the image is smaller than container height and width, it will display at its original size.
Scale Type: Center Crop, Upscale: NO
Display a tall image up to its full width or the container width and crop its top and bottom to be no taller than the container. Display a wide image up to its full height or the container height and crop its sides to be no wider than the container.
Scale Type: Fit Center, Upscale: YES
Scale the image until its top and bottom fill the container height (when tall) or its sides fill the container width (when wide). This is a good option when your images have a mixture of aspect ratios.
Scale Type: Center Crop, Upscale: YES
Scale the image until the container height and width are filled, cropping either its top and bottom (when tall) or sides (when wide). This mode completely fills the slideshow container in all cases, so using high-resolution images is important.
Photos Slides
Click a slide to edit it.
Show This Slide — Set to NO to hide the slide without deleting it.
On Click Link to — Enter a URL or click the page icon and select a page. When the user clicks the slide, it will take them to that URL or page.
Open Link in — Leave it as Same Window for internal pages, or set it to New Window for external sites.
Slide Photo — Click the to delete an existing photo. Drag and drop a photo into the dotted line, or click in the area, navigate to a photo, and double-click it. Click Save when finished.
As you hover over the slides, you will see icons you can show/hide the slide in the slideshow, delete the slide, or drag and drop to rearrange the slide order.