My go to extension to get any block id or section id for Squarespace customisation

Have you ever wanted to add some custom code to your Squarespace website and the instructions ask you to get the block ID? Previously to get this idea you would have to go into the site code and find it manually but now thanks to this handy extension created by some clever folks you can grab both the block ID and collection ID and one click.

What are these ids?

Firstly what an earth are these IDs? Basically the way Squarespace has created its template is based on a collection of IDs. All of your images, text boxes, galleries etc are all blocks. These blocks can then be manipulated individually using their block IDs and the extension below will allow you to grab them super quickly.

Squarespace Block ID Extension

There are others out there but this is my favourite tool, that never fails me, to find the ID without jumping into the code on the site to find it.

Once installed go to the page with the block you want to work on and click on the extension. It’ll look like the below image showing all the id’s of the blocks on the page:

Rotate the scroll block in squarespace - css tricks

You can then grab the correct block id, by clicking on it (it’ll copy it directly for you) e.g #block-yui_3_17_2_1_1707472915162_7736 and use it with any custom css code to target that specific block

If you are using 7.1 which uses Squarespace Fluid engine, depending on the CSS you might have to remove the # in front of block and replace it with .fe-

And that's it! Now you can grab any block or section ID and customise just those elements.


Hey I’m Nisha, a 10 year Squarespace Certified Expert. I build highly engaging and swoon worthy websites for Creatives, Coaches and Female Business Owners.

Click explore if you want to know more about how I can help you launch your dream website in just 2 weeks!

Nisha White

Squarespace Web Designer - Somerset & Devon Based

https://www.madebynisha.co.uk
Previous
Previous

How to add a divider line to all of your page sections in Squarespace without custom coding

Next
Next

Use this code to rotate your scrolling text block on Squarespace - Easy copy & paste code