Website Design: Photo Slideshow
Admin Level - Webmaster
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 the 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 onto the slide.
- Click Save.
- Click Close.
If you add the Photo Slideshow component to another page, it will currently utilize the same set of slides.
Slide dimensions, 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 it is 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 with this (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 just fine when enlarged and load much faster.
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.
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 and right arrows on the sides or the white dots at the bottom. The next three settings only work when Auto Slide = YES.
How many seconds each slide displays before advancing to the next slide.
- 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, advances to the first slide in the same right-to-left direction. Default.
When advancing to the next slide, choose how fast it "slides" the slides—Slow, Normal (default), or Fast.
Scale Type, 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 image so its top and bottom fit within the container height (when tall), or its sides fit within the container width (when wide). When image is smaller than both container height and width, it will display at original size.
Scale Type: Center Crop, Upscale: NO
Display 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 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 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 to use when your images have a mixture of aspect ratios.
Scale Type: Center Crop, Upscale: YES
Scale image until the container height and width is filled, cropping either its top and bottom (when tall) or sides (when wide). This mode completely fills the slideshow container in all cases, so it's important to use high resolution images.
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 optionally set 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 click to do the following:
/ — Show/Hide the slide in the slideshow.
— Delete the slide.
— Drag and drop to rearrange the slide order.
Upload team logo
Upload higher resolution photos