14 design secrets to build a Squarespace website fast
Updated: September, 2018
So you need a website like yesterday, eh?
Squarespace is a fantastic choice because the learning curve isn't nearly as steep as with other website building platforms.
As a website designer who spends half of her life in the Squarespace editor, I’ve stocked up a list of tricks & best practices that enables me to breeze through websites in a flash.
Let me break this list of 14 secrets up for you before we get started:
- Tips 1-5 are all stuff you can do before you start designing, which will guaranteed make the actual design go much faster
- Tips 6 - 11 are things you can do during the design to pick up the pace of creating your site
- Tips 12 - 14 are some options where you can throw money at your problem and get launched at light-speed
On to my fast-design tips & secrets!
I do a lot of prep work before building my sites or my clients websites which really speed up the design process. I can't stress this enough.
While it might seem counterintuitive to spend time before actually building the website to say gather your content, or optimize photos or decide on your colors and font styles, I promise you that this will make a huge difference to the amount of time that it will take you to build your site.
Even though you’ll be taking time doing this pre-work, overall your site design time will be cut down significantly because of it.
And what we're after is building a website quickly, right?
Pick your template wisely
You can save yourself a lot of time fiddling around in the style editor changing colors, font styles, banner overlay colors, etc., if you pick a template right from the start that is close to your style.
Let me explain this a little more in-depth because it's hella-important and while template preset styles are important for designing a site quickly, choosing the wrong template just cause you like the look is a big no-no.
To understand this, you need to know just how templates work vs. the Style Editor.
Think of a template as the frame of your house and the Style Editor as the interior decor.
No amount of paint is going to add a second floor to your bungalow house, just the same as no amount of tweaking your Style Editor is going to give you a sidebar if you didn't select a template with the sidebar in the first place.
The absolute most important part of picking a template is picking one with the ‘house frame items’ that are important to you. Then we pick a template based on style second.
Squarespace has something called template families. A template family is a bunch of templates that all share the same structure and functionality but they're all styled differently to appeal to different tastes.
These templates all have the same functionality because they're in the same template family, but they let you start closer style-wise to what your vision is.
Pick the template that you like structure wise (my Squarespace template comparison chart will come in really handy for this). Then on the template comparison chart, check if it's part of a template family.
If it is part of a template family, then check through all of the templates in the family on this page.
If there's one which has a lot of the styles, that is font types, colors, button styles, banner overlays, etc., that you really like, choose that one to start with because then you'll have to do less work in the Style Editor later.
You absolutely should still make tweaks in the style editor so that your website doesn't look generic and just like the example however.
When you choose a template that's close to what you want to begin with, it'll save a lot of time during your website design process.
2. Set styles right from the beginning
Instead of setting all the styles as you go, set them at the very beginning.
Here's a video that I created showing you how to make a mood board on Squarespace, in which I set the styles before designing the site.
If you set the styles from the beginning you can make sure that all the styles work together and that you have a variety of say headings and buttons sizes and that everything looks cohesive together.
When you try to set the styles as you're designing, things might not mesh as well and you tend to spend a lot of time changing all the different styles multiple times.
If you can see them all together it's a lot easier to set the styles faster and leave them so you don’t need to constantly go back and tweak them.
3. Write out your color codes & fonts
I also like to keep all of my fonts and color codes in a note on my computer. I use the Mac Notes app for this.
When I keep all the color codes and fonts in a note, they’re all easily accessible and I don't need to go searching through the Style Editor for them over and over again. I can just head to my notes app, look for the exact shade color blue of my brand, copy the code and paste it into Squarespace.
Same thing if I'm ever creating anything for my website on Adobe Illustrator I can just look at my Mac Notes app for the types of fonts instead of having to open my Squarespace website and style editor every time.
4. Write your copy out first
You might be getting the idea that it's important to prepare for your website design before starting on the site design itself, right? This tip is no different.
Another thing I love to do to make my website design process super quick is to prep all of my copy before I start my website.
I do this for both my own websites and websites I create for clients.
I keep all of the text for my website including headings, body text, button text and calls to action in a Google Doc and then I just copy and paste the text from the Google Doc into my Squarespace site.
When you paste text into Squarespace sometimes it takes on the styles of the place that you copied it from, say the font type or the size. To stop this from happening I would paste the text into my Notes app and then copy it again and paste it into Squarespace.
This was a bit of an unnecessary step, but it helped in getting rid of all the styles from when I moved the text over.
I recently found a faster way to do it though.
Hit the shift button, option button, command button and V button all at the same time and that will paste your text in without any style formatting brought over from wherever you had it written before.
5. Optimize & rename your images for SEO before uploading
Often times when designing, you’ll test our images in multiple different places on your site or sometimes use the same image two or three times. If you size optimize it and rename it every time, you’re just making more work for yourself.
Instead, rename and optimize all of your images before you go to use them on your website.
Here’s how to do that.
I put all of my images into one folder on my desktop when I'm creating that website.
The next thing to do is to name all of your images. You want to name your images so that Google can tell what is in the image, as Google can't “see” your image.
The name of the image is then used to help tell Google what your page or post is about, which helps with SEO.
Optimizing the size of the images is also extremely important for the speed at which your website will load.
This is the number one thing that I see people forgetting to do in their Squarespace websites and then they wonder why their website is so slow.
Hint: This is likely your problem.
On a Mac to optimize the size of an image:
- Double click your image to open it in Preview
- Next click ‘Tools’ and then ‘Adjust Size’
- Change the width of the image until the image size is below 500 KB
Generally I size my images between thousand to 1500 pixels wide, or for banner images I try to do 2000 pixels wide.
If you can't get your image to be 500 KGB or less by changing the width of the image then use JPEGmini which will decrease the file size without decreasing the quality of the image.
Also know that PNG’s tend to be a larger file size than JPEG images, even if the image looks the exact same.
So again if you're having troubles to get your image to under 500 KB, export your image from a PNG into a JPEG and that might be able to get you under 500 KB.
The general rule to follow, do whatever it takes to get your images to 500 KB or less.
This will help with the speed at which your page loads, and by extension, your SEO, as Google gives preference to quickly loading websites.
6. Gallery blocks over image blocks wherever possible
Whenever you need to add multiple images to a blog post or page use a gallery block instead of individual image blocks.
The gallery block allows you to upload many images at once. With image blocks you need to add each image and wait for it to load individually before adding the next one, and then maybe also drag them into a grid or another layout.
Also its not unusual when designing to put 6 images on a page and then change your mind and decide to put the images somewhere else.
If you go the image block route, you have to delete 6 image blocks and then add in all six images blocks individually again on your new page.
Using a gallery block, the images upload all together and you can just delete one block making the whole process a lot quicker.
7. Use the duplicate feature for similar layouts
Squarespace recently started allowing the duplicate feature for album page tracks, blog posts, cover pages, events, gallery page images and videos, products and regular pages.
You should absolutely make use of this feature! It is a massive time saver!
If you are making two pages or blog posts with roughly the same layout, duplicate it and then from there your structure will already be set and you won't have to recreate that again and again.
You can get really creative with this too.
Say you want to have all of your blog posts laid out the exact same way, with say an author bio at the bottom, or a faux sidebar, create this once and every time you go to write a new post, duplicate it, so you don’t have to recreate that every time.
How to duplicate a page:
- Hover over the name of the page in your left side settings area, the gear icon will appear beside the page name
- Click the gear icon
- Scroll down, click 'duplicate page'
How to duplicate a blog post:
- Open the editor for the specific blog post you'd like to duplicate
- At the bottom of the editor, you'll see the 'duplicate' option. Click that!
8. Use spacer blocks to create page grids and layouts
Whenever you want to arrange blocks on your Squarespace page side by side, start by creating a grid with spacer blocks at the top of the page.
To do this insert to 3 or 4 spacer blocks. (You want to insert the number of spacer blocks for how many columns you want in that page.)
Then use the small insert points below your spacer blocks to insert your preferred block for that space.
If you use spacer blocks to create a grid it's a lot easier to manage than when you try to drop different types of blocks side-by-side. This method just keeps things a bit tidier and easier to manage.
Once you’re done placing your blocks into the grid, delete out the spacers, and everything will still keep its place!
To be honest, I think the spacer block is absolutely the most useful and underrated in Squarespace. More info on why that is in the post.
9. Move ON already!
Remember that as a general rule of design, less is more.
Don't spend forever on fancy functions or trying to make some special workaround happen that just isn't happening.
(*Ahem* “Gretchen, stop trying to make fetch happen, it’s not going to happen!”)
If you can't make something work, leave it and move on! It probably isn't that important anyways.
There have been hours that I've spent creating a new workaround to something that in the end I ended up deleting the page or finding a better way to present the content later.
10. Your website is never ‘finished’
Your website is a ‘living’ thing, it's never going to be fully complete, it should and will always be evolving.
Don't stress too much about having everything prepared before you launch your site.
The most important thing to do to get your site design going at a record pace is just to get out of analysis paralysis and make a darn decision!
You can launch with a one-page website or with just a cover page, and that’s perfectly fine, you’ve got momentum, and that’s what’s important.
You can also launch your site when most of it is done, and put up a few ‘coming soon’ pages for your yet-to-be-finished parts.
If you’re designing a page, but it’s not quite ready to go live yet, you can just disable the page so it’s not findable, and then when it’s ready, enable it later.
Your website will never be perfect at some point you've got to do as the entrepreneur queen Marie Forleo says and make ‘progress over perfection.’
Get your site live and then make tweaks as you have time later.
I can’t tell you the number of times I’ve heard people say they can’t start their business yet because their site isn’t done yet, and they’ve been working on their website for months or years!
It's painful just to hear about it, and trust me, it really doesn't need to be that hard.
11. Know where to go for answers - fast!
Often times I see people posting in Facebook groups asking questions. While this can indeed get you your answer, often it’s a very slow way to go about doing things.
Squarespace has so many resources that can help you when you have questions or get stuck or you're confused as to how to make your vision appear on the screen.
A lot of these Squarespace created resources will get you your answer much quicker than posting in a Facebook group.
First, head to the Squarespace support page and you'll find they have guides for every template, guides on the basic use of blocks, guides on integrating third-party software and programs such as your newsletter or an appointment scheduler or a donation button or restaurant reservations.
Second is the Squarespace live chat and email support, between the two you can get your questions answered, 24 hours a day.
The Squarespace staff in the NYC, Portland, and Dublin offices can log into the back of your website and see the issue you’re describing.
When you ask in a Facebook group other Facebook members can't see the same information, making answering your question a lot more difficult.
This is why using Squarespace Live Chat is the absolute best way to get your questions answered right away and make sure that the answer enables you to do what you want to.
The staff on the Squarespace live chat will stay on the chat with you while you make the edits so that if something goes wrong you can let them know and they can walk you through a solution step by step.
Paid Design Options
12. Work with a designer live
Sixty (yep, that's an affiliate link!) leaped onto the scene a couple years ago offering what everyone wanted, but no one had yet created.
Squarespace web designers on demand.
If you get yourself stuck in a pickle with something you know will take your hours, but would take an expert 15 mins, Sixty is the way to go.
13. Go the pre-designed template route
Another way to design your Squarespace website super, super quickly is to buy a pre-design template.
Squarespace pre-designed templates have been growing in popularity for the past couple years.
If you're looking to get professional site design, one that truly does not look DIY’ed but that looks like a pro made it (because the pro did make it) and you're also looking to launch ASAP, a pre-designed template is a really good way to go.
You won't learn as much as you would be by building out the full website yourself, but you will launch quickly, and if that's important to you, it's a good way to go.
Here's a few design studios that have created these pre-designed templates which you can shop and get live with in no time.
14. Take a step-by-step course, like Square Secrets!
To be honest, back in the day I Googled everything when I needed to learn something to build my business! It wasn't the most efficient route finding info and then trying to piece together all the tips, tutorials and recommendations from many different sources was a time suck.
Now however when I'm taking on a new task in my business, getting into Pinterest marketing, learning about affiliate income, etc., my first stop is to find the expert on that topic and then buy their course.
This way, I eliminate all research, just follow the lessons one by one and by the end of the course, I've completed what I set out to do.
If that's also the way you prefer to get things done, a Squarespace course is without a doubt the way to go.
Details on the hands-down best Squarespace course available is right here.
Keep one thing in mind when you're creating your website.
The hardest part is getting started.
I've heard of people spending months or even years, yes years, just deciding which platform, which template, and how to get started.
I’m here to give an ever-so-kind kick in the buns and tell you, there is no right way, just start already!
A sign of a successful entrepreneur is someone who starts before they're ready.
So get going already!
I hope these tips helped you, I'm so excited to see your fab new website! Come drop me a link in the comments when it goes live won’t you?
YOU'LL ALSO LOVE...
- Which Squarespace templates have a sidebar, index, parallax, second navigation + more!
- How to build a Squarespace site at every budget
- The 2-week website: how it works & why you’ll love it
- My 3 fav CSS tweaks I use on all the Squarespace sites I build
- Masterclass 1: How to create your site building game plan