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 👇

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.

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;

}

---

📩 Join the inner circle to get exclusive code updates

---

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.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?