Finding Block & Section ID’s In Squarespace
What are Block & Section ID’s In Squarespace -
When using code snippets you’ve found online you’ll find you’re often told to target either the Block ID or the Section ID. But what are these?
These are ID’s given to either Page Sections or Blocks in order to be able to identify them.
With the Block ID’s it’s become a little confusing, there’s now two different ID’s, the Block ID, and the Fluid Engine Block ID. Every block is now wrapped in an extra div which is given a FE Block ID, but this isn’t the one we want. Instead we want to find the element within this and extract the Block ID.
Section ID - section[data-section-id="5eac44f8999bf94756d8e5eb"]
Block ID - #block-028fa2d2e0b852d9e38d
Fluid Engine Block ID - fe-block-643529609bb5d3efa4204742
The Web Inspector -
When adding Custom CSS to your site you’ll find yourself needing Block & Section ID’s constantly. To do this you’ll need to jump into the Web Inspector and dive into the HTML in the Console. This isn’t something you want to have to show your clients if they are novices with code, and frankly is a little too time consuming for my liking, especially if you need multiple section id’s and you’re having to jump in and out of the web inspector as you write your CSS.
Squarespace ID Finder -
This chrome extension by Heather Tovey is an essential tool in my opinion. With just a click of a button all of the Section & Block ID’s are displayed on the screen over their respective elements and you can copy them with a simple click. I’d recommend this to anybody, whether you’re a code novice or a code pro. Check out the Chrome Extension here.
If you have any questions about using Squarespace please reach out by commenting below!