Creating unique id for Sections with Squarespace Background Video

Squarespace 7.1 does not provide a built-in way to insert unique identifiers for sections, which can be a significant limitation, especially when you need to target specific sections with CSS or JavaScript. This issue becomes more apparent when duplicating pages, as Squarespace generates new IDs for the duplicated sections. Here’s a workaround to create unique identifiers using Squarespace background video settings.

Requirements for the Solution:

Editable within the Section Editor: The solution should be manageable through the Squarespace section editor without requiring complex custom code.
Persistence Across Duplications: The unique identifier should remain the same even when pages are duplicated, avoiding the need to reconfigure each section.
Compatibility with Personal and Business Plans: The solution should work for users on both the Personal plan and Business plan, allowing everyone to take advantage of this workaround.

The Solution

Using Squarespace Background Video

Squarespace allows adding background videos URL to sections, and this feature can be leveraged to insert unique identifiers. Here’s how:

Prepare a Valid Video Link:

If you don’t plan to use a video background, use a placeholder video link, such as:

https://www.youtube.com/watch?v=D0UnqGm_miA

Append URL Parameters to the Video Link:

Add a unique identifier to the video URL using URL parameters. For example:

https://www.youtube.com/watch?v=D0UnqGm_miA&section-id=section-pilot

Video background URL parameters explained

In the provided URL:

https://www.youtube.com/watch?v=D0UnqGm_miA is the URL of the background video.
&section-id=section-pilot is the appended URL parameter where section-id is the key and section-pilot is the value.

If you want to assign a unique ID to other sections, feel free to change the section-pilot name to different identifiers

Insert the Video URL as the Background Video:

Go to the section where you want to add the identifier and set this URL as the background video. This embeds the unique ID within the section’s DOM under the data-current-context attribute.

Set Squarespace background video parameters

Change background mode:

After setting the video URL, you can change the background to a different type. The unique identifier will still persist in the DOM.
Keep in mind: As soon as the video background url is removed, the unique id will be removed as well because it is part of the video URL.

Target the Section with CSS:

You can now target the section using the following CSS selector:
[data-current-context*='section-id=section-pilot']

Known Issues

Limited to Sections Supporting Video Backgrounds: This workaround only applies to sections that support video backgrounds. Sections like gallery sections may not be compatible.
Squarespace-Hosted Video Backgrounds: If using a Squarespace-hosted video, the video background video URL will be not usable, but you can still target the section by the video file name.

Leveraging CSS Selectors

To address these issues, you can utilize CSS selectors effectively:

Targeting the First Section (:first-child):

.page-section:first-child {
    /* CSS styles for the first section */
}

Using the Next-Sibling Combinator for Non-Video Background Sections:

[data-current-context*='section-id=section-pilot'] + .page-section {
    /* CSS styles for sections following a section with 'section-pilot' identifier */
}

The result

You can check the demonstration of the workaround on this page. The sections are:

[data-current-context*='section-id=section-earth']
[data-current-context*='section-id=section-mars']
[data-current-context*='section-id=section-mercury']

The custom css was used to style those section are

<style>
.page-section:first-child {
  border: 5px dotted rgb(168, 139, 96);
  width: 100%;
}
[data-current-context*='section-id=section-mars'] + .page-section {
  opacity: 0.5;
  border: 5px dotted red;
}
[data-current-context*='section-id=section-mercury'] {
  border: 5px dotted rgb(96, 139, 168);
  width: 50%;
}
[data-current-context*='section-id=section-mars'] {
  border: 5px dotted rgb(139, 96, 168);
  width: 75%;
}
<style>

Benefits of Using This Technique

Implement Anchor Links with Unique IDs: Instead of relying solely on Squarespace-generated IDs, you can use custom identifiers (section-id) for anchor links, providing more control over navigation and styling. This requires custom code injection though.
Apply Global Styles Across the Site: Easily apply global styles that affect the entire site or specific sections. For example, you can define fonts, colors, or spacing that apply consistently across different sections.

Conclusion

Harnessing video background in Squarespace to assign unique IDs to 7.1 sections empowers customization flexibility beyond Squarespace-generated IDs, enhancing design control and functionality. If you have any questions or want to share how you implement this feature, kindly reply.