How to find the Code Block ID in Squarespace?
What is a code block ID? Here’s a quick run down!
Each block or collection you add to your page has a unique identifier (or Block ID). When you go to style the CSS, it just makes it much easier to modify specific parts belonging to that specific Block ID, rather than to the whole page.
They look something like this: #block-30ccddd0a4f43434fbfa0ec0
eg. Imagine you have two blocks of texts next to each other. Say… on the left one, you want to style red, and leave the other black. The easiest way to do this, is the find the block ID and then add your CSS code to it.
There are two ways to find your block ID. Let’s start with the easiest way (and the one I would recommend).
1. Squarespace block identifier/ Chrome Extension
I promise you… this is going to make your life SO MUCH easier!
Basically, it’s an extension that (when you click on the ICON) displays the collection and block IDs on Squarespace pages (for custom CSS purposes) so you don't have to dig through the source code to find them.
Simply click on the ID overlay buttons and it will automatically copy the ID to your clipboard!
PS. This only works on Squarespace :)
Here is the link to download the (free) Chrome Extension:
Squarespace Collection/Block Identifier
2. Use inspect in google chrome
While you don’t HAVE to download the above extension, I still 100% recommend it.
This second way is only a backup used as a way to find more complex CSS classes, but technically, you can also find your Block IDs this way.
No need to download anything here. Just double-tap or right-click and hit Inspect. From there, you have an overview of EVERYTHING - which is good and bad. Highly overwhelming if you’re new to coding/CSS but a great place to learn.
