5 most useful types of page ID in Squarespace
When you’re looking to add a customization to a specific page, area or block on your client’s Squarespace site, IDs are the key to make that happen.
Squarespace templates have a couple of different ones included in their HTML, depending on the family, so today I thought we’d do a roundup of the ones that can come in handy when going after a very targeted area of our site.
Let’s take a look!
Page IDs
These are present on all pages of your site, including index pages, and can be found inside the opening body tag of each one.
They usually have a prefix of collection- followed by a random string of characters and they’re useful when trying to apply a customization to a single page on your site – whether the final target is a specific block, element, or even a “common” area like the header or footer.
These are generally used at the beginning of your selector, and are preceded by a # sign, like so:
#collection-5eab1444b5078970965a60ad .the-rest-of-your-selector-goes-here { }
Index section IDs
These ones are present on all the different index sections of any Brine template and some other templates like the Pacific family (although with a slight modification).
They’re located inside the opening section tag for that specific index section and their value matches the URL slug you gave to it while setting it up. These can be used instead of a page ID to target a single part of an index page.
Index section IDs come in very handy when you have several of the same kind of block or element on a single page, and you’re looking to tweak just ONE of them.
To use an Index Section ID, it needs to be placed before your block/element selector and be preceded by a # sign:
#about-us .the-rest-of-your-selector-goes-here { }
Block IDs
Block IDs are present for all blocks in Squarespace, regardless of the template.
Not all elements, all BLOCKS.
This means that all of the different elements you can choose from to place on your page through the pop up menu have block IDs. However, layout items such as index sections, headers and footers don’t.
These IDs can be found inside the opening div tag of the “main wrapper/container” of a block and can be used to make changes solely to it and its inner elements.
They begin with the prefix block- followed by a random string of numbers, and they may or may not be followed by the letters yui.
Note: ids that BEGIN with yui are NOT block IDs. They’re not meant to be used in our code since they’re dynamic and change on page refresh, so ignore them if you see them.
In general, block IDs are placed at the beginning of your selector and preceded by a # sign, like this:
#block-yui_3_17_2_1_1587589924151_15317 .the-rest-of-your-selector-goes-here { }
Individual blog post IDs
These, just like Page IDs, can be found in the opening body tag of individual blog post pages.
They start with the prefix item- followed by a random string of characters.
They can be used to make changes to ONE specific blog post page.
These are generally used at the beginning of your selector, and are preceded by a # sign, like so:
#item-5e398a1a2b18d575fc81e5d4 .the-rest-of-your-selector-goes-here { }
Page section IDs in 7.1
At the moment the only way to target specific sections of a page in 7.1 is through their “data-section-id” attribute.
These are NOT regular HTML IDs, but they can still help us achieve the same level of specificity as an Index Page ID.
They can be found inside the section opening tag and it equals a random string of characters.
To use them, the whole attribute name and value needs to be wrapped around square brackets and it’s usually placed at the beginning of the selector:
[data-section-id="5e85e5ee4331a53f38372512"] .the-rest-of-your-selector-goes-here { }
Alrighty, so there you have it.
Now you know how to find and use some of the most helpful IDs Squarespace has to offer, in order to make your customization as specific as you need to.
Until next time,
B.
