By the end of this tutorial, you will have successfully created a custom 404 page that impresses your visitor and increases value for your business.
Let's dive right in.
Create a new custom 404 page in Squarespace
Here's the step-by-step guide to creating a custom 404 page in Squarespace.
Log in to your Squarespace dashboard and head to Pages.
Head to Pages
2. Create a new black page under NOT LINKED.
Create a new blank page
3. Name the page 404 Page.
Name the new page "404 Page"
4. Click Edit to start customizing the 404 page. Make sure the page you're editing is the newly created 404 page (it should be highlighted).
Edit the new 404 page
5. Add a new Page Section then add a new blank section.
Add a new page sectionAdd a blank section
6. Add the following content blocks, then edit and arrange them accordingly.
Start adding the blocks for the custom 404 page
Image - Add a profile photo to personalize the (horrid) experience!
Text - Let the visitors know what's wrong and that they should contact you so you can get back to them.
Summaryblock - Feature your most popular blog posts. This is done via featured blog posts. Alternatively you can add a section to advertise your products or service.
The block elements of custom 404 page
With the newly released Fluid Engine, Squarespace has made it easier to design these pages. Just drag the text and image blocks into their respective order and they should align automatically.
7. That's it. You've created a new custom 404 page. Click Done from the top corner to save changes.
8. The last step is to set the new page as the default 404 page. From your Squarespace dashboard, head to Design ➝ 404 page, then select the new 404 page from the drop down menu.
Head to DesignSelect 404 PageSelect 404 page from the drop down
Save the changes and that's it. You've successfully created and set up a new custom 404 page!
Helpful tips and what makes a good 404 page
These are some helpful things you can include in your 404 page to improve the page experience.
Make the title apparent and let the users know the page they're looking for doesn't exist or has been removed.
Offer a way for them to reach out to you by including your email or contact number.
Help users navigate the site by including relevant links.
Provide value to the users by offering free resources such as templates, guides, or blog posts.
Personalize the page with photos and humor (optional).
Need some inspiration? Read below to learn how top Squarespace designers design their 404 pages.
5 Creative custom 404 page design examples from other Squarespace sites
Take your custom 404 page one step further by taking inspiration from other Squarespace sites.
kate Scott creates smart website templates that help entrepreneurs grow their online businesses. Sometimes keeping it simple is all you need, and that's what Kate did for her 404 page.
What makes this custom 404 page works
A giant header that attracts the user's attention.
Offer a search alternative to help visitors navigate the site.
List an archive of all blog articles to help visitors find the article they're looking for.
Kerstin is a solopreneur who runs a successful blogging and web design business. She obviously owns a cat and doesn't mind low-key blaming her for the 'bad experience'.
What makes this custom 404 page interesting
Quirky personal photos and humor make an otherwise boring page interesting.
It offers a search function to help users find the relevant page.
Include quick links to help visitors navigate the site.
Conclusion
404 pages are often uninspiring, but yours doesn't have to be that way.
You can add value to your visitors and your business by creating a custom 404 page that incorporates useful links, content, and resources.
Your visitors get something out of the bad experience, and you might end up with a potential client. It's a win-win situation.
David is the founder of MakingThatWebsite.com and started making websites for businesses back in 2014. He's a keen learner and wants to share his journey and knowledge with other business owners and freelancers. He launched MakingThatWebsite.com in 2021 to make website building more approachable and scalable for businesses.