In this tutorial, I will show you how to create a unique looking border between sections in your Squarespace 7.1 site.

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 are going to work on a code that will use the same border for all sections, one that has a unique top and bottom border, and we will apply this code to only one section at a time… lots to cover today!

The codes you need are below, but make sure you watch the tutorial so you know how to use them.

And remember, "border" can be set to border-left, border-right, border-top, and border-bottom so you can get really specific there!

Here are the codes from the tutorial:

Standard border between sections

.page-section{border:5px double red}

Add a unique top and bottom border

.page-section{border-top:5px double red; border-bottom:5px double red}

Specify only one section at a time

.page-section:nth-child(2) {border:5px double red}

Creative Border: Square in the middle:

.page-section:after {content: ""; position: absolute; z-index: 1; top: -45px; left: calc(50% - 45px); width: 90px; height: 90px; transform: rotate(45deg); background-color: white; }

Creative Border: Circle in the middle:

.page-section:after {content: ""; position: absolute; z-index: 1; top: -45px; left: calc(50% - 45px); width: 90px; height: 90px; background-color: white; clip-path: circle(50% at 50% 50%)!important;}

Creative Border: Star in a circle

.page-section:after {content: "★"; text-align:center; color:red!important; font-size: 50px; position: absolute; z-index: 1; top: -45px; left: calc(50% - 3px); width: 90px; height: 90px; background-color: white; clip-path: circle(50% at 50% 50%)!important;}