How to Find Section and Block IDs in Squarespace

Squarespace is a powerful platform for building modern websites. If you want to customize your design beyond built-in options, knowing how to find section and block IDs is essential. These unique identifiers allow you to target specific elements for styling, layout adjustments, and advanced functionality. In this guide, we'll walk through the steps to locate these IDs and use them effectively.

Understanding Squarespace Sections and Blocks

Before finding IDs, let's break down how Squarespace structures its content.

A Squarespace website consists of pages, which are divided into sections. Sections act as containers for different types of content. Inside each section, you'll find blocks—these are the individual elements such as text, images, buttons, and forms.

Each section and block has a unique ID, making it possible to apply targeted customizations.

Why Section and Block IDs Matter in Squarespace

Squarespace assigns section and block IDs automatically. These IDs serve several key purposes:

• Custom CSS Styling: Change the appearance of specific sections and blocks, such as background colors or fonts.
• JavaScript Functionality: Modify the behavior of elements dynamically, like hiding sections or adding effects.
• Precise Page Customization: Adjust individual sections without affecting the entire template.

How to Find Section IDs in Squarespace

Finding a section ID is simple, but there’s no direct tool within Squarespace. Instead, follow these steps:

1. Open the Page: Navigate to the Squarespace page where you need the section ID.
2. Right-Click & Inspect: Right-click anywhere inside the section and select "Inspect" (or "Inspect Element" in some browsers).
3. Locate the Section ID: In the developer tools, find a <div> with the attribute data-section-id. It will look something like this:

<div data-section-id="645d98a7e0897f7481a5b2c3">

The value inside the quotes is your section ID.

How to Find Block IDs in Squarespace

Just like section IDs, block IDs help target specific elements for customization. Here’s how to find them:

1. Right-Click on the Block: Choose the block you want to identify, then select "Inspect" or "Inspect Element."
2. Find the Corresponding HTML: Developer tools will highlight a <div>, <p>, or other element containing the block.
3. Look for the Block ID: It often appears in this format:

<div id="block-yui_3_17_2_1_1614253071344_1234">

Using Section and Block IDs for Customization

Now that you’ve found your IDs, here’s how to use them for styling and functionality enhancements.

1. Custom CSS for Sections and Blocks

Apply targeted styling with CSS. For example, to change a section’s background color:

#section-645d98a7e0897f7481a5b2c3 { 
    background-color: #f0f0f0; 
}

To modify a specific block:

#block-yui_3_17_2_1_1614253071344_1234 { 
    font-size: 18px; 
    color: #333; 
}

2. Adding Custom JavaScript

JavaScript allows dynamic modifications. For instance, to hide a block:

document.getElementById("block-yui_3_17_2_1_1614253071344_1234").style.display = "none";

Use this approach to trigger effects, animations, or conditional content.

3. Advanced Squarespace Template Customization

Understanding section and block IDs helps modify template behavior, fine-tune layouts, and override default styling without affecting the entire website.

Best Practices for Squarespace Website Customization

Follow these best practices when working with section and block IDs:

• Prefer Classes for Reusable Styles: IDs are unique, so for styling multiple elements, use CSS classes.
• Keep an ID Reference: If you make frequent customizations, store your section and block IDs in a document for easy access.
• Test on Different Devices: Some changes may behave differently on mobile and desktop views.
• Review Squarespace Updates: Platform changes can sometimes affect how IDs are structured.

Useful Links

Using the CSS Editor – Learn how to apply custom CSS to style fonts, colors, and backgrounds beyond Squarespace's built-in options.

Custom JavaScript – Understand how to add and manage custom JavaScript on your Squarespace website to enhance functionality.

Developer Tools – An overview of Squarespace's developer tools, providing resources for advanced customization and template development.

Squarespace Developer Platform FAQ – Frequently asked questions about the Developer Platform, offering insights into its capabilities and usage.

Your Squarespace Website Can Do Even Better!

Elfsight created dozens of useful plugins to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Squarespace!

Conclusion

Mastering section and block IDs in Squarespace gives you greater control over your website’s appearance and functionality. Whether you’re adding custom styles, interactive elements, or advanced template adjustments, these techniques allow precise and effective modifications.