If you’re creating a page on your website for opt-ins or sales offers, hiding footer and header may help visitors focus solely on what matters – increasing conversions while decreasing distraction.
There are multiple methods available in Squarespace for accomplishing this goal. One approach employs custom CSS that affects all pages on your site.
Page Settings
Squarespace makes it easy to customize the header of a single page by using page settings. Here, you can edit logo, title and text color of your header while also adding background images – an effective way of customizing your website without needing coding knowledge!
Squarespace is an intuitive website builder, enabling users to build websites without needing any programming knowledge. But sometimes users might need to remove header and footer elements on certain pages on their site for SEO reasons – something Squarespace allows by adding code directly into HTML documents of webpages.
To change or delete a header on one page in Squarespace, first select it. Next, use the Edit and then Design buttons to open up the Header and Logo & Title tabs where you can delete or create new headers as needed.
This method will work for both Squarespace 7.0 and 7.1 platforms. Simply select the page where you wish to hide header and footer elements and navigate to Advanced tab. Copy/paste this code into “page header code injection” box:
Custom CSS
If you’re using Squarespace and want to remove the header on a single page, using custom CSS is one way. Please note: this method only works on pages using Page Header Code Injection feature (a premium Squarespace feature that requires business or commerce plans). To add it on a page, navigate to Pages menu > Pages list > Gear Icon for that specific page you wish to edit and then edit its properties.
Click ‘Advanced Settings’ to open the Page Header Code Injection dialogue box and paste in your code here before saving.
To view the source of any given page and discover its ID, right-click and select ‘View Page Source.’ Search for body id=’collection-5f0748fced03a8025828ee7′ in its source text to locate its identity.
This method works for both Squarespace 7.0 and 7.1 websites, though it isn’t advised as it makes it harder for visitors to understand who a website belongs to, which could affect trust with the brand. This is especially important when offering services or selling products online – the homepage should always serve as the focal point. This is why many brands utilize landing pages instead for customer acquisition instead.
Code Injection
This method requires more work, but can be invaluable if you need to remove your header on a specific page. To begin, log in to Squarespace website and navigate directly to the page in question before clicking cog icon for page settings and selecting Advanced; PAGE HEADER CODE INJECTION will open where you can enter custom code to replace primary logo on this page.
Websites require pages tailored specifically to their goals and needs, such as sales pages. By hiding the footer and header elements of these pages, visitors will focus on taking action faster – thus increasing conversions.
This method only works if you are using Squarespace Business or higher. To begin, log into your Squarespace account and navigate to the page where you wish to hide its footer or header. Clicking the cog icon opens page settings; select Advanced then paste this code in PAGE HEADER CODE INJECTION box.
Plugins
If you are unfamiliar with custom CSS, there are plugins you can use to achieve similar effects on individual pages. They are easily available through Squarespace Marketplace and usually require only a nominal fee to download them – perfect for giving your website its own distinct identity!
Add this simple plugin that temporarily hides header and footer elements on one page only, perfect for creating special landing pages such as sales or opt-in pages, sales landing pages or opt-in forms. Doing this will keep visitors on your page without distraction, helping boost conversions and sales! Hubspot conducted an A/B test which showed an increase of 28% button clicks just by hiding their header!
Another handy plugin, this one provides a fixed navigation bar on specific pages. Compatible with Brine and Wright families of templates, it makes setting it up simple while providing control over which elements of your header remain fixed depending on whether or not mobile views/widths are being viewed.
Finally, this stylish plugin from The Styled Square will leave you with a vertically aligned menu. Its bold, dramatic, and unique appearance are a fun way to show off navigation links!
