How to Use Section Dividers in Squarespace for Stylish Page Breaks

Have you ever felt like your website’s sections were blending together? Squarespace’s section dividers can fix that by adding stylish, customizable borders between sections. The best part? You don’t need to use any custom code—this feature is built right into the Squarespace editor.

In this tutorial, I’ll show you how to add, customize, and style section dividers to create clean and eye-catching transitions between different parts of your site.

Watch the video

Check out the YouTube video below. 👇🏼

Why Use Section Dividers?

Section dividers aren’t just decorative—they’re functional too. They:

• Improve readability: Break up large blocks of content for easier navigation.

• Enhance design: Add visual interest with waves, curves, and other shapes.

• Maintain branding: Customize the colors and styles to align with your site’s theme.

Step-by-Step Guide to Adding Section Dividers

Step 1: Access the Section Editor

1. Log in to your Squarespace account and navigate to the page where you want to add a divider.

2. Click Edit and select the section above where you want the divider to appear.

3. Open the Section Settings by clicking the pencil icon in the top-right corner of the section.

Step 2: Enable the Divider

1. Scroll down in the Section Settings until you see the Divider toggle.

2. Turn it on to activate the section divider.

3. You’ll immediately see a basic divider appear at the bottom of your section.

Step 3: Customize the Divider’s Style

Squarespace provides plenty of customization options for your divider:

1. Shape: Choose from presets like straight lines, waves, curves, and dips.

2. Color: Match your divider to your site’s color palette or create contrast with a bold accent color.

3. Stroke: Pick between solid, dashed, or no stroke for the divider line.

4. Width and Height: Adjust the width and height of the divider to control its size and spacing.

Step 4: Fine-Tune with Advanced Controls

For even more precision:

1. Thickness: Use the slider or manually input pixel values to adjust the stroke thickness.

2. Alignment: Shift the divider left or right to align it perfectly with your design.

3. Flip: Flip the divider vertically to invert its shape.

4. Custom Sliders: Manually tweak settings like wave amplitude and dip depth to create a truly unique look.

Pro Tips for Section Dividers

1. Keep It Consistent: Use the same divider style throughout your site to maintain a cohesive design.

2. Use Accent Colors: Highlight your brand by using divider colors that match your logo or buttons.

3. Preview Your Changes: Always check how your dividers look on both desktop and mobile devices to ensure they’re responsive.

Wrapping Up

Section dividers are a quick and easy way to make your Squarespace website more visually appealing and organized. With a few clicks, you can create stunning transitions that elevate your site’s design.

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.