How to Customise your Error Page in Squarespace.

 
how to Customise your Error Page in Squarespace 3.jpg

We all know that errors happen, page URLs change, and links get broken, and sometimes we're going to end up on a website's Error 404 page. 

At Handsome Ground, we're all about keeping your branding consistent across every touch point (of course!), and your Error 404 Page is no different.

An Error 404 Page provides simply another opportunity to brand your user's experience - and have a little fun too!  Instead of just relying on the boring default error message, use this opportunity to redirect your visitor back to your Home Page or to another page on your website, and reassure them that they are not in forgotten or lost territory.

In the end, building a consistent brand is all in the details, and engaging with your audience in this way will help reinforce just how details focused your user experience is.

So let's walk through how to build a branded Error 404 page in Squarespace so that your visitor's experience is consistent, professional, and little bit fun too!

Step 1: Create a new Error 404 Page. 

In order to make a stand alone page for your Error 404 page, you will need to create a new COVER PAGE in the UNLINKED section of your pages menu.  

From your websites Home Screen, click on 'PAGES' and scroll down to the 'NOT LINKED' page section. Click on the  ➕ sign at the top of this section to add a new page, and select 'COVER PAGE' in the 'CREATE NEW PAGE' menu.   

You can title the page anything you like, and change the URL slug to be anything too.  Ours is titled 'Error 404 Page'.  Click on the page name to go to the COVER PAGE, where Squarespace will provide you with a Cover Page already selected for you, as you can see below.

Step 2: Choose Layout Template.

There are currently 30 different Cover Page Layouts to choose from - all with various options for content and design.  If you would like to change the layout of your Cover Page, you can do this very easily by clicking on the 'CHANGE LAYOUT' tab below the current template in the Menu.  For this post, let's work with the layout you see below, but we're going to want to change it up a whole lot, to be consistent with our brand - Handsome Ground! 

Squarespace Cover Page Template Options

Step 3: Edit Branding & Text.

Click on 'BRANDING & TEXT' in the Cover Page Menu to add in your logo, and alter the Heading Text and Body Text here.  We're not going to shy away from what this page is, so we're going to have "Error 404" as our heading text.  Then we add can add a little explaination "I'm sorry but it looks like this page no longer exists".  You could say anything here eg. "OOPS, you've hit an Error Page - never fear!" - Have a bit of fun, and make light of the Error!

Squarespace Cover Page Branding Options.

Step 4: Upload Media / Image.

Next, change the image in keeping with your branding.  Click on 'MEDIA' in the Menu, and upload an image or a video for your background.  

Squarespace Cover Page Media Options.
How to upload an image into Squarespace Cover Page Media Options.

Step 5: Edit Button Links.

Next, click on 'BUTTON' in the Menu to edit the button link(s) on the page - send your visitor back to the home page so they can begin again, or to some other page you think will help them out.  There is the option to add a pop-up form to this page, which is really useful if you building a Landing page to capture leads, or a sales page for your next campaign, but for the purpose of your Custom Error 404 Page, just keep it simple and redirect your visitor to where suits best. 

How to Connect Button to content in a Squarespace Cover Page.

Step 6: Consistent Style.

Last of all, Click on the 'STYLE' section of the Menu and play around with the colours, fonts, boarder, padding, alignment etc for your page. We've added a green boarder, right aligned the text, changed the fonts for consistency, played with the social media icons, and changed the color of the button.  

How to Change the Style CSS in a Squarespace Cover Page.

Step 7: Social Media Icons

Any Social Media Icons that are linked to your website will be visible on the Cover Page.  You can change the look of these in the Style Menu.  

Step 8: Connect your Error Page in the Setting Menu.

Now you have finished designing and branding your Error 404 Cover Page, you will need to make it the default Error Page in the Squarespace Settings Menu.  That way, if a visitor happens to stumble on a broken link, your new branded Error Page will be the page they see!

Head back to home, then click on SETTINGS > ADVANCED > 404 ERROR / PAGE NOT FOUND. There will be a drop down menu for you to select which page you would like to set as your default Error 404 Page.  Select the page you have just created, save, and you're done!

Squarespace Settings Menu.
Squarespace Advanced Settings Menu.
Squarespace Error 404 / Page not found Menu options.
Squarespace 404 Error Page Not Found Menu

If you want to test out your Error Page so that you know that it works, simply go to your browser and type in a URL that you know doesn't exist eg. http://www.handsomeground.com/doesntexist and see your great branded Error 404 in work!  Oh yeah! Well done!

 Handsome Ground's finished Error 404 Page.

Handsome Ground's finished Error 404 Page.


About the Author

Helena is Handsome Ground Studio’s founder and website designer, hailing from Sydney, Australia and now living in beautiful Canberra. A visual strategist and designer at heart, Helena is passionate about engaging with healthcare professionals and small businesses, empowering them to accomplish big things online. When she’s not busy designing websites, Helena loves to spend time with her family, gardening and cooking, and always loves a good conversation. She’s also a talented creative herself, illustrator at www.helenaleslie.com and ceramic enthusiast!

 

 

 

 
Helena Leslie