How to Create Stunning Full Bleed Slideshows in Squarespace
This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.
How to Create Stunning Full Bleed Slideshows in Squarespace?
Creating a full bleed slideshow in Squarespace is a great way to showcase your best work or highlight key content on your website.
Quick Fix
Here's a step-by-step guide on how to create a stunning full bleed slideshow in Squarespace 7.1:
- Log in to your Squarespace account and navigate to the page where you want to add the slideshow.
- Click on the "+" button, select Slideshow, and add your images.
- Hover over the new section and click "Edit Section" from the menu.
- Click on the "Autoplay" toggle to make the images auto rotate. You can adjust the duration of the slideshow rotation by adjusting the timer slider.
- If you want your slideshow banner to cover the navigation area (i.e., make the header navigation transparent), you'll need to add some custom CSS.
- Go to Website > Website Tools > Custom CSS and copy the following code:
css.page-section:first-child {
padding-top: 0 !important;
}
This code will affect all the pages of the website. If you want to change the header only on one page, you'll need the "collection id" of the page. Use the Squarespace ID finder tool to get the collection ID and add the code below:
css#collection-1234567abcdef .page-section:first-child {
padding-top: 0 !important;
}
Replace 1234567abcdef with the collection ID of your page.
And that's it! You've successfully created a stunning full bleed slideshow in Squarespace 7.1. Remember, while slideshows can be visually appealing, it's important not to overuse them and to ensure that essential information is still easily accessible to website visitors.
