Hide Any Element on Squarespace [Easy CSS]
Whether you're prepping a new design, presenting a mock-up, or simply not ready to show certain content to the public, hiding elements on your Squarespace website can be super handy.
In this tutorial, I’ll walk you through how to hide any section, block, or element using a simple CSS trick - without actually deleting anything.
Let’s dive in.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
Why You Might Want to Hide Elements on Squarespace
There are plenty of reasons to temporarily hide parts of your site:
Previewing a design layout without certain elements
Presenting a design brief to a client without clutter
Testing user experience with and without specific content
Keeping unfinished sections private during development
Instead of deleting blocks and redoing them later, you can use this method to hide them temporarily - quick, clean, and totally reversible.
Tools You'll Need: Squarespace ID Finder
To make this process easier, install the free Squarespace ID Finder Chrome extension.
Created originally by Heather Tovey and now maintained by Will Myers, this plugin lets you easily grab the IDs of blocks and sections.
Once installed, you can hover over any element on your site and see its block ID, section ID, or collection ID.
You’ll be using these IDs in your custom CSS to hide the elements.
Step-by-Step: How to Hide Squarespace Elements
1. Use the Squarespace ID Finder
Click the extension in Chrome.
Hover over the element you want to hide.
Copy the block or section ID of the relevant block.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
2. Add Your Custom CSS
Head to your Custom CSS box (Website > Pages > Website Tools > Custom CSS)
Paste the following code, along with your block ID, into the Custom CSS panel:
#BLOCK-ID {
display: none;
}
Just like that, the element disappears from public view—but it's still there in the backend.
Bonus: If you're hiding multiple elements, separate them with commas:
#BLOCK-ID, #BLOCK-ID {
display: none;
}
Why This Method Is So Useful
Non-destructive: Your blocks and sections aren’t deleted, they’re just hidden.
Reversible: Simply delete the CSS or comment it out to bring everything back.
Preserves layout: It won’t shift other content around or break your layout.
Perfect for A/B testing: Try different combinations of design without committing.
When You’re Ready to Show Everything Again
Just remove the custom CSS from the panel, and all your hidden content will come back. If anything doesn’t appear right away, give the page a refresh, no harm done!
Final Thoughts
Hiding elements on Squarespace is a simple but powerful trick for designers and site owners alike. It lets you experiment, present cleaner designs, and fine-tune your site layout without the hassle of rebuilding sections from scratch.
