Components
404
A custom error page for the 404 (page not found) error. The component shows an image inside a giant "404" text, while providing additional information and a CTA that redirects the user to a page of your choosing.
Edited 1 year 10 months ago
Desktop
Mobile
The "404" component should be used when the user reaches a page that does not exist.
The 404 number is a mask, so a solid image may be needed to use the component as it was intended.
Purpose:
Create a 404 Error message, that is, when the user enters a nonexistent URL (`Example: [http://www.ambev.com.br/examplodepaginainexistent](http://www.ambev.com.br/ exampleofnonexistentpage)`)
⚠️Note: Create only one 404 page!
Step by step:
Component Structure in Canvas Layout:
1. On the page you want to add the banner, click on the **+** of the Layout Canvas;
2. Identify the 404 component in the list and add it by grabbing the component and dragging it to the Layout Canvas.
Component Customization:
1. Double click on **404** for editing;
2. Edit the following fields:
- Background Color
- Add the block's background color, choosing the colors from the brand's palette.
- Text Image
- Image that will be the background of the 404 texts.
- Description - Text
- Enter text to introduce the user to what this page means.
- Description - Color
- Font color of the above text.
- Button - Text
- Text that will be displayed on the redirect button.
- Button - Link
- URL for the button. In this case, we recommend adding "`/`" **only**, that way the redirect will go to the home page.