Component Menu

    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 6 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.

       

       

       

       

      404

      Description