How to customize accordion block divider lines in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
The accordion block is quickly becoming one of my favorite ways to share content on my site. 🥰
Squarespace gives us a few design options, like changing the height/thickness and transparency for an individual block, or changing the color for an entire color theme, but that’s about it, unless you use CSS! 🙌
In this tutorial you’ll learn how to turn the solid line into a unique border or even a fancy linear gradient. The codes for this tutorial are below; be sure to watch the video so you know how to use them.
Video tutorial
Here are some time stamps in case you want to jump ahead:
00:32 How to access accordion block divider design settings
01:17 How to add custom CSS to Squarespace
01:28 How to turn a divider line into a unique border
02: 17 Apply custom code to a single accordion block using its block ID
Code Example
Create a standard border accordion divider line
Learn more about borders at insidethesquare.co/borders
.accordion-divider{
color:transparent!important;
height: 0!important;
border-top:2px dotted green;
}
Create a gradient accordion divider line:
Learn more about gradients at insidethesquare.co/gradient
.accordion-divider{
color:transparent!important;
height: 3px!important;
background:linear-gradient(to right, #333, transparent)
}
Want to apply this to one specific accordion?
Use it’s block ID! That’s a unique number generated by Squarespace that will tell a computer “only this specific one gets this style” Here is a link to the Chrome extension I used in the video. Not affiliated with this extension or its creator, just a fan! 🎉 https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
Want to apply this to one specific page?
Check out this tutorial to learn how to install CSS on an individual page in Squarespace, even if you’re on a personal plan: https://insidethesquare.co/squarespace-tutorials/single-page
Here are links to a few other tutorials you can check out to customize your Squarespace accordion block:
Brand new to CSS? Start with my free course here: insidethesquare.co/learn
How to create an alternating color accordion block in Squarespace
