Custom CSS in Squarespace - Intro
Squarespace offers a bunch of different options for users and designers, but sometimes we want to go the extra step and add something custom to our sites. It may seem daunting at first, but if you want to add custom elements, the Custom CSS panel is your friend.
Today I'm gonna show you a couple of things to help you start on your Custom CSS journey!
First off is finding the Custom CSS Panel. If you don’t know where to look, odds are you haven’t seen it yet. From your main site management navigation, you’ll click Pages from the Website sub nav. Under Pages, you have a few categories. Go to the last one and select Website Tools. Here you’ll find the Custom CSS! Once selected, this opens up a side panel where you can add your code and see the impact it has on your site in real time!
Locating the Custom CSS panel in Squarespace
Coding can get a little overwhelming, especially when you’re just starting out. I always recommend labeling each section with a title so when you go back to the Custom CSS, you’ll know what goes where. This is super easy to do, just add two forward slashes before the text. It’ll make the text a gray color, so you’ll know it’s not affecting any code. This way, I can scroll through code I’ve done and identify and make changes to specific sections easily.
Labeling various sections with //Section Title so I know what code is where
My last piece of advice is that Google is your friend. Stuck on figuring out how to add/move/alter an element of the UI? Google it! Just make sure you include Squarespace in the search bar and you’ll likely find blogs with basic code items. For more specific things, you’d be surprised how many other people have run into the same issues you do! That’s why Squarespace’s forum is super helpful to browse, as there are answers with code snippets you can copy and paste into your Custom CSS to fix an issue quickly!
Odds are other people have had the same questions you do, so don’t be afraid to Google them!
Hopefully you’ll feel more comfortable trying out some custom code in your Squarespace site. It’s amazing how many possibilities it opens up and what a difference it can make for clients’ websites!