My Step-By-Step Guide on How to DIY Your Website in Squarespace

 
 
The Busy Bee My Step-By-Step Guide on How to DIY Your Website in Squarespace
 

Creating your dream site is one of the best parts of upgrading your business! You have complete control over how potential and returning customers perceive you and that's an awesome position to be in. I get it though, sometimes funds or timeline don’t necessarily line up with hiring a designer to make it happen for you (or heck, maybe you love designing, in which case, we should be besties).
 

But, Megan, Where Do I Find Inspiration To Do My Own Site?
 

My favorite place to get inspiration is Pinterest. I’ve actually put together a board of Squarespace designs that I love right here. Otherwise, I head over to Square Design Guild and check out their website showcase, where all of the websites are built in Squarespace! One cool feature about this is that you can filter by template (See “Step One” below), so you can see all of the different features that can be done in the template that you chose.

Ready to DIY your website? Rock on, girlfriend. Here is a quick and dirty 3-step process on how to get started.


Step ONE

Choose a template

Squarespace gives you a ton of templates to choose from, but before you get all click happy, make sure you keep this in mind: choose your template based on functionality, not design. You may be all, “But Megan, you’re a designer—surely you must know design is important!” and I hear you loud and clear. Here's the thing: all of the template styles are customizable, but each template has a different amount of customization available in it. In other words, don’t choose a template because you like that it uses neon yellow and big bold typography—that can be changed in ANY of the templates. Instead, choose a template that has the functionality that you’re looking for with your site. Here are some of those key functionalities to keep in mind:  

 
  • Blog sidebar + layout
  • Customizable mobile styling

  • Parallax + infinite scrolling

  • Multiple navigation areas

  • Site language

  • Index pages

  • Intro areas + banners

  • Custom share buttons

  • Pre-footer

  • And more!

 

My absolute favorite template to work with is Brine (or really any template within the Brine family) because it has the MOST functionalities to choose from. Still stuck on which template to choose? Squarespace put together a nifty chart explaining the features and functionality of each template right here!
 

Looking for pre-designed templates? I've got you, boo. Check out my favorites below!
 

 
The Busy Bee My Step-By-Step Guide on How to DIY Your Website in Squarespace 23&9 Creative Squarespace Templates

23 & 9 Creative

With Chelsea's pre-made sites, you receive mobile-optimized design, 20% off of hosting for your first year on Squarespace, step-by-step videos PLUS all  graphics needed with video tutorials on how to edit them without Photoshop! (Starting price: $125)

The Busy Bee My Step-By-Step Guide on How to DIY Your Website in Squarespace Station Seven Squarespace Templates

Station Seven

With Station Seven's templates, you’ll receive step-by-step video tutorials, editable Photoshop graphics, responsive design, a no-coding-necessary template AND a bonus launch plan to help you show your new site to the world. (Starting price: $79)

The Busy Bee My Step-By-Step Guide on How to DIY Your Website in Squarespace My Billie Designs Squarespace Templates

My BILLIE DESIGNS

Not only are Melanie’s Squarespace Design Kits unique, all of her sites come with graphic templates, content guides and step-by-step instructions. You can even choose to have her set everything up! (Starting price: $397)

The Busy Bee My Step-By-Step Guide on How to DIY Your Website in Squarespace Go Live HQ Squarespace Templates

GO LIVE HQ

These templates are easy to customize and don’t require coding. You get step-by-step videos, a sitemap to outline your content, a guide on how to find and prep your images and editable Photoshop files for all of the graphics. (Starting price: $299)

 

Step two

Add in your branding

Logo + Favicon: First things first: add in your logo and several variations of it. The most common area to put your logo is on the top left or top middle of your site’s navigation. To add your logo + favicon (that little icon that shows up on the tab in your browser), head to: Design > Logo & Title. Here, type in your business’ name, tagline (if you have one) and upload your logo, favicon and social sharing logo. For your logo, make sure that it’s a transparent PNG file (there’s no white background) and for your favicon, try to keep the image smaller in size, a transparent PNG file and square in shape. Your social sharing logo is the image that Squarespace will use when you share your pages on social networks. (This excludes blog posts, which use the thumbnail image you upload per post).
 

Typography: If you worked with a branding designer, you probably have a style sheet or guide that lays out the typography to use on your site. If you didn’t work with a branding designer or DIY’d your branding, here are a few great typography suggestions:


In Squarespace (and general web design), you want to break your typography styling into 4 categories: Header 1, Header 2, Header 3 and Body Copy. This creates a hierarchy, or tells your readers what is most important, breaks up text and helps the page flow. Here’s what my hierarchy looks like:

 

Heading One

Heading Two

Heading Three

Body Copy

When you know what your heading and body copy styling is going to be, head over to Design > Style Editor and go ahead and plug those in. You should have the following customizations for each: Font Name, Font Weight (the boldness of it), Style (normal, italic, etc.), Size, Letter Spacing, Text Transform (uppercase, lowercase) and Line Height.
 

Colors: Grab all of your branding HEX codes (the 6 digit letter + number combination with a hashtag in front of it) and plug them into your site. There are a BUNCH of different places to add color, but here are a few that you might see in the Style Editor: Header color, Text color, Icons, Buttons and Footer color.

Don’t have a color palette? I’ve put together 5 free color palettes for you to use, as well as directions on how to create one for your business.


Step three

Add in your Content

Copy: The easiest way to figure out your copy is to map out each page of your site and then slowly start writing! Make sure you’re selling how you can help make the life of your customer or client easier. For example, a social media manager makes client’s lives easier by giving them time back in the day that they were originally spending on sourcing images, writing captions and engaging with followers. You don’t need to “sell sell sell” on every page—being personal and unique is what will set you apart, babe! Not sure where to start on your website copy? I put together a nifty Website Copy Checklist that goes through standard pages of common websites, and you can nab that right here.


Imagery: Images + photography are what take a website from good to great, so don’t skimp on this step! If you can afford it, hire a photographer to take photos of you, your workspace and, if applicable, your products. If you can’t afford a photographer, there are plenty of free and paid sites that you can get great imagery from.
Here are some of my faves:

Once you have your images selected, make sure that you format them correctly. Try to stick to images that are no larger than 2,000px by width or height. Smaller-sized images will load faster, giving your visitors a better experience on your site.
 

Products: If you sell products (both physical or digital), go ahead and add those babies in. To do so, you’ll need to add a “Products” page. From there, just click the little plus sign in the right corner and add all of your product information into the modal that pops up. It will look a little something like this (Note: this particular popup is for a physical product):

 
The Busy Bee My Step-By-Step Guide on How to DIY Your Website in Squarespace Products
 

Pay attention to the different tabs on the top (Item, Pricing & Variants, Additional Info, etc.) and make sure to fill out as much of it as you can. Bonus tip: The first image you upload will automatically be used as your product thumbnail image. If you want to select a different image, head on over to the “Options” tab on the popup, delete the thumbnail image and upload the one you’d like to use.


But megan, what do I do If I have questions?

Oh my gosh, this is so normal. If you’re in the middle of DIYing your site and something goes wrong, you may not know how to fix it. These are my favorite resources to use to get quick answers from fellow designers. They are always soooooo open to helping:

  • 23 & 9 Creative Tutorials: With over 6 years of Squarespace experience, 100+ websites designed and becoming a Squarespace Authorized trainer, Chelsea put together all of her favorite (code free!) Squarespace tricks together in her easy-to-follow video tutorial series called “Don’t be a Square.” Plus, if you have a question you can submit it right on the site and she will add it to the library!
  • My Billie Designs Free Code to Customize your Site: If you’re feeling like a Squarespace ninja (that’s totally a thing), head over to Melanie’s blog and check out all of her custom code posts to help take your Squarespace from good to great.

Here’s the thing: I truly believe that anyone can build a site on Squarespace, but this question is answered by reflecting on the following:

  1. Do I have the time to build it myself?
  2. Will I get the functionality and aesthetic that I’m looking for if I build it myself?

If your answer is “no” to either of those questions, it’s probably best to hire someone. (PSST: You can book a free consultation with me right here).


 

BONUS resource:

DIY YOUR WEBSITE WORKBOOK

Download my ultimate guide on how to DIY your website on Squarespace and get all of my tips and tricks found on this post (and MUCH more) in a nifty and printable workbook!