How to remove the header and footer on a Squarespace page
As you’re building your business and updating your website, you’ll find the need to create diverse pages, such as sales pages, landing pages, lead-magnet pages, and more. You’ll want to provide a clear and concise message to visitors, directing their attention to specific products, services, or information.
One of the best ways to focus attention on a particular area of a website page is to remove the header and footer. Of course you don’t want to remove the header and footer from your entire website - just on a single page. By eliminating distractions, you’ll enhance the overall user experience, leading to a higher conversion rate and an increase in customer engagement.
This post walks through the simple methods to remove the header and footer on a Squarespace website page.
But first… WHY would you hide the page header and footer?
To create a sales or landing page and increase conversions
You don’t have to pay a third-party service to create a great sales or landing page. Not only can they be pricey, but it’s one more tech to keep track of, right?
You can create a sales or landing page right within your Squarespace website, giving you more control over your content and your sales funnel. And the page will be completely on brand.
The ultimate goal of these types of pages is to convert. So by creating a clear call-to-action, and “hiding” the header and footer, a visitor will be more focused on the service (or product) you’re promoting, and not distracted by other items and links on the page.
To create a lead magnet or subscriber opt-in
For the same reasons mentioned above, a lead magnet page should be as simple as possible. If you’ve created a lead magnet (freebie / opt-in), you’ll want the visitor to do one thing ONLY on this page - subscribe.
The goal is to increase subscribers by offering something of value (a freebie, a discount, etc.) and therefore you want to keep other distractions to a minimum. Removing the header and footer on the lead magnet page is ideal.
To create a website coming-soon page
A great way to create an online presence with your branding before you launch your full Squarespace website is to have a Coming Soon page. It’s a single page that gives visitors a glimpse at your brand, a subscriber form, contact information, and ideally a website launch date.
With a simple edit, we can remove the header and footer just for this single page, so that visitors won’t be able to access the rest of the website while you’re building out your content behind the scenes. Anyone visiting your domain name will find a beautifully branded coming soon page, instead of the generic default one.
To create an Instagram link-in-bio page
Having a link-in-bio page is a great way to keep your followers or visitors up-to-date, giving them a simple way to access your new content or products and services. But there’s no need to subscribe to or pay for extra apps when you can build the page yourself easily within your Squarespace website.
The link-in-bio page you create will be part of your own website, which keeps you in full control at all times of your content. Any future edits that you need to make to this page can be quickly and easily made directly within your Squarespace website. Also, because you’ll build the page within your own website, you’ll easily maintain your brand color palette, typography, and imagery.
Removing the header and footer on this page is vital since you’ll want to style this page very simply. You’ll include your logo, and only the most important links / buttons that will guide visitors from your Instagram profile to the content you want them to reach on your website.
✨ READ MORE How to create your own Instagram link-in-bio page
How to hide the header and footer on one page in Squarespace
💡 PRO TIP The following method applies to regular Squarespace website pages (not Collections like blog, portfolio, or event pages).
Change the Navigation settings
Open the page settings
Click on the settings icon of the page that you’d like to work with, which will open up the Page Settings panel. Then click on Navigation.
Toggle “off” the Show Header and Show Footer options
Simply switch the toggle to the off or “hide” position.
Save
Save the settings and you’ll note that the header and footer are no longer visible.
How to hide the header and footer on Collection pages
💡 PRO TIP The following method applies to Collection pages like blogs, portfolios, or events.
Use custom CSS
Open the Collection settings
Click on the settings icon of the Collection (blog, portfolio, or events) page that you’d like to work with, which will open up the Settings panel. Then click on Advanced.
Add custom code in the page header
Copy and paste the code below into the Page Header Code Injection, which will target and hide the website header and footer for this particular Collection.
<style>
.header, #footer-sections {
display:none!important;
}
</style>Save
Save the settings and you’ll note that the header and footer are no longer visible. Simply delete the above code if you ever need to have the header and footer visible again.