□□When it comes to adding pieces of code to your website, there’s only a few basics worth understanding about how coding works - and then its just a matter of changing a few minor things, like colour codes, or fonts, to customise your Squarespace website just that little bit more. Personally I really don’t recommend going hard on code and adding too much, because it can just make shit messy, BUT even the most simple snippets of code can totally change the whole vibe of your website. I get asked a friggen LOT about how to customise Squarespace websites so they don't look so templatey, or so obviously a Squarespace website, and well, this is it. If you can master these two things even in their most SIMPLE FORM, they’re a bloody game changer. Image Block Caption Below Text Formatting. Fortunately, we have code for that! Adjust the size, weight and letter spacing! Oh, and we’ve adjusted the text alignment as well! The font options for the caption below text under an image block leaves much to be desired. IMAGE BLOCK CAPTION BELOW TEXT FORMATTING Handy if you always want to showcase a call to action and make the announcement bar feel more like it’s part of the design of the site. With that being said, roll up your sleeves, here’s our top 10 favorite code snippets:īasically what this does is removes the X in the top right corner so the announcement bar stays active and people can’t close it. Now, it’s important to note that any third-party code that you add to a site is not supported by Squarespace so if anything goes wrong, they are not authorized to help, just a heads up. ![]() Then all you have to do is paste it in place of the block ID # in the CSS snippet! Find the identifying number hovering over the block you want to adjust, click on it and it will automatically copy the code to your clipboard. Once it’s been installed, all you need to do is go to the page on your site you want to make adjustments to, click the extension icon on your browser and you’ll notice a bunch of boxes appear on the page. Basically, what this does is identifies the unique code for either the entire page or the block you’re trying to adjust so you can make changes to individual items instead of it effecting the whole site. Only way to know is to copy and paste it to see if it works! If you’re not sure what family your template is with, here’s a list for you to refer to: įirst things first, if you haven’t already done so you DEFINITELY need to install the Chrome extension for Squarespace’s Collection/Box identifier which you can do so here. They might work on others, but we can’t say for sure. The majority of this code is CSS, with the exception of one that will need to be added in 2 stages, but I’ll walk you through it ) Also, we primarily build our sites with templates in the Brine family and so this code is written to work for those templates. We wanted to share our top 10 favorite Squarespace code with you all, so you can have as much fun as we do! ![]() Here at Clover & Crow, we’ve been building websites with Squarespace from the very beginning, and though their platforms are meant to be fairly turn-key ready, we also love to add our own customization to give each site a unique and more custom feel. They’re beautifully built, easy to work with and have amazing support.
0 Comments
Leave a Reply. |