How to Hide Sections on Squarespace

In this blog tutorial, you'll learn how to hide a section on your Squarespace website. But why would you want to hide a section in the first place? There are several reasons!

Perhaps you're working on a new section and want to perfect it before making it visible to visitors. Or maybe you have a promotional section, seasonal announcement, or limited-time offer that is no longer relevant, and instead of deleting it, you'd prefer to keep it hidden for future use.

Let’s dive in..

Watch the video 👇

Check out the YouTube video below

The first option for hiding a section is to save it by clicking on the heart icon. From there, you can delete it.

(Continues below the image.)

We can then click on "Add Section" to restore the saved section. However, this means we would need to save the section again each time we make changes, delete it, and then add it back. Fortunately, there’s an easier option...

We can actually add a small piece of code to hide the section, making it invisible without deleting it. To do this, simply copy and paste the following code in the custom CSS section on Squarespace:

#yourid { // Change this to your id.

display: none;

}

However, we also need to add the section ID of the section we want to hide. In the image below, you can see the section ID highlighted in blue.

To find this ID, I used the Squarespace ID Finder Chrome extension. If you want to learn how to download and use it, [click here].

Once I have added my section ID to the code, the section is immediately hidden, as shown in the image below.

If you want to reverse this, you can simply wrap your code in a CSS comment like this:

*/ code */

This temporarily disables the code without deleting it, allowing you to make the section visible again whenever needed.

Your designer

I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.