TWO Things You Gotta Master to Customise Your Squarespace Website
So from my experience working with Squarespace websites, both for my own biz and creating them for my clients, there’s TWO things that give you the ability to take it from a so-so, decent-enough website, to a fuck-yes online home that feels like YOU, and feels even just a little different from everything else out there...
...and that’s code snippets, and custom images.
If you can master these two things even in their most SIMPLE FORM, they’re a bloody game changer.
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.
👩💻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. There’s also SO MANY websites that post free pieces of code for you to use however you want… So the possibilities are kinda endless. (I've also added x3 pieces of code below for you to try out!)
🎨And on the custom images side of things, well, this is my jam. Like I’ve talked about before, when you want to create something that’s different, you can’t make the obvious or easy choices — and this applies when you’re uploading images to Squarespace, too. Sure, you can upload straight images with zero customisation and it’ll be fine… But that’s all it’ll be. Just okay. Literally every.single.time. you hit that ‘Upload image’ button, there’s an opportunity for you to customise an image to something fresh and different. Sure, sometimes it takes some trial and error to find something that works (and something that works across desktop and mobile versions), but its SO WORTH IT.
So… That’s the basic run down. Here’s 3 of my fave Squarespace code snippets, and 3 easy AF way to customise your images. 👉
3 of my fave Squarespace code snippets —
Side note... I'm not a developer, and I don't provide any tech support for any of these code snippets. My advice if you want to find something particular, is to Google it and/or jump inside the Squarespace forum — where you'll find a TON of articles with people figuring out how to do shit for the particular template you're using. That's how I learn half of the shit I know about SS code snippets. 🤘
👉Removing the header/footer from Index pages
This one is SUPER HANDY for when you're creating any page that you don't want the logo/menu/footer to appear. I use it all the time for sales pages, tutorial/member only pages, sign up pages, and more. Just copy and paste it into the 'Advanced' settings for the Index page you want to hide them on.
As far as I know, this only works on templates in the Brine Family for Squarespace 7.0. To see if your template is in the Brine fam, see this article.
<style>
.Header {display:none !important}
</style>
<style>
.Mobile-bar {display:none !important}
</style>
<style>
.Footer {display:none !important}
</style>
👉Adding extra H4, H5, etc headings
Squarespace lets you set up to 3 different 'Heading' styles in the main Style Settings, but sometimes that just ain't enough, you know. So this is an easy way to add a few more options. I don't recommend using this to add a whole NEW font to your website, because you should only have 2-3 max, otherwise it gets messy and ugly, real quick. So I recommend using this to just add some variation of the fonts you already have, say if you want to add another colour/size option.
Before you start,
There's two parts to the process on this one —
Step 1 :: Copy and paste this into your Custom CSS section, under Design > Custom CSS.
h4 {
font-family: 'Europa', sans-serif;
font-weight: bold;
font-style: normal;
font-size: 18.5px;
letter-spacing: 0;
text-transform: none;
line-height: 1.6em;
colour: #f6cab6
}
Europa', sans-serif; is what you'll need to change, to whichever font you want to be using, and you'll see the other options should be pretty self explanatory. You can also change the font size, colour, etc.
Step 2 :: When you want to add this new heading style on your website, you'll need to insert it as a 'Code' block. Copy and paste the text below into that code block.
<h4 style="text-align:center;">
ADD YOUR TEXT HERE
</h4>
The green text is hopefully self explanatory, lol, this is just the alignment of the text, so you can obv change this to left, right, or center.
You can then repeat this process to create an H5, and so on.
👉Adding underlines/highlights to text
If you've been creeping on any of my websites, or my client's websites, you would have seen me using this! It's super fucking handy, it's really easy to do, and it takes the design of your website up a notch. (The example above is from the sales page for one of my clients, Madison Hedlund).
There's two parts to the process on this one —
Step 1 :: Add this code below to the Custom CSS section, under Design > Custom CSS.
.highlight {
background: linear-gradient(180deg,rgba(251,167,248,0) 50%, #f6cab6 50%);
}
.highlight is the name of this piece of code, so this is what we'll use when we're adding text onto the page and we want to tell it to use this particular highlight.
#f6cab6 is the hex colour code, so you can change this to suit your branding.
Step 2 :: Go onto the web page where you want to highlight a piece of text.
Add a 'Code' block, and copy + paste this text below in there.
<h3 style="text-align:center;">
<span class="highlight"> ADD YOUR TEXT HERE
</span>
</h3>
So, breaking that down, here's what all that means —
h3 is the font style you're using. This can be whatever you want, h1, h2, h3, or P for a normal paragraph. Note that you must change BOTH pieces of 'h3' code if you want to edit this, and they must always stay the same. Coding 101 = every piece of code has an 'open' tag and a 'close' tag.
"text-align:center;" is hopefully self explanatory, lol, this is just the alignment of the text, so you can obv change this to left, right, or center.
<span class="highlight"> is referring to the name of the style we're pulling from the Custom CSS settings that we just set up.
And that's pretty much it. Once you get this dialled, you can obv go back and repeat this piece of code in the Custom CSS settings, using a different name (that's the purple part), for each different colour or style of highlight.
3 easy AF ways to customise images —
I could literally teach a whole course on this shit (😉), but for the sake of ease, I thought I'd start with 3 VERY basic tips to customise the images for your Squarespace website. These aren't specific to any program (like Canva, or Adobe) — they're so friggen simple you can do them anywhere.
👉Add a simple line to one edge of the image.
This is some real newb-level shit, but that's what we're going for here! If you use Canva, or Photoshop, or some other magical designy program that I've never heard of, I can almost guarantee that you'll be able to add a rectangle. Then all you gotta do is add some colour to 'er, and move it to one side of the image, like the above.
It's easy-as-fuckin-pie (I dunno what's so easy about pie, now that I think about that saying, lol... it's easy to make? easy to eat?), it looks slick, and anyone can do it.
A spesh extra designy tip :: Add the box on a side of the image opposite to where there's alot going on. In the example above, you can see that the right side of the image is taken up by the leaf, so putting it on the left makes it look a little more balanced out.
👉Do a 50/50 background image.
Similar to numero uno, we're keeping it MEGA SIMPLE. For background images one thing you can play around with is splitting the image in two. I'm gonna say that doing it horizontally is going to be better most of the time, if you're using this for background images. Depending on what content you've got sitting over the top of the image you may need to play around with the image itself, and the spacing/sizing of it — if there's text that needs to be readable... But if you've got a solid image or text block over the top then even better, cuz you don't need to worry about it.
Same as above, this is really easy to do whatever program you're using, just make sure that the images are an even width, OR that its clear they're not meant to be even — for example if you have one image taking up 3/4, and the other image 1/4.
👉Add big, oversized text to the background.
So you could layer this one on top of the previous tip if you're feelin' spicy, or you can try doing it with a single image, or a single colour background. You can do this with handwriting (if you have an iPad/wacom), or you can mess around with some fonts. I've used this in a lot of my work, and you can see it in all of the Basic Bitch templates too (both the Squarespace Design Kit, and the Canva Bundle—the example above is from the Keynote/Presentation template, in the Canva bundle).
Doing this just adds some more layers + interest to your designs so they don't look as flat.
Resize the text till its HUGE and play around with placement of it in the background. Remember, the point of this is NOT for it to be readable, so don't worry about that... Have fun with it.
So that's all I got for today! Have a play around with a couple of these things and let me know how you go. If there's any other specific Squarespacey shit you'd LOVE some help with, hit me. 🤘
