Creating a Custom Animated 404 Page with Bricks

This article delves into creating a custom 404 page featuring an animated character against a starfield background. The process is simple and doesn’t require any specific framework, although, for this tutorial, we’ll use Core Framework to expedite the design process.

Step 1: Prepare the Template

Using Bricks Builder, we start by setting up a blank template. The first task is to establish when and where this 404 page will be used. This involves setting conditions in the template settings to specify that it’s an error page.

Step 2: Designing the Page Layout

With the template ready, we move to the page settings. Here, we disable the header and footer for a clean layout (optional) and set a fallback site background colour. This colour will only show on older browsers that might not support the background effects we plan to implement.

Step 3: Creating the Structure

We add a new section with a full-screen height (100vh). This ensures the section covers the entire height of any screen. The content is centred within this section. Next, we insert a container set to 1600 pixels wide (this can vary according to your design needs) and add two blocks within it – one for the image (40% width) and one for the text (60% width).

Step 4: Adding Content and Animation

The left block receives our textual content, comprising headings that we style using Core Framework (or your preferred method). We introduce our animated character for the right block – a charming little spaceman designed using ChatGPT. This character is saved as a WebP file with a transparent background for optimization.

Implementing Animation

We apply a simple ‘bounce’ animation to bring our spaceman to life. This involves CSS keyframes to create a subtle up-and-down movement, achieving a lively effect that adds charm to our 404 page.

/* Animation effect for the 404 page */

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

%root% {
  animation: bounce 3s infinite ease-in-out;
}

/* End of animation */

Step 5: Styling and Links

We add spacing between elements for a cleaner look and include a list of helpful links at the bottom of the page. These links can guide users back to the homepage or other relevant website areas.

Final Touch: The Starfield Background

We add a starfield background to the full-width and full-height section to complete our cosmic theme. The background uses an SVG for a scalable, high-quality visual effect (download the CSS Code here).

Conclusion

With these steps, we’ve transformed a standard error page into a delightful experience that looks great and keeps users engaged. This tutorial showcases the potential of combining Bricks Builder, CSS, and creativity to enhance your website’s user experience.

Remember, the key to a great 404 page is its aesthetic appeal, functionality, and ability to redirect users effectively. Happy designing, and don’t forget to check out the provided links and code in the video description for more detailed guidance!