How To Create Custom Section Dividers In Squarespace

One way to make your website more visually appealing is to add custom section dividers. There are two ways to do this in Squarespace: one is with a bit of CSS magic and the other one is with the help of the SquareKicker extension. In this tutorial, I’ll walk you through the process of adding custom section dividers using SquareKicker.

Heads up! This post contains affiliate links which means I earn a small commission if you purchase through my links. My chips and salsa fund thanks you from the bottom of its heart… err, stomach?

 

Prefer written instructions? Here’s a step-by-step breakdown:

For this tutorial, I'll be using the SquareKicker extension so you’ll need to have that installed on your website. The good news is that they offer a 14-day free trial so you can try it out and see if it’s right for you.

Another thing you need to know is that you can use these section dividers on both sections that use background images as well as in those who use that use solid color.

Once you’ve installed SquareKicker, click on any page you want to edit and click the Edit button. Then, find the section you want to modify. You’ll notice the little SquareKicker icon is now visible. Click that icon and then press the Dividers option.

You can choose whether you want the top divider or a bottom divider. After you’ve selected a divider, you can select how you want the divider to look. You’ll also notice there are several options for styling the dividers. These include:

  • the placement

  • the color (you’ll want to match it with the color that's in the section below to make it look seamless)

  • the height

  • and more.

You can also set different dividers for the top and the bottom, if that’s something you like. There's lots of options to explore and play around with. So, if you haven't checked out the SquareKicker extension, be sure to do. Keep in mind that if you decide that you don't want to keep up the subscription, you can cancel your plan and the changes will stay on your website. You just won't be able to use it for any new customizations. That’s it for this tutorial, and I’ll be back soon with another one.

Oh, and if you’re still working on your Squarespace website, watch my free website training below so you can launch your website with zero stress and tech overwhelm.

More Squarespace tutorials this way:

Ana Lea Amelio

Hey! I’m Ana Lea and I help you create client-winning website and content strategy that attracts, connects, and converts visitors into clients. Get started for free with my website training.

https://leydesignstudio.com
Previous
Previous

How To Add Related Posts To Squarespace

Next
Next

How To Add Alt Text To Images In Squarespace