Stop Code from Working While Editing Content in Squarespace 7.1
Want to apply custom code in Squarespace 7.1 only on the Live Site or only during Edit mode? Let's do it.
In this tutorial, I’ll show you how to control exactly WHEN your custom CSS code runs by using the .sqs-edit-mode and .sqs-edit-mode-active classes that Squarespace automatically adds to the body tag.
This is Part 1 of this 3-part tutorial so, if you find it helpful, make sure to like the video and subscribe for the upcoming examples!
01 | CHAPTERS
00:00 - How to apply custom code only in Edit Mode or the Live site
00:34 - Finding the .sqs-edit-mode class in the body tag
01:15 - Finding .sqs-edit-mode-active in the active Edit Mode
01:45 - When Edit Mode classes disappear
02:39 - Example 1: disabling hover effects while editing an Auto Layout section
03:38 - Using the :not() selector to exclude the active Edit Mode
05:35 - Testing the code on the Live site vs Edit Mode
06:23 - What’s coming in Parts 2 & 3
02 | BLOG POST + RESOURCES
Find related tutorials, notes, and any code mentioned in this video:
https://beatrizcaraballo.com/blog/sto...
Part 2:
• How to Stop Code in the Squarespace Backen...
Part 3:
• Edit Mode Only Custom CSS for Squarespace 7.1
03 | WORK WITH ME
Need help with a Squarespace client project?
From brainstorming the best approach to hands-on implementation, I help designers navigate tricky builds and move forward with confidence:
https://beatrizcaraballo.com/services
04 | THE SOURCE NOTES
Get weekly customization tips and troubleshooting insights based on real Squarespace project challenges:
https://beatrizcaraballo.com/notes
05 | SUPPORT + INQUIRIES
Have a project challenge you’d like help with?
I prioritize client inquiries, but I also use questions and challenges I receive to inspire future tutorials. Reach out here:
https://beatrizcaraballo.com/contact
06 | NOTE
The code shown in this video is provided as-is and may need adjustments depending on your specific project and Squarespace settings.
07 | KEYWORDS
edit mode code squarespace, live site code squarespace, squarespace css tutorial, squarespace 7.1, custom css squarespace, squarespace web design, squarespace custom code, squarespace web development, squarespace design tutorial, squarespace site customization, squarespace code implementation, squarespace css tricks