How to remove the header and footer from a single page in Squarespace 7.1
Squarespace has recently given us the option to remove the header and footer from a single page using the page settings menu. But what if you want to remove it from a blog post? or a product? or create an advanced landing page with it’s own menu? For all that, you’ll need custom code, and that’s exactly what you’ll learn about in this tutorial!
How to remove the header and footer from a Squarespace page
Open the settings menu for your page by clicking on the gear icon in your page menu.
Select the navigation option
Toggle off the header, footer, or both
Select save, and that’s it!
How to remove the header and footer from a collection page, like a blog post or product
To do this, we’ll need to use custom code. Add this code below to a code content block on your site. This code will only load on that page, so it wont affect anything else on your site.
<style>
.header, #footer-sections {
display:none!important
}
</style>How to create a landing page in Squarespace
What’s a landing page? A page focused on users taking a single page. A sales page, a freebie sign-up page, or even an event RSVP - a landing page removes all the website distractions like a header and footer so people can focus on one specific action.
What’s an advanced landing page? A landing page with its own navigation! This page has a unique header and footer specific to the page content. This can help you create longer landing pages without your audience getting in the sea of content. It also looks polished and professional compared to a single page with a simple form.
In the video below, I’ll show you how to create this in Squarespace using new features, anchor links, and more. When you’re ready to give this a try, follow along with the steps outlined under the video.
Step by Step Process:
How to create a landing page in Squarespace
Step 1: Create a blank page in the not linked section of your site.
You don’t want this landing page to be a part of your main navigation; it’s a special page that you will send people to for sales &/or marketing campaigns.
Step 2: Add page sections with content about what you are offering
My highest converting freebie landing pages have seven parts: (1) header with a logo and text links, (2) intro section, (3) about section, (4) additional info section, (5)about me section, (6) sign up, and (7) footer. here is a link to two different examples of my own landing pages for inspiration:
📖 Five codes I use on every Squarespace website
💌 How to build your email list using Squarespace
Step 3: Create a custom header with your logo, text links, and a button
These text links in your page’s header section should be simple and easy to understand. Each one will link to an anchor label we will create next. Make sure you toggle off the “open in new tab” option.
Step 4: Create anchor links in your different sections
Add a code block to the top and center of the section you want to link to. Inside the code block, you’ll create an anchor using this example below. Make sure that each anchor has a unique title (the word anchor in the example below)
<div id="anchor"></div>
Step 5: Check your layout on mobile
Squarespace will shift and change things while you edit the desktop site. Double check the layout and alignment on mobile to make sure it looks good.
Step 6: Create a custom footer
Add a blank page section to the bottom of the page and link to important pages and add anything you need to have in your site footer. For my example, I link to my privacy policy, terms & conditions, and I add disclaimer text. Double check this on mobile too!
Step 7: Remove the header and footer from the page
Save your changes so far and go back to your pages menu. Click on the gear icon for your landing page to access the page settings. Click on the navigation option and toggle on “remove header” and “remove footer”
Optional: Update your URL slug, SEO and Social Share Image
Every page in Squarespace can have a unique URL slug, customized SEO title & description, and a social share image. Make sure these settings are updated for your new landing page! You’ll find these options inside the settings for your page.
Step 8: Customize with code
The following code will remove the link underline and create a smooth scroll effect. These codes are optional.
Step 4: Target the second accordion by adding this code
<style>
a {
text-decoration:none!important
}
html {
scroll-behavior:smooth
}
</style>Step 9: Learn more about the cool things Squarespace can do
This is the tip of the iceberg, my friend! Squarespace can do a ton of cool things and I’d love to teach you about it. Check out the related content links below to learn more about Squarespace.
