New Squarespace Feature: Custom Section Dividers

Heads up: this post may contain affiliate links. In other words, if you make a purchase using my link, you won’t pay a dime more but I’ll earn a small commission. My chips and salsa fund thanks you from the bottom of its heart… er stomach?

I'm back today with another Squarespace tutorial, where I want to show you the newest Squarespace feature that they introduced recently, and that is: custom section dividers.

Now, if you remember previously, I have done a tutorial on custom section dividers in Squarespace using SquareKicker; the absolute best extension for Squarespace. But, Squarespace now introduced this feature on their own natively.

So you don't need to use SquareKicker unless you want more customization options, and I will touch upon that later in this tutorial. But for right now, I just want to show you what you can do with the native built-in Squarespace feature.

Prefer to watch? Click Play on the video below 👇🏻

How to Add Custom Section Dividers in Squarespace Natively

So I am over here on one of my demo websites for one of my templates, which is launching soon. And I wanted to use it to show you what options you have available when it comes to section dividers. So to get to this, click on edit button to edit the page. And then, if you hover over any section, and then click on edit section, scroll down, and then toggle this option that says divider.

And that is essentially all you have to do to get the divider to show up on your section.

We now have a shape divider in between these two sections. So let’s take a look at the options we have for the section dividers.

First option that you have is this shuffle option, which gives you the ability to shuffle the settings and basically scroll through different section dividers that are available.

If you click the shape in the middle, then you will be brought to the shape editor where you can choose which of the dividers you want to use.

And then finally this last section, essentially, takes you to that section where you can edit the settings for each shape divider.

Now for most of these, you have the option to edit width and the height, which you can choose of any of these prebuilt options, which are essentially small, medium, large. Or you can click the three dots and either drag this slider to control how the divider looks, or you can enter a custom value.

The same applies for height. Again, you can make it taller or you can make it shorter. And then you can enter a custom value or simply drag the slider to change the height of the divider.

Then we have the flip option. So we can flip the way it is positioned. For some of these, you will be able to notice the difference for some of them honestly, it's like it doesn't really do much, so you won't be able to notice it. And for some of these, you will also have the option to flip, not only horizontally, but also vertically, which changes the direction and the position of the divider.

And then, you will also have the option to control the alignment, which again, controls how the divider appears on your website.

The last option that you have is the stroke option. So right now it is set to no stroke. But if I add a stroke, then we can choose the color for it. And if you click on it, you can either choose a color that is in your site palette, so any of these. Or you can enter a custom value if you have like more colors in your color palettes that you didn't add to your website, or if you simply want to use a completely different color to draw attention to it; you can enter hex value or you can just drag the slider around here and play around with the colors to control the color of the divider.

And then, finally, you can control the thickness of the divider, so you can make it very thin or you can make it very, thick. And of course, if you don't like any of these options, if you want to fine tune them, you can drag this slider up and down or enter our custom value to change the thickness of the divider.

Now that's it for the built-in options for the section dividers here. Now, as you may have noticed, this only adds the section divider to the bottom of the section. And this is where this feature in Squarespace natively is a little bit limited because if you want to add a top divider or a divider to the top, of your section, there we go. You would have to add a section divider to each and every section to get that look.

And you can see that some of them don't really work on all sections. For example, if you wanted this section to blend in seamlessly with this one, it doesn't really work because there is no option to edit a top divider for that particular section.

So, if you want more styling options and if you want to create these seamless transitions in between sections with the section dividers; you can easily do this with SquareKicker because it allows you to add both the top and the bottom section dividers.

Final Thoughts

And that's all I have for you today, and I hope you put these section dividers to good use. And if you do, please let me know in the comments, what do you think about this new feature, if you liked it, if you had the chance to use it, and which section divider is your favorite one?

For more tips and tricks, check out these articles: