How to separate images in a carousel or slideshow in Squarespace (7.0 & 7.1) video tutorial
hey hey!
To skip ahead and grab the code you need,
click on whichever version of Squarespace you’re using:
A common way of showcasing photos is by using Squarespace’s carousel gallery block (or the new slideshow reel in 7.1). But this forces your photos right up next to each other, which can sometimes look crowded or confusing.
So to let the photos breathe and pop more, I came up with a CSS solution that can be tweaked to your liking. Here are some before and after shots!
7.0 Carousel Gallery Block
Before
After
7.1 Slideshow Reel Gallery Section
Before
After
All you gotta do is go in the back end of your website, go to Design > Custom CSS, and paste in the code. You can then play with the numbers and colors to make it your own!
Copy this code into your CSS editor for the SQSP 7.0 carousel gallery block:
.sqs-gallery-design-strip-slide {
padding-right:10px;
margin-left:10px;
margin-top:0px;
margin-bottom:0px;
border-right: 1px solid #dcdcdc;
}
Copy this code into your CSS editor for the SQSP 7.1 slideshow reel gallery section:
.gallery-reel-item img {
padding:10px;
margin-left:10px;
margin-top:0px;
margin-bottom:0px;
}
To get an idea of how I came up with this code and see exactly how you can customize it to get the result you’re looking for, watch the video below!
Video Timestamps
SQSP 7.0 is covered from 0:00 to 4:35
Customizations @ 3:01
SQSP 7.1 is covered from 4:35 to 7:40
Customizations @ 6:12
This isn’t something I’ve seen anyone else do, so I’ve been really stoked to see what a difference it can make.
Oh, and if you haven’t purchased your Squarespace subscription yet, feel free to use my code BEJ10 for 10% off.
Be sure and link your creations in the comments below!
