New Feature: How to Add & Style Custom Squarespace Section Dividers - No CSS Code Required!
If you've been looking for ways to upgrade the design of your website or add that customized touch that you normally could only get using custom code or by hiring a professional, then this post is for you!
YOUTUBE VIDEO
I’ll walk you through the process of how to do this below, but if you prefer watching a tutorial, be sure to view the companion video on my YouTube channel.
Adding & Styling Section Dividers
Squarespace recently released an update to their Fluid Engine design editor that allows you to customize your section dividers. This is a great way to indulge your creative side and add a bit of a personalized touch to your website. Previously this required custom CSS code to achieve, but now you can do it yourself right out of the box; no coding needed!
Before you get started, there’s one key thing you need to know. When adding a section divider, the divider can only be applied to the bottom of a section. So keep in mind that whatever you do to the bottom of the section, will impact how the top of the next section looks.
When you’re deciding what style divider to choose, think about how you want your sections to flow from one to the other and use that as your guide.
Do you want it to be subtle or striking? Consistent on every page, or mix it up?
Make some mental notes and then go ahead and have some fun trying out the options!
How to Customize Section Dividers
Get started by going to the section you want to add the divider to the bottom of and click the Edit Section box. When that box opens you’ll see the ‘Divider’ option at the bottom. By default it is toggled off, but you can toggle it on here. Once you do that a selection of settings will appear as shown below.
A basic curved line divider comes up as a default.
Below that is the option of adding a stroke, and a stroke is simply adding a border line to the bottom of your section with a different color.
You can choose no stroke line, or a solid or dashed stroke line, select a color for it, and choose how thick it is.
In the images below, you’ll see how a small, medium, and customized stroke looks. For a custom stroke, simply click the three dots to the right of the ‘L’, and you can drag the selector until you get the size you desire.
But what if you want something other than a curved line as your section divider?
In the grey box where the shape is, you’ll see two options.
To the right of the shape you see two crossed arrows. If you click on this it will shuffle your shape settings. Unless you’re feeling adventurous, most times you're not going to go for this option.
Instead you’ll want to click on the three stacked lines with circles on them to the right of the shape. When you do that the box below will apper.
You’ll see, you have multiple shape options to choose from and additional settings to customize it to your liking. This is where you can try them out and play around with the settings. Have fun with it!
See how different width and height settings impact the shape you chose. Change where the focal point of the divider lands by experimenting with the alignment slider. And with some of the shapes you can even flip them horizontally or vertically or both! Maybe you want the curved line to curve up instead of down, or the straight slanted line to slant in the other direction? You can do that!
This is where you can try out different combinations of settings to get the look you want whether it’s something on the subtle side or something more dramatic that really draws the eye’s attention! You have a lot of flexibility to come up with something that suits you perfectly.
Pro tip: Once you’ve come up with the final design of your section. Be sure to click the heart on the section to save it! That way, you can add sections with that special divider you created without having to go in and input all your settings again!
Having this new ability to add a personal touch and slightly more customized and styled feeling to your website, can impact the visual experience for your visitors and makes it stand out from the standard straight lines.
As you can see, it's really easy to use and a lot of fun. Give it a try and have some fun customizing your site by adding a little flair that suits you!
You may also find these articles helpful:
