How to add a divider line to all of your page sections in Squarespace without custom coding
As you can see I'm a big fan of dividing lines on my site. In the last version of Squarespace 7.0 it was pretty hard to add these divider lines in. You had to custom code a lot of it but thankfully Squarespace have updated this with a very simple divider feature for 7.1.
If you don't know where you're looking it can be a little bit hard to find the divider feature, so follow along below and I'll show you how to add a divider not only with a line but with different shapes to add whatever style you want for your page
Where to find the divider feature on Squarespace:
You'll find the divider feature in the Edit Section panel. Scroll all the way down to the bottom and you'll see a section called styling. Then tag along divider and it will open up a new panel with all of the divide of settings.
As a default Squarespace likes this wavy divider which is perfect if you're after a little curve in your design but we want a straight thin line so let's go ahead and edit the sections to get this effect.
Next click on shape and it will open up the sheet panel for you. How are you can select how you want your section to look. There's quite a lot of variants, you can play around with each of them, but for now we're going to go with the straight line edge.
Now all you need to do is customise the thickness, the stroke and the colour to match your brand. As a default Squarespace’s small thickness is at 2 pixels so if you want a super thin line like the one in the image, click on the three dots and you can bring the pixel size all the way down to 1.
And there you have it, now you can go ahead and customise the rest of your sections and all of your pages.
Hey I’m Nisha, a 10 year Squarespace Certified Expert. I build highly engaging and swoon worthy websites for Creatives, Coaches and Female Business Owners.
Click explore if you want to know more about how I can help you launch your dream website in just 1 week!
