How to disable CSS in Squarespace editor mode (still active on live site!)

When we apply code to a Squarespace website sometimes we will want the effects of that code to display on the front end of our website, but not in the backend. 

For example, if you’ve used custom code to hide a block on your webpage, you want that code to be displayed on the front end and hide said block, however if it’s displayed within the editor and you want to e.g. move the block, you can’t because the code is applied and the block is hidden. 

What you need to do therefore is wrap the code in, you guessed it, more code, to tell Squarespace not to display the code within edit mode. 

This is particularly useful if you use a lot of code when building a Squarespace website and want to ensure the code isn’t getting in the way when you want to perform simple, native tasks in the backend.

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage

Want a framework for designing the perfect homepage?

How to hide custom CSS in Squarespace edit mode 

First things first you need to hide your block (or add whatever the code is that you want to hide in the backend, in this tutorial we’ll be hiding a block). To find out how to do so check out my guide to hiding a block on Squarespace.

You then need to wrap your hide block code in the following code:

 

body:not(.sqs-edit-mode-active) {
/*your code goes in here*/
}

 

This code ensures you can easily access the hidden block in your Squarespace edit mode.

This coding trick is also useful if you’re conducting a client handover. If your client has little to no coding knowledge, chances are they need to be able to make simple edits to their website without having to dig through the CSS to do so. 

Adding this code ensures they can easily access everything they need to. 

Be sure to give it a go and add this code to your website and then let me know how you find it!

book a call with sam crawford squarespace expert

Need an expert to build your Squarespace website?

Book a free kick-off call with our team to discuss your project requirements in detail.

Previous
Previous

How to resize a background image on mobile Squarespace

Next
Next

Squarespace quick save | How to save your progress without leaving editor