In this tutorial, we are going to create a a split layout in Squarespace - three different versions in fact!

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.

I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.

We’ll create a page section that is an image on one half and text on the other; another version with a solid color; and a third version that lets you scroll thru a big amount of text on one site, often called a split page layout.

The codes below only change the desktop version of your site, not the mobile version because I personally think that a split-screen on a small device can get a little too “squished” and make it hard for a site to be accessible.

If you want it to stay half screen on mobile, remove the line that starts with @media…

One last thing before you dive into the codes - I want to encourage you to play around with the percentages and other values! I recommend using vh (view height) vw (view width) and percentage to keep it responsive, but try any value type you want!

Custom code is all about customizing so use these codes to make your site uniquely yours ❤️

Here are the codes & settings you’ll need:

Content on the left side, image on the right:

Section Settings:

Width: Small, Alignment: Left

Custom Code:

This code is written to display this split layout on anything larger than 768px in width, so it will stay full screen on most mile devices. Be sure to grab the data section ID so this code is only applied to one section at a time. Want this to apply to all sections? Skip that line!

@media only screen and (min-width: 768px){
[data-section-id=”123456789”]
.section-background{width:50%!important; margin-left:50%!important}}

Content on the right side, image on the left:

Section Settings:

Width: Small, Alignment: Right

Custom Code:

This code is written to display this split layout on anything larger than 768px in width, so it will stay full screen on most mile devices. Be sure to grab the data section ID so this code is only applied to one section at a time. Want this to apply to all sections? Skip that line!

@media only screen and (min-width: 768px){
[data-section-id=”123456789”]
.section-background{width:50%!important}}

Important Info for Split Layouts in Squarespace 7.1

Be sure to use the data section ID to apply this to one section at a time. You can install this using site wide CSS (Design > Custom CSS) because that data section ID is unique to one section on one page. This single code line will have a minimal impact on site load time but you can also install this via page header code injection (Page Settings > Advanced) if you want to reduce site wide load time.

Don’t know the section id?

You can replace the [data section id"=”123456789”] part of the code with #page to isolate just the sections on the page, not footer sections.

@media only screen and (min-width: 768px){ #page .section-background {width:50%!important; margin-left:50%!important}

Only want this on one specific section?

You can replace the [data section id"=”123456789”] part of the code with .page-section:nth-child(1) to isolate just the first section, or .page-section:nth-child(2) for the second, changing up that number to the section order you are working with.

@media only screen and (min-width: 768px){ .page-section:nth-child(2) .section-background {width:50%!important; margin-left:50%!important}

Adding this to one page?

Check out this tutorial to learn about installing code on a single page in Squarespace.