How to create a banner slideshow in Squarespace
Are you wondering how to add a banner slideshow to the top of the page of your Squarespace website? Well, look no further because in this blog post, we’re gonna tell you exactly what to do to make this happen in the most user-friendly, easy way possible.
But first… What size should your banner images be?
If you want a great looking banner carousel, you’re going to need high-quality, crisp images. And in general, you’re going to want your banner images to be about 2500px wide. You can customize your images in Canva to get them to the right size and then download them there as a JPEG file as they tend to load faster than PNG files.
How to add a banner slideshow in Squarespace
Adding a banner slideshow of just images in your Squarespace 7.1 site can be surprisingly simple. Here’s how to do it, step by step:
In the page where you want to add your slideshow banner, click Edit.
Right below the header, click Add Section.
Under Add a Section, select Images.
Choose one of the options with the “i” icon that says, “These sections let you quickly add content items and switch between layouts without having to manually rearrange them.”
Hover over the section and click Edit Gallery.
Add in your images.
After adding in your images, click Close.
Hover over the section again and click Edit Section.
Under Gallery Type, choose Slideshow: Full.
Under Width, choose Full Bleed.
Adjust the height of the image gallery if desired. This will determine how much of the screen the banner will take up.
Under Controls Location, select Arrows or Bullets.
Under Animation, you can select how you want each image to fade in.
How to get the banner slideshow to autoplay:
Under Options, choose Autoplay.
Under Controls Location, select Hidden if you want to hide the controls and don’t want the visitor to be able to manually switch to the next banner image.
Under Slide Duration, use the drag tool to choose how many seconds you want each image to stay on screen for.
After editing everything, click Save on the page to make sure you don’t lose any of your changes.
How to add a slideshow banner with text in Squarespace
While having a simple image slideshow banner is great, some people want a banner that can also display text, buttons, and call to actions. Here’s how to do it:
In the page where you want to add your slideshow banner, click Edit.
Right below the header, click Add Section.
Click Portfolio and choose the option that has the banner slideshow with text. (There are a few options that you can customize to turn into a banner slideshow with text, but the option below eliminates a few of those steps!)
Hover over the section and click Edit Content.
Under Elements, make sure Show Button is selected.
Then click Content, delete the built-in options and click Add.
Under each item, add in your images, text, and button CTAs and links.
So, now you have a banner slideshow with text and buttons! While this is great, you may notice that the text covers the part of the image you most want to highlight. The good news is that Squarespace allows you to customize this! You can change the text/button color in the Colors tab under Edit Section and the text/button positioning in the Design tab under Edit Content. Play around with these settings until you get it right!
Here’s a before an after of what a little bit of designing can do for these banner slideshows.
These are the design changes that were made to move the text and buttons away from the most important part of the image.
In the Design tab under Alignment, click the leftward alignment option.
In the Design tab, click Style. Under Navigation, choose Bottom.
In the Design tab, click Size & Space. Under Slide Padding, choose M. Under Vertical Alignment, choose the arrow pointing up and Under Horizontal Alignment, choose the arrow pointing to the left.
Now, what if you want this banner slideshow to auto scroll like the gallery slideshow? Unfortunately, Squarespace doesn’t offer this feature without a little bit of code or a plugin. But luckily, Will Myers has already solved this problem for us all already (eliminating the need for us to have to come up with it ourselves). Check it out here!
And don’t forget to save your changes after you’re done designing!
Want to learn more?
Hopefully, this blog has given you everything you need to know to create a beautiful banner slideshow in Squarespace. But do you need more help? You can learn more about Squarespace, design, copywriting, SEO, and more on the blog! Here are some of our favorites!
Why SEO is important for business
Newsletter story ideas (and how to use them)
How are service pages and sales pages different?
Should website copy or design come first?
Blogging vs social media: Which is better?
