A well-designed 404 page helps protect your brand identity, even when visitors land on a broken link. In this article, we’ll show you how to design a custom 404 page and set it as the primary Doc for your project.
💡 Save your 404 page as a block or Doc template to reuse it across projects.
Why create a custom 404 page?
If you don't set up a 404 page as your primary Doc, viewers will be redirected to the most recently published Foleon Doc in the project, which is not always ideal. Or, if you don't have any Docs published yet in your project, viewers will be taken to a default Foleon 404 page.
To maintain a consistent brand experience, you can create a custom 404 page as a one-pager Foleon Doc and set it as your project's primary Doc. That way, users who hit a broken link still land on a branded, helpful page.
Create the Foleon Doc
🎥 Watch our video lesson on how to set up a branded 404 page.
👀 We recently updated our dashboard! You might notice that the dashboard in the video below doesn't match what you see on the platform. The video still walks you through the relevant steps for personalizing your Doc. Refer to the text below for the updated screenshots.
Step 1: Create a Doc from scratch
Create a new Foleon Doc. We recommend starting from a blank Doc for your 404 page.
💡 Not sure how to create a Foleon Doc from scratch? Check out our article Creating a Foleon Doc
Step 2: Adjust the Doc settings
Go to the Foleon Doc settings and scroll down to navigation. To have a clean one-pager without any visible navigation, disable these options:
- Navigation bar
- Page navigation buttons (arrows) Click save and return to your Foleon Doc.
Step 3: Design a full-height block
Drag a block onto your empty page. We recommend starting with the block template Text > Page title.
Go to Block settings > General settings and turn on the full-height toggle. This makes the block appear full screen.
From here it's up to you! Add the messaging and create the design that fits your brand. Add visuals or buttons that help guide your visitor.
Below is an example of a Foleon-branded 404 page for inspiration!
Once your design is ready, preview and publish your Doc. Next, we'll change the project settings to set a primary Doc.
Set the 404 page as your primary Doc
Setting your 404 page as the primary Doc ensures it appears when someone follows a broken link or tries to visit a Doc that has been taken offline.
In the Dashboard, find the Doc where you've published the 404 page.
💡 Use the search bar to quickly find your Doc.
Click the three dots to open the quick actions menu and select the option Set as primary.
That's it! Your branded 404 page is now live.
Want to test it? Make a typo in your URL and see if you end up on the page!
📖 For more information, continue reading here: Set a primary Foleon Doc for your project