Instruction Videos
Set up a branded 404 page
207 views
Protect your brand identity even when your visitors come across a faulty link or a Doc that's taken offline.
What you'll learn
- What happens if you don’t set up a 404 page
- Saving your 404 page as a template to use across projects
- Set as primary: what is it, and how does it work?
View transcript
A well-designed 404 page can help protect your brand identity — even when your visitors end up on a faulty link. In this lesson, we show you how to create an effective 404 page for your project. But first let’s talk about what happens if you don’t set up this error page. They will be redirected to the most recently published Foleon Doc in the project, which is the default behavior. Or redirected to a Foleon 404 error page. Visitors experience this when there is a typo in the URL, or when the Doc they try to visit has been taken offline. This is a good solution if, for example, you only have monthly newsletters in your project folder so if visitors are redirected to another newsletter this will be ok for them to see. It is not a good solution however if you have a project folder where sales proposals are being created for different prospects. You would not want prospect A to see the proposal for prospect B. Lastly, when there is no published Foleon Doc in the project, visitors will be taken to a Foleon 404 error page. When do we recommend that you set this up? Always, especially if your Foleon Docs in the project folder are not meant to be seen by others. But also, when you want to make sure your audience gets an experience aligned with your brand. So, how do you set this up? It’s easy, you can create a 404 page in a one-pager Foleon Doc. With the set-as-primary-feature, your visitors end up on your custom 404 page when something went wrong. Here’s a TIP: Save the 404 page your going to create as a Doc template to easily use it across different projects. Step 1: Create a Doc from scratch Step 2: It’s smart to start with the correct Foleon Doc settings to have a clean one-pager without any visible navigation, disable the following: Navigation bar, Page navigation buttons (arrows), Click save and return to your Foleon Doc to design it! Step 3: time to design To get started, drag a block to the empty page. Selecting a block from the "Header" category— titled "header textual 2", is a good starting point. Then, Go to Block settings > General settings > and enable full-height. This makes sure the block appears fullscreen. Then it's up to you! Write copy that aligns with your brand's tone of voice. On top of that, adding an interesting visual might help style the page. Always double check tablet and mobile view and make sure to check the preview. Publish your Foleon Doc when you're ready. Step 4: back in the project folder, open your custom 404 Foleon Doc settings by expanding the 3 vertical dots and enabling “set-as primary” toggle. This sets your custom doc as the default page seen when visitors happen to get a faulty link or try to access an unpublished Foleon Doc in that project folder. Done! You now have a 404 page for your project. Want to test it? Make a typo in any published live URL within that folder and see if you end up on your 404 error page. You can set up the same 404 page in other projects, as well. Simply, save it as a Doc template first. Then it appears on your dashboard for ease of use in the future. Want to get creative with the design? There are some pretty cool and sometimes even funny 404 pages out there, there is plenty of inspiration on Google. If your brand guidelines give you that freedom, of course. And that’s it! Here is a quick recap of the steps covered! First, Create the doc. Then, Adjust Foleon Doc settings to be a one pager. Design it as you wish. Finally, Set your creation as the primary. Just don’t forget to save it as a doc template for ease of use later! Thank you for watching! Now it’s time for you to go create an awesome 404 page for your projects! Good Luck!