After reading this article you’ll know:
How to create and configure the error page within your application
What types of errors this template offers and what they mean
How to customize the look of error pages
The Error pages template offers the choice between three error pages: a 403 page for unauthorized access, a 404 page for when a page could not be found or a 500 for an internal server error. You can also apply two style versions for the error pages: simple and styled.
Creating and configuring new page
Once you open your application’s dashboard, go to the Pages section and choose the
The next thing you will see is the “Choose a page template” section. Here you need to find the “Error pages” template and click the
Now fill in the name and edit the page path to your liking (use underscore instead of a dash, for example). There’s only a ‘Public’ option available for this template as error pages have to be accessible for everyone.
In the next configuration step, you will be able to select the error type (403, 404, 500) and choose the template version (styled or simple). Below the preview of these errors, you may notice the optional link to a page (for 403 and 404 types). This option allows you to link the error page to one of the internal pages and when something goes wrong while accessing the needed page, a user will be able to get back to this internal page.
Note: If you don’t have the internal page you want users to be redirected to, you can choose it later via the page builder button interaction option.
In case you already know which error type you’re looking for, pick it up and click
Errors types overview
Let’s take some moments to overview the error types from this template and choose the one that will work the best in your particular case.
403 or Forbidden error is an HTTP status code communicating that a user is not able to access the page or resource as it is blocked. This kind of error occurs when trying to reach something you don’t have permission for. Also, it might mean that the permissions for this page were not set up properly.
500 stands for the internal server error. This HTTP status code communicates that something went wrong on the website’s server, but there is no specific explanation for what happened.
404 error is another HTTP status code that means the page you are trying to reach currently couldn’t be found on the website’s server. It also clarifies that while the website itself is reachable, the page you’re getting to is not.
In order to actually use your page as a 404 error page, you need to set it to the “not found page”.
Go to your application tools and open the application settings.
Here you need to choose ‘404 error page’ as ‘not found page’. Now your users will be redirected to it when this issue occurs.
While using the default styles offered by Betty Blocks might be a simple and effortless way for very basic solutions, one could also think of style customization of the error pages to match the look of other application pages.
Assuming you chose the error 403 stylized type which uses our default background image. Of course, you will be able to change it in a rather easy way.
Open your page builder and click once to choose the box component around the number 403.
In the options configuration on the left, scroll down to find the ‘Background URL’ box. As you will see, it already has the URL of a current picture in it. Replace it with your own link to change the background picture on your error page.
Customization via theme builder
It is also possible to change your page style via the theme builder. You can find it in the tools section.
Here you can pick up the most suitable color scheme for your application.
Also, it’s possible to configure your typography. Choose the fonts for the page titles and body text.
After you’ve finished customizing, don’t forget to click
Customizing your application could be really fun, whether you already have some references or want to do everything from scratch. Play around with styles and find the one you enjoy. More information about the theme builder is available here.