Free Tool

Section Style Builder

Design custom section styles for Squarespace 7.1 — paste the CSS into your Custom CSS panel

Why this matters

Squarespace sections all look the same out of the box. Same padding, same spacing, same feel. This visual tool lets you customize any section — padding, colors, borders, overlays — and gives you the CSS to paste into your Custom CSS panel. No coding experience needed.

Start with a preset

Spacing

80px
80px
24px

Colors

Layout

1200px
0px

Borders

Background Overlay

0%

Adds a dark overlay on top of section background images. Set to 0% to disable. Useful when you have a background image and need text to stay readable.

Pro

Unlock full section customizer

Live Preview

yoursite.squarespace.com

Your Section Heading

This is a preview of how your section will look. The paragraph text, heading, button, and image placeholder all respond to your style changes in real time.

Learn More

Target Selector

Enter the CSS selector for the section you want to style. To find your section's unique ID, right-click the section in Squarespace, choose Inspect, and look for data-section-id. Or use our Squarespace ID Finder tool. Use .page-section to style all sections, or a specific ID like #section-abc123 to target one section.

Generated CSS

/* Section styles generated by SquarespaceTools.com */
.page-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  background-color: #ffffff !important;
}

.page-section .content-wrapper {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-section h1,
.page-section h2,
.page-section h3,
.page-section h4 {
  color: #000000 !important;
}

.page-section p,
.page-section li,
.page-section span {
  color: #333333 !important;
}

How to add this to your Squarespace site

1

Copy the CSS above

Click the "Copy CSS" button to copy the generated code to your clipboard.

2

Open your Squarespace site editor

Log in to your Squarespace account and open the site you want to edit.

3

Go to Design → Custom CSS

In the left sidebar, click "Design", then click "Custom CSS" at the bottom of the panel.

4

Paste the code

Click inside the Custom CSS text box and paste the code you copied. It will apply instantly — you’ll see the changes right away in the preview.

5

Save and publish

Click "Save" in the top left corner. Your section styles are now live on your site.

How to target a specific section

  • Every section in Squarespace 7.1 has a unique data-section-id attribute. Right-click your section, choose Inspect, and look for it in the HTML.
  • Use .page-section to apply styles to every section on your site, or #section-abc123 to target just one.
  • Need help finding the ID? Try our Squarespace ID Finder tool or install the free Squarespace ID Finder browser extension.