Section dividers are a great new addition to Squarespace 7.1 unless you want a spilt section - text on one side and an image on the other. These dividers are placed after the content grid, so content blocks can’t reach all the way to the edge. Luckily, we can make this magic happen with custom CSS.

In this tutorial, you’ll learn how to use custom code to create a split page layout that works with section dividers, too.

There are a few important things to know about this code. First is the location - do you want the section background to be on the left or the right? If you want it on the right, you need to add extra code to scoot it to the side.

You'll need to grab the data section ID and update the code below so it will work for you. That might seem complicated, but don’t worry - I made it as easy as copy and paste! 🙌

Image on the right side of the page section:

Image on the left side of the page section:

⭐ Free Training: Squarespace CSS Basics

📄 My Collection of Squarespace CSS Selectors

📺 Page Section Divider Overview

🎙️Podcast: Overview of Page Section Types in Squarespace 7.1