Managing your homepage slideshow

Here's a step-by-step guide to managing your slideshow.


Choose a slideshow format

When you first set out to build your website, you chose a theme and a homepage layout in the  Design Studio. Different layouts include a variety of homepage slideshow formats.
Here are the 4 possible formats you can choose:
  • Standard slideshow - 650 x 325 pixels (2:1 aspect ratio)
  • Wide slideshow - 975 x 325 pixels (3:1 aspect ratio)
  • Full slideshow - 1440 x 480 pixels (3:1 aspect ratio)
  • Empty/None

If you're not sure which slideshow format you're using, click on Design Studio in the Admin toolbar. The top of the Design Studio lists your selected theme and homepage layout.


Know the size of your slideshow

Once you’ve identified your slideshow format, you'll know the exact pixel dimensions of your slideshow (listed in Step 1 above). All photos in your slideshow will be cropped to those exact dimensions.

If you try to upload a photo that doesn't contain enough pixels, it will be rejected. For example, an 800 x 400 px photo does not contain enough pixels to fill a 975 x 325 px slideshow ( illustrated below).


Upload a photo

Now that you’ve got your bearings, it’s time to add a photo. Go to your homepage, hover your cursor in the area of the slideshow, and click on the settings icon in the top right corner.
This opens the Slideshow Settings dialog. Click Add Slide, then select a photo from your computer’s files.
NOTE: You can upload 1-15 photos to your slideshow. However, we recommend publishing no more than 3-4 images in your slideshow.

Crop the photo

Your photo will then open in the Image Cropper. Remember that your slideshow has specific pixel dimensions. As a result, any photos you upload must fill the entire area. Use the built-in image cropper to crop your slideshow images.

Cropping a horizontal photo

Large photos with a horizontal orientation will be shrunk to fit the width of your slideshow ( illustrated below). You can then use the slider bar to magnify/zoom into a portion of the photo. Next, click and drag the photo to reposition as you see fit. Then click Save and your photo will be cropped to fit in the slideshow.

Cropping a vertical photo

Large photos with a vertical orientation are also shrunk to fit the width of your slideshow ( illustrated below). Use the slider bar to magnify/zoom into a portion of the photo, then click and drag the photo to reposition. Click Save to crop the photo and add it to your slideshow.

NOTE : If you have image editing software, you can crop your photos yourself to the exact dimensions of your slideshow. Then, the photos will fit perfectly once you upload them to your slideshow.

Link the slide (optional)

Images in your slideshow can be configured to be links. Select the link type ( external or internal) and enter the destination URL. If the image link is internal (which means it links to a page of your own website) you can simply select the destination page from the Link to Page dropdown.

Add a title and caption to the slide (optional)

If you’d like, enter a title and caption to overlay your image. Once you’re done, click Save.

Organize all slides

Next, you’ll return to the Slideshow Settings dialog. Here, you can change the order of your slides. Use the orange handle to drag and drop slides into the preferred order. Once set, click Save, and you’re done!

Additional Features

Editing your slides

Of course, you may need to edit your slides after the fact.
To do this, just click the homepage slideshow settings icon to reopen the Slideshow Settings dialog. Hover your cursor over the slide you’d like to edit and click the settings icon. Here you can edit the slide’s link, title, and caption and also disable the slide altogether. Click Save once you’re finished.

Customizing your slideshow: Timing and transitions

You can customize your slideshow by changing the default timing and the transition effect. To do this, click on the settings icon, then click on the Advanced tab of the Slideshow Settings dialog. Adjust the timing between 3-10 seconds and select your preferred transition effect from the dropdown. Then click Save.

Next step

We've outlined some additional best practices for your homepage via the blog; check out How to make your homepage less cluttered.

Still need help? Contact Us Contact Us