Tips on building a beautiful squarespace website
Building your own Squarespace website?
Here are our top 10 tips on building your own DIY website.
Keep the headings simple
Before you start designing, jot down a map of how you want your website to look and the key messages you are trying to get across.
If you are starting a new hair salon for instance, you’ll want a title “We know hair” or “You deserve great hair” followed then by a short to the point paragraph that explains you in a tea cup. ‘Award wining hair stylists located in XXX, we offer an extensive range of hair treatments from our beautiful salon in. Click here to book online” etc.
2. Use spacer blocks to create space
Spacer blocks are your friend. They allow you to create columns, room between your material and paragraphs and allows things to keep in place. Squarespace have a little video here on how to insert them. Keep in mind when using spacer blocks your material is read left to right on a mobile so ensure you view your mobile version of your site to ensure you’ve displayed your information how you intend on it being read.
3. Write your copy first
Sit in front of a blank Word document, grab your drink of choice - maybe a nice cup of freshly brewed tea or in my case a 4pm gin, and just simply get started. Start by writing a list of the pages you want to cover in your website. Next write the headings that you want to appear on these pages and only then can you can create the paragraphs under these headings.
It’s important to remember the reader doesn’t know your business like you, so don’t use words to impress but map out your information and clear and cleanly as possible. Its also a good idea to show the information to a friend that doesn’t know your business like you and see if it makes sense to them. They might want to know more about something which will give you an idea to write about another aspect you didn’t think of.
4. Design the homepage last
The home or landing page of your website should be not only the best looking page on your site but also act like a mini index. It should cover snippets of information that then have a button asking the reader if they want to know more. By designing the homepage last you know where you want to send your reader to. I always stop by mapping out my sections for the home page but I actually don't fill in the content until the inner pages are done.
5. Duplicate to make your life easier
For information based websites such as listing services or telling a customer about your business it is much easier to design a page and then once you're happy with the design, simply duplicate and change the detail. This not only makes your website look consistent in design but it saves you a heck amount of time. Be sure to change the page title, navigation and url slug to suit the information you are displaying on that page.
6. Upload PNG files to create layers
Our sites are a mix of clever css on a basic squarespace template and creatvie graphics that we create in photoshop.
This doesn’t mean you need to be designer. Canva is our top tip for creating PNG files (which is a fancy word for having no background.)
Watch their tutorial video here.
7. Design a cool 404 error squarespace page
A 404 error page is the page someone comes to if a link is broken in your site.
It might be an old post or a page link that you changed. Either way, it’s important not to loose the reader and drag them to the main homepage of your site. Here’s ours below. We simply created a ‘cover page’ (note a feature in 7.0 only) and redirected our 404 to this cover page with the url slug /woops
8. If you love to blog use a sidebar
If you are a blogger and want to either sell something back to your customers, ensure your readers can contact you for more information, or just put up a picture of your dog! a sidebar is a good way of doing this. You can see I’ve used on on the page you are reading now. This nifty plugin is from the genius that is SQSP themes. You’ll need to know a little bit about adding css and files into your website but then you are good to go. Give us a shout if you want some help with install after you purchase it here.
9. If you know your HEX codes you’ll want this chrome plugin
If you’re a bit OCD when it comes to colour like us, you’ll love this chrome plugin ColorZila.
Picking up any hex colour on any website… #lifesaver
10. It’s okay you don’t know everything
You might make bathsalts, sew clothes, fix boats, know what vase colour looks good with pink peonies that doesn’t mean you need to know how to make your website look good. I don’t know any of these things but I do know squarespace.
Give us a shout if we can jump in there and fix something for you. We charge hourly for small fix ups that are bothering you.
Drop us a line and get back to doing what you do best.