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 a section ID or block ID 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 ID in Squarespace

Finding a section ID in Squarespace is an easy task, although there isn't a built-in tool specifically designed for it. Instead, you can use the browser's developer tools to locate it manually. Here's how:

1. Open the Page: First, navigate to the Squarespace page where you want to find the section ID. Make sure the page is live, or if you're working in a draft, ensure the section you need to identify is visible on the page.
2. Right-Click & Inspect: Right-click anywhere inside the section that you're interested in and select "Inspect" (or "Inspect Element" in some browsers, like Firefox or Safari). This action will open up the browser's developer tools.
3. Locate the Section ID: Within the developer tools, look for a <div> tag that contains the attribute data-section-id. It will appear as part of the HTML code. The section ID is typically displayed in this format:

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

The value inside the quotation marks is your section ID. This ID is a unique identifier that Squarespace uses to distinguish each section of your website. You can now use this ID for styling or customization purposes, like adding custom CSS or targeting specific sections with JavaScript.

How to Find Block ID in Squarespace

Just like section IDs, block IDs are essential for targeting specific blocks of content (e.g., images, text, buttons) for customization. These IDs are used when applying custom CSS, JavaScript, or in the context of widgets. Here’s how to find a block ID in Squarespace:

1. Right-Click on the Block: First, navigate to the block you wish to target (e.g., a text block, image block, or button) and right-click on it. From the context menu, select "Inspect" or "Inspect Element." This will open the developer tools, showing the HTML code corresponding to the block.
2. Find the Corresponding HTML: Once the developer tools are open, the element you're inspecting should be highlighted. You’ll see the corresponding HTML code for the block, which can be a <div>, <p>, or other relevant tags depending on the block type.
3. Look for the Block ID: The block ID typically appears within the HTML in this format:

<div id="block-yui_3_17_2_1_1614253071344_1234">

The part after id="block- is the unique identifier for that block. You can use this ID to apply specific styles or create interactions just for that block. Knowing the block ID is especially useful for custom CSS or when using third-party tools and widgets that target specific blocks.

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

Knowing how to find and work with 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.