How to add a photo slideshow header to your Squarespace 7.1 site
Using full-width header images can be a fantastic way to express your style. Whether you're a photographer, designer, or any kind of creative, making a strong impression the moment visitors land on your website is crucial.
Remember, first impressions matter! When visitors like what they see, their curiosity is immediately piqued, increasing the likelihood that they'll engage with your content, explore your galleries, and even consider collaboration opportunities. 💸
However, there are moments when a single image can't fully capture your multifaceted talents. This is where a header slideshow can be the ideal solution.
Say goodbye to the dilemma of choosing just one image to represent your business. A slideshow lets you select your favorites, which is especially beneficial if you dabble in various art forms or styles.
Since a sleek header slideshow isn't a built-in feature in Squarespace, we've compiled some custom CSS and created an informative tutorial to help you ensure that your visitors fall in love with your work at first sight!
Add a Gallery Section.
Select the "EDIT" option for your Home page.
Hover your cursor just below the header, and then click on "Add Section."
In the pop-up window, scroll down the list on the left-hand side, and click on "Images." This action will display Squarespace's pre-built Gallery sections.
Given that you have the option to customize your Gallery's appearance in the Section Settings, you can actually pick any Gallery design. Nevertheless, to streamline the process and save time, it's advisable to start with a design that already aligns with the style you intend to create.
Customize Your Gallery
After adding the Gallery section, select "EDIT GALLERY."
Inside the pop-up, click the "+" icon to insert your selected images.
You have the option to either upload a new image or search for images that you've previously added to your website, which you can effectively manage using our tips for the Squarespace Media Library.
In this section, you can also fine-tune your image focal points by simply clicking and dragging the white circle on your images. This is especially vital to ensure your images appear well when automatically cropped for mobile devices. For more insights into focal points, take a look at this post!
Once you've included all your top-quality work in the Gallery, click the "Close" button in the upper-left corner to return to your Home page.
To preview how your Gallery slideshow appears on mobile devices, click the mobile icon in the top-right corner of the page. If necessary, you can make adjustments to your focal points to enhance the mobile viewing experience.
Edit Your Gallery Configuration
Position your cursor over the Gallery section, and select "EDIT SECTION."
If you previously opted for a different Gallery style, ensure that your Gallery Type is configured as "Slideshow: Full."
Verify that the Width is adjusted to "Full Bleed," which guarantees that your slideshow spans the entire page.
We recommend setting the Height to "Large (L)," allowing your slideshow to fill the entire website viewport, although the choice is yours.
You have the flexibility to decide whether you want to display Controls such as Arrows, enabling your visitors to navigate through the slideshow manually.
You can also choose whether you'd like your slideshow to Autoplay and determine the duration for each slide's display.
After configuring your settings to your satisfaction, exit the settings panel, and don't forget to save your changes using the "Save" button in the top-left corner!
Incorporate your custom CSS code.
Navigate to the Design section and access Custom CSS. Then, simply copy and paste this small code snippet to achieve the desired effect of having your brand new header slideshow appear behind your navigation, eliminating any color blocks.
CSS:
// SLIDESHOW GALLERY BEHIND HEADER NAV //
.page-section.gallery-section{padding-top:0px!important;}
Click on "Save" in the top-left corner, and that's it! Your header navigation now seamlessly integrates with your slideshow, allowing it to take the spotlight on the page.
Personalize your header navigation.
Explore your header navigation settings by positioning your cursor over the header and selecting "EDIT SITE HEADER."
Within this section, you can modify the elements you showcase in your header, such as social links or a button. Additionally, you have the flexibility to customize your header style and layout for both desktop and mobile devices.