5 Tips & tricks to design your Squarespace website like a pro.

Squarespace is a platform that is gorgeous and functional "right out of the box", but it takes a little tweaking to get a website that doesn't look just like the template.

Fortunately, with a little effort you'll have your Squarespace website looking more original in no time.

* A little disclaimer from Squarespace: CSS should only be used to change fonts, colors, and backgrounds. Other CSS changes could potentially harm your site. If you decide to apply custom CSS to your site, it should be used sparingly. Custom code, including CSS, falls outside the scope of their support so you can't contact them for help with any coding issues. Read their FAQs about code here.

 
 5 tips and tricks to design your Squarespace website like a pro! | Bravebird Blog
 

1. Add more headings.

For some reason that I can’t quite understand, Squarespace only comes equipped with three different HTML headings. This means you only have three choices for styling the text on your website. As you begin to build your website, you’ll quickly notice that there are times when you need a smaller, bolder, or different color font in various places on your page. 

There’s an easy fix. It may sound complicated because it involves a little CSS and using the Markdown block, but it’s actually quite straightforward.

You can do it…I have faith in you!

Here goes.

First, copy the CSS code below:

h4 {
font-family: proxima-nova;
font-weight: 300;
color: #303030;
font-size: 20px;
text-align: center;
line-height: 1em;
}
 

Next, from the Squarespace home menu, click DESIGN > Custom CSS and paste the CSS code above in the box.

 squarespace-website-how-to-open-css-box
 squarespace-website-where-to-insert-css

Replace the values with whatever you’re after. For example, if you want the font to be blue instead of dark gray, replace the hex code (#303030) with your new lovey blue hex code. Click Save.

You’re halfway there.

Choose where you want your want your pretty new text and insert a Markdown block (it’s right at the top next to the Text block). In the markdown window that pops up, copy and paste this: <h4>Your text here</h4> 

Last step, replace “Your text here” with whatever text you want to show up in your new style. Click Apply and save your page.

Voila! That wasn’t so bad was it?! 

You can add h5, h6, h7…as many as you want. (Design tip: don’t go nuts with too many different fonts on one website or it will lack cohesion and sophistication.)

Squarespace makes it really easy to tweak the design of your website, not only in the Style Editor, but with CSS codes like this one. I’ll be posting about my favorite CSS tweaks soon so stay tuned!

 

2. Upload a custom favicon.

A favicon is the tiny square image that displays next to a page's title in browser tabs.

A major web design pet peeve of mine is discovering a gorgeous website with no favicon or the generic favicon associated with a web host.

This is such a wasted opportunity to inject a little more personality and branding into your website! So make sure to include one in your website to give it a more professional appearance.

Here’s how to create a custom favicon in Squarespace:

First you’ll need a square image containing your submark or logo variation. I recommend the image not be larger than 200 x 200 pixels, and it's ideal to use a PNG file for a transparent background.

Next, from the Squarespace home menu, click DESIGN > Logo & Title. Scroll down to where it says BROWSER ICON (FAVICON) and click “Add a favicon.”

 squarespace-website-where-to-upload-a-favicon
 

Locate your file and click Open. Hit SAVE in the top left corner and refresh the page to see your new favicon at the top of your browser window.

Much better right?

 

3. Customize your footer.

The footer of your website or blog is prime real estate and many people don’t use it to its full potential. 

It’s the last thing visitors will see after scrolling down a page and it’s a chance to grab their attention one last time.

Here are some of the best ways to make the most of your footer:

  • Add your contact info. Even if you have it elsewhere on your website, the footer will show up on every page and make it very easy for people to reach out to you. And isn’t that the whole point of having a website?
  • Provide links to your social media to encourage people to easily engage and follow you.
  • Add a feed from one of your social media networks. I recommend Instagram or Pinterest as those tend to be the most visually appealing. 
  • Include a newsletter sign-up section. Again, make it easy for your visitors to do what you most want them to do.
  • Add a list of your most popular blog posts to encourage visitors to hang out longer on your website.
  • Add copyright information and your privacy policy and terms of use. It’s always a good idea to CYA (cover your ass) legally and when you provide this information your visitors will know up front what the rules of your website are.

 

4. Customize your contact form.

Your contact form is a really practical and necessary part of your website, but it’s also a place where you can inject a ton of style!

Start by editing the field titles and descriptions for your contact form. Make them match the tone of the rest of your website and vary them from the standard options.

You can also change the colors and styles of the form fields and the submit button. Now that you now a little CSS, try your hand at using it here too.

Some of these little details really make your website come alive and look more custom and less generic or like a template.

 

5. Change the color and thickness of the line block.

The line block in Squarespace is a thin, horizontal line that is a very useful element for organizing content on your website. 

But in an effort to create cohesive branding, you’ll probably want to change the default light gray line to something that matches your brand colors.

Now that you’ve learned how to add CSS code to your website, this should be really easy!

Here’s the code to copy: 

.sqs-block-horizontalrule hr {
background-color: #ee4988;
height: 3px;
margin: 10px 0 0px 0;
}
 

Just like in #1 above for adding heading styles, go to the Squarespace home menu, click DESIGN > Custom CSS and paste the CSS code above in the box.

This one doesn’t need any markdown so that’s it! Just change the values for color and height and watch your line change right before your eyes.

 

This is just the tip of the iceberg when it comes to customizing your Squarespace website. Have fun with it and let your personality shine through!

If you’re not a DIY person and you’re interested in a fully custom Squarespace website, check out my web design services here.

 

Have you tried any of these tricks to customize your website? Let me know how it went.

 
Judea

 
Join the Bravebird tribe and get access to the resource library. In it, you'll find stock photos, planners, custom Pin It buttons and more...all FREE.