How to create a 404 page for your project

A well-designed 404 page can help protect your brand identity — even when your visitors end up on a faulty link. In this article, we show you how to create an effective 404 page for your project.

🎥 Click here to watch our video lesson on how to set up a branded 404 page.

Why create a custom 404 page?

Your audience might make a typo in the URL or visit a Foleon Doc that is now offline, which will send them to the primary Foleon Doc. Furthermore, if there's no published Foleon Doc in the project, visitors will be taken to a Foleon 404 error page.

To make sure your audience still has an experience aligned with your brand, you can create a 404 page in a one-pager Foleon Doc. With the set as primary feature, your visitors end up on this 404 page when something went wrong.

Create the Foleon Doc

• Step 1: create a Doc from scratch

  It's best to start with a blank slate. Not sure how to create a Foleon Doc from scratch? Check out our article Creating a Foleon Doc.

  

   

• Step 2: set the correct Foleon 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 the full-height block

  Drag a block to the empty page. We recommend selecting the block "Text"—"Page title", which is a good starting point.

  

   

  Go to Block settings > General and enable full-height. This makes the block appear fullscreen — or base the height on the content within the block.

  Then it's up to you! Write copy that aligns with your brand's tone of voice. Next to that, adding an interesting visual might help style the page. Below you can see an example of a Foleon-branded 404 page.

  

   

  Make sure to check the preview and publish your Foleon Doc when you're ready. Next up, we're changing the project settings.

Change your project settings

With the Set as primary toggle, you set the default Foleon Doc that visitors see when they navigate to the root URL of your project. You set the 404 one-pager Foleon Doc as the primary Doc, so your audience ends up there in case of a faulty link or unpublished Foleon Doc.

You set the primary Foleon Doc at the bottom of the quick actions menu. Done! You now have a 404 page for your project. Want to test it? Make a typo in your URL and see if you end up on the page.