How to Remove Header & Footer in Squarespace [Easy Guide 2024]

In the realm of website design, the ability to streamline individual pages for specific purposes is invaluable. Squarespace, known for its user-friendly interface, allows users to selectively hide both the header and footer on any given page.

This technique is especially beneficial on focused landing pages, such as sales or opt-in pages. On these pages, reducing distractions and directing user attention can lead to higher conversion rates.

Utilizing either the platform's built-in features or a snippet of custom code, the removal of headers and footers can be accomplished. The application of this navigational minimization can create a more directed and conversion-optimized user experience, which is critical for pages where the sole purpose is to prompt an action from the visitor.

Key Takeaways

Streamlined Squarespace pages enhance user experience and focus.
Hiding headers and footers can lead to improved conversions.
Squarespace offers both built-in and coding options for customization.

Customizing Visibility of Page Elements in Squarespace

Configuring Visibility on Standard Pages

Hiding the navigation bars on typical Squarespace pages can be achieved with a few clicks:

Navigate to Home Menu > Pages.
Position the cursor over the desired page and select the Gear Icon.
Inside the settings pop-up, go to Navigation and disable the Header or Footer as needed.
Confirm changes by pressing Save.
To apply the modifications, reload the webpage.

Adjusting Visibility on Collections-Type Pages

For pages like blogs or portfolios, code insertion is necessary to conceal headers or footers:

Start by going to Home Menu > Pages.
Choose the page in question and click the Gear Icon.
In the settings dialog, opt for Advanced and insert the specific code into the Page Header Code Injection area.
Hit Save to secure your alterations.
Refresh your browser to witness the updated layout.

Remove the Header: <style> #header { display: none; } </style>

Remove the Footer: <style> #footer-sections { display: none; } </style>

Remove the Header and Footer: <style> #header, #footer-sections { display: none; } </style>

Altering Squarespace Page Elements without Code Injection

Economizing on Advanced Software

Rather than investing in expensive, specialized software for landing pages, users can modify a Squarespace website directly to achieve similar results. Popular platforms for landing page creation often carry a substantial monthly fee. These platforms include Clickfunnels, Leadpages, and others, with costs potentially exceeding $79 monthly. While these services offer a wide array of features, they represent a significant expense for those just starting out.

An existing Squarespace site can serve as an effective alternative for crafting sales pages that not only are cost-effective but also have the potential to showcase a refined aesthetic.

Removing the header and footer from Squarespace pages can be accomplished using a straightforward method, which is accessible even to users with basic subscriptions. This technique does not require code injection, which is restricted to higher-tier plan holders. Instead, here's a simple step-by-step process:

Navigate to the desired page, go into Edit mode, select Add Block, and choose the Code block.
Click on the new code block to edit, indicated by the Pencil Icon.
In the edit mode of the code block, insert the necessary code snippet to exclude the header and footer.
Confirm changes by clicking Save.
Refresh your browser to view the modifications.

This approach can significantly enhance the effectiveness of landing or sales pages by minimizing distractions and focusing user attention, which is crucial for conversion improvement. Additionally, the time investment required to implement this change is minimal, making it a valuable tactic for optimizing a website's performance.

Concealing Header and Footer: Strategic Page Selection

Certain page types typically benefit from a more streamlined design by removing distractions such as the header and footer. This approach can enhance user engagement and potentially lead to better conversion rates. Here's where to apply this tactic:

Landing pages for subscriptions: These should have a minimalistic interface to encourage sign-ups.
Educational event pages: Removing extraneous elements helps focus audience attention on the webinar content.
Product promotion pages: Highlight the sales pitch without navigation interruptions.
Additional offer pages: Keep users concentrated on the upsell by minimizing page elements.
Social media navigation pages: A simplified page that's a more elegant solution than Linktree for directing social media traffic can be created without any cost, simply by choosing the right elements to display.

Frequently Asked Questions

Concealing the Footer with CSS on Squarespace Platforms

To hide the footer, follow these steps:

Access your Squarespace admin panel and navigate to 'Custom CSS'.
Enter the following code:

footer#footer { display: none; }

Click 'Save' to apply the code.

Technique to Exclude the Header on a Singular Squarespace Page

Removing the header from a single page involves:

Navigating to the specific page's settings in Squarespace.
Injecting the following CSS into the page header code injection point:

header#header { display: none; }

Guidelines to Eliminate Both Header and Footer on Selected Squarespace Pages

To remove both elements, implement the following:

Open the page settings and locate the 'Advanced' section.
Insert the CSS below into the code injection area:

header#header, footer#footer { display: none; }

Save changes to see the result.

Troubleshooting Non-Functioning Squarespace Footer Editing and Solutions

If the footer edit function is not working:

Check your Squarespace version as certain versions may have limitations.
Ensure you are not in 'Incognito' mode or using outdated browser versions.
If issues persist, reach out to Squarespace support for assistance.

Modifying Footer Navigation on Squarespace Websites

To customize the footer navigation:

Go to the 'Edit' menu and select your footer area.
Use the 'Content Blocks' to add or modify elements.
Adjust styling via 'Site Styles' for fonts and colors.
Extracting the Site Title from the Header in Squarespace
To remove the site title from the header:
- Within the 'Design' panel, find 'Logo & Title'.
- Clear the site title field or replace it with a logo.
- Confirm the changes and save your settings.
Remember to always preview your changes before publishing to ensure your site appears as intended.