How to Create a Custom 404 Page in Squarespace 7.1
Introduction
I recently made the switch from WordPress to Squarespace, and within a few months, I accomplished more than in a few years of using WordPress. Recently, I began working on the system pages, like creating a custom 404 redirect page.
Today, I’m sharing a design tutorial for Squarespace beginners on how to make a custom 404 page in the current version 7.1.
I promise, the process is easy and makes such a big difference in the look and feel of your website.
What is a 404 Page?
Have you ever searched for an article on a website, only to be met with a screen displaying a 404 error?
A 404 error is a message displayed when a specific web page cannot be found on a server. This happens for a variety of reasons, usually when a page was moved or deleted, the URL was incorrectly typed, or the link itself was outdated or incorrect.
It’s an important part of basic site navigation that every site needs.
Why You Need a Custom 404 Page in Squarespace
For Squarespace, it’s essential to create a custom 404 page. If you don’t, the default 404 page looks like the image below.
Notice anything?
It’s bland, boring, and doesn’t offer visitors a positive user experience when navigating your website. Users who encounter screens like this are far more likely to leave, leading to increased bounce rates, one of the factors Google uses when indexing sites.
So what elements do you need to include on your custom 404 page?
Design Tips for Creating a Great 404 Page
A message in your brand’s voice.
Visitors may be confused when encountering a 404 redirect page. It’s crucial to create a clear message in your brand’s voice, acknowledging the situation, and offering solutions, such as the elements featured below.
A search bar or navigation options.
A search bar is a simple solution to use. A search bar prompts your visitors to continue looking for whatever information or content they need. You may also consider adding a button that links back to the home page.
Recent content.
I used the summary block feature to include recent blog posts on my custom 404 page. I incorporated this, hoping visitors might click on other articles they find interesting.
Call-to-action (CTA) or other helpful links.
This includes things like your newsletter sign-up, products or services, or even a contact page.
Step-by-Step Tutorial for Custom 404 Page in Squarespace 7.1
Squarespace makes it incredibly easy to create a custom 404 page based on your specific needs.
Log in to Squarespace and click on your Account Dashboard. From the Account Dashboard, click the “website” option button to access your site, which opens the navigation panel on the left.
Click on Website and select Pages.
After clicking the “Pages” option, you will have two options: Main Navigation and Not Linked. Click the plus icon next to Not Linked and select Blank Page.
This will create a new page. Rename as 404 Page or use a custom name of your choosing.
Now it’s time to create your layout!
Click the black edit button to open the page editor.
Squarespace will prompt you with the add section button.
From here, you can either start with a blank section or use one of Squarespace’s pre-built sections.
Personally, I like starting with blank sections!
You may need to change the background color of your custom 404 page. If so, click the floating design panel on the right side of the screen and choose the Colors option. This should display your universal color options if you have created a custom color palette.
After finalizing the colors of your page, it’s time to create the actual layout of your customized 404 page.
Using the block editor, finalize your page design.
For my 404 page, I used two text boxes (for title and subtitle), a search bar, a summary block featuring recent blog posts, and a button (customized) that returns to the homepage.
But, there’s still one more VERY IMPORTANT step to follow.
Once you've finalized customizing your 404 page design, there’s one more step, and it’s VERY important.
Return to the navigation panel to your left. Toward the bottom, click on System Pages, then select 404 Page menu.
The 404 Page is always set to System Default. Open up the drop-down menu and select the 404 Page you just created.
That’s it! You just created a customized 404 page for Squarespace.
I recommend testing to see if the feature works! Using my web browser, I like to open my website with a page extension I know doesn’t exist. This should trigger your brand-new customized 404 page.
Follow for More
Colors of Dye is a creative hub for women who love to craft cool stuff, write stories, and create - no matter the medium. Get inspired with tips, writing and blogging resources, and real-life stories from a lifelong creative.
If this sounds like you, please stick around and join our newsletter. It’s a great way to stay connected, get some cool freebies, and learn some new skills.
To keep learning about Squarespace, check out my Pinterest board on Squarespace tips.
I’d love to see what you create!
