A feature we have been having a lot of fun with lately are layered slideshows! It's a design element we implemented in our website refresh project for Santa Barbara Wedding DJs and needless to say we totally dig it. It's such a cool way to switch up the standard feature on Squarespace so today we're teaching how you can create one too!
For this tutorial, we will be using Photoshop to create the images for the slideshow (bonus we have a template as a content upgrade below). You can also create your own layouts in other software though or online design programs like Canva. The program doesn't matter as much as how you create the graphics.
Step 1: Select Your Images & Create Your Template
Select the photos you'd like to incorporate into your design. Because you'll be using layered photos you'll want around 9-12 images -- depending on how long you want your slideshow to go. If you create your own template you'll want to make sure the width is 2500px across for ideal resolution (the height is flexible). There aren't any hard rules for this so feel free to layer as you please. We like to have the photos layer a little on the corners to add dimension, but again, you have the complete flexibility. If you'd like, you can also add text or other graphic elements into your design like we did with the gold border in the example above. Just make sure you don't put all of you copy in your images so your SEO doesn't take a hit.
Step 3: Add Images
Now that you have the template made, it's time to input your images. Start by entering your first four images as clipping masks (if you use the PSD file provided) and save the image as a png. If you are putting the image on a colored website make sure that you save the image with a transparent background. The key to this slideshow is only changing one photo at a time. So for your second image just update one image and keep the others the same. So you’ll end up with a bunch of different images like this.
Photo 2 (switched 2nd photo)
Photo 3 (switched 3rd photo)
Photo 4 (switched 1st photo)
On the example we used we rotated one picture from left to right each time but you can really do in whatever order you would like. You can also do as many slides as you want, the process is the same. It's also really important that you update the image without moving any of the boxes so that everything lines up perfectly. This will make the transition seamless on the slideshow.
Step 4: Add to Website
Once you have created all your images, it's time to add to your website! To enter, use the Slideshow Gallery Block. All you need to do is upload your images in the order you would like and then adjust the settings on the slideshow to the selections below.
And that's it! We hope you love this feature as much as we do! Make sure you sign up below to get access to our free PSD layered banner template too!
If you have any questions or need help with updating your Squarespace website hit us up in the comments or shoot us an email.