5 Easy Codes to Personalise your Squarespace Website

 
Squarespace is a great platform to build a website on since you can do almost anything you would like between the different content block options and the Site Styles settings. Sometimes, though, it can be fun to take thing up a level and customise them just a little more! This is where CSS code comes in! You don’t need to be a Code Queen to add code to your Squarespace website either, since these 5 little pieces of code can be copied and pasted to help you personalise your website | www.jessicahainesdesign.com
 

If you’ve been following me for any length of time, you can probably tell I’m pretty obsessed with Squarespace and spend a whole lot of time in there!

It’s my favourite website platform because between the content blocks you have available and the Site Styles settings, you can customise your website in almost any way you want to.

This is a huge benefit because you don’t need to know how to code to make things look amazing!

Sometimes, though, it can be fun to take things up a level and customise them just a little more.

That’s where CSS code comes in!

You don’t need to be a Code Queen to add code to your website either, since there are so many places online that you can find free or paid Squarespace plugins that you can copy and paste into your website to make the changes you want.

Today I am going to share a few of my favourite bits of code I like to add to the websites I design.

I have tested these bits of code on multiple templates in the Brine family and they work great. If you use a different template family, you may find they need to be adjusted to work for your template.

To add these bits of code to your website, go to Design then Custom CSS from the main menu in Squarespace.

Let’s get started!

Removing the underline below links in your Website Footer

Removing the underline on links in the footer of your Squarespace website is easy with a little custom CSS. Click through for the code that you can copy and paste right away! | www.jessicahainesdesign.com

It’s pretty standard to see underlines under links when you’re looking at websites, since it’s a way to make a link stand out, but I find it can look outdated and messy since it tends to make everything look more cluttered.

Squarespace has mostly taken care of this by removing the underlines in the main content of your website and giving you an option to change the link colour under Site Styles so they stand out in a fun way.

But a lot of the templates still use underlines on the links in your website footer, and I’m personally not a fan, so I like to go in and remove it. If it’s not your cup of tea either, then you can use the following code to remove them:

a {
  border-bottom: none !important;
}

Much better, right?


Preventing words from hyphenating on Smaller Screens

Are you frustrated by words hyphenating when you are looking at your Squarespace website on your mobile phone? You don’t have to be! Click through to see how you can easily prevent this with a copy and paste code | www.jessicahainesdesign.com

I don’t know about you, but when I look at a website on my phone and half the words cut off to the next line, I find it hard to read and it just looks messy to me.

Too bad Squarespace does this by default and we’re stuck with it, right?

But here’s the thing, you don’t have to be!

Using the code below, you can actually prevent the words on your website from hyphenating on smaller screens so that things are much cleaner and easier to read!

p, h1, h2, h3 {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;
}

 Now we can all breathe a sign of relieve at how much cleaner everything looks!


Setting a fixed width for Buttons

Ever want to stack buttons in Squarespace but find that they look terrible since the text is different sizes so the buttons are mismatched? It doesn’t have to be that way! Click through to see the simple code to make your buttons the same width | www.jessicahainesdesign.com

Occasionally I want to be able to stack buttons on a page, for example, on an Instagram landing page.

Unless the text I am using for those buttons is the same length, the buttons come out at all different widths.

If you can’t already tell from the first 2 items, I tend to like a neat and polished look for my websites, and that goes for these pesky mismatched buttons too!

So, if you also sometimes have OCD tendencies like I do, and you want a cleaner look for your stacked buttons, you can use the below code to make your large buttons all the same width.

Then it’s as simple as selecting the large button anytime you want to stack buttons and you’re set!

.sqs-block-button .sqs-block-button-element--large {
  width: 80%;
}

I have this set to have the buttons show at 80% of the screen size, but if you wanted them to be wider or narrower, you can just change the percentage to suit your design.


Removing the Header, Footer and Announcement Bar on Landing Pages

Occasionally you’ll have pages on your website where you only want people to take the one action. And the best way to ensure they do it is to remove any distractions from the page. And that includes your header, footer and announcement bar. This code will allow you to remove all of these in Squarespace so you can create a distraction free page! | www.jessicahainesdesign.com

Chances are you have a couple of pages on your website where there is a very specific action you want your visitors to take, such as signing up for your free offer or on a sales page.

How can we help encourage our website visitors to take that action?

By removing all of the distractions and other options for them to click on!

And yep, that includes your header, footer and announcement bar, too!

This way, the only options for the person to leave the page is to take the action you want or close the page.

So this code isn’t quite as cut and paste as the rest since we have to do a bit of investigating to find the page ID to make sure we are only removing the navigation on the specific page in question and not our whole website, but I’ll walk you through what to do here:

Step 1: Load the page you want to remove the header, footer and announcement bar from in Google Chrome

Step 2: Right click somewhere on the page and click “View Page Source”

Step 3: Hit Control + F or Command + F to bring up the search bar and search “title”

Step 4: You will likely have at least a few you are looking for, but the one you want will have a section that shows the page name and “id”, then a long string of letters and numbers beside it, like below:

Adding code to your Squarespace Website

Step 5: Copy those letters and numbers, and paste them into the below code where the xxxxxx is

Step 6: Copy and paste the code into the Custom CSS section in Squarespace

#collection-xxxxxx {#footerBlocksTop, #footerBlocksMiddle, #footerBlocksBottom .sqs-announcement-bar-custom-location, .Header, .Mobile {
  display: none !important;
  }
}

Now one thing to mention if you are using this code... Under the GDPR and quite a few privacy laws around the world, you should be including a link to your Privacy Policy that shows how you handle your visitors information on every page of your website.

Usually you will have this information in your footer, but by removing your footer, you take away the link, so it is a good idea to include a link at the bottom of the page to your privacy policy to make sure you are covering yourself.


Customizing the Heading size and colour on Summary Blocks

Want to make the title text on your Squarespace summary blocks stand out more than the standard body text that shows? This little bit of code can be copied and pasted in place to allow you to change the font size and title colour to showcase what the summary block is about | www.jessicahainesdesign.com

I love using summary blocks as a way to showcase my most recent blog posts, but the default title text shows as the body text and doesn’t really stand out enough for my liking.

One of the things I like to do is to change this title text so that it is a larger font size and colour so that it stands out and is super easy for people to see what the posts below relate to.

With the code below, you can change the font size to be a larger number if you want it even bigger, or a smaller number if this is too big. You will also need to add the 6 digit HEX code for the colour you want to use after the # to tell Squarespace what the colour should be.

Once you’ve adjusted the size and colour code, just copy and paste and you’re ready to go!

.summary-header-text   {
  font-size: 32px !important;
  color: #545454 !important;
}



There you have it! Five of my favourite customisations that can really help set your Squarespace website apart and make it look like you want!

I’d love to hear if you try and of these, so don’t forget to come back and share your website link below when you do so I can have a look!

 

Looking for help to launch a website you love?