How to Create Custom 404 Pages in Astra & Elementor

Preface

Ever landed on a website and encountered a generic, unhelpful 404 error page? It’s frustrating, right? A custom 404 page can turn a negative experience into a positive one, keeping visitors engaged even when they’ve stumbled upon a broken link. In this guide, you’ll learn how to create custom 404 pages using two powerful tools: the Astra theme and the Elementor page builder. Let’s dive in!

Why Customize Your 404 Page?

Before we jump into the how-to, let’s quickly cover the why. A well-designed 404 page can significantly improve your website’s user experience (UX) and even boost your SEO. Here’s why:

• Reduces Bounce Rate: Instead of leaving your site out of frustration, users are more likely to stick around if they find a helpful and engaging 404 page.
• Reinforces Branding: A custom 404 page allows you to maintain your brand’s identity even when something goes wrong.
• Guides Users Back on Track: By including a search bar, popular posts, or a link to your homepage, you can help users find what they were looking for.
• Shows Personality: A creative and humorous 404 page can leave a positive impression on visitors.

Prerequisites

Before you get started, make sure you have the following:

• WordPress Installation: A self-hosted WordPress website is essential. If you need help with that, check out this guide on how to make a free website with WordPress the complete guide.
• Astra Theme Installed: You’ll need the Astra theme installed and activated. You can download it from the WordPress theme directory. Astra is known for its customizability and performance.
• Elementor Page Builder Installed: You’ll also need the Elementor page builder. You can install the free version from the WordPress plugin directory. For more advanced features, consider upgrading to Elementor Pro.

Info: You may also need Astra Pro as you may need to configure some options in Astra’s customizer. Also Elementor Pro unlocks the Theme builder which you can define custom 404 pages. 

Step-by-Step Guide: Creating a Custom 404 Page

Now, let’s get to the fun part – creating your custom 404 page!

Step 1: Create a New Page in WordPress

1. Go to your WordPress dashboard.
2. Click on Pages > Add New.
3. Give your page a title, such as “404 Error” or “Page Not Found.”

Step 2: Design Your 404 Page with Elementor

1. Click the Edit with Elementor button.

2. In the Elementor editor, you can start designing your 404 page from scratch or use a template.

   • Starting from Scratch: Choose the “+New Section” and select your preferred layout. Then, add elements like headings, text, images, and buttons.
   • Using a Template: Elementor offers pre-designed templates that you can customize. Click the folder icon (Add Template) and search for “404” to find relevant templates. You can also browse Themeforest for Elementor templates.

Hint: Don’t overdo it! Keep the design clean and user-friendly. 

Step 3: Add Essential Elements to Your 404 Page

Here are some essential elements to include on your 404 page:

• A Clear Error Message: Let users know that the page they’re looking for couldn’t be found. For example, “Oops! The page you were looking for doesn’t exist.”
• A Search Bar: Allow users to search for what they need.
• Navigation Links: Include links to your homepage, popular pages, or categories.
• Contact Information: Provide a way for users to contact you if they need further assistance.
• A Touch of Humor (Optional): A lighthearted message or image can help diffuse frustration.

Example Elementor Design:

Here’s a simple example of how you can structure your 404 page in Elementor:

1. Section 1:

   • Heading: “404 – Page Not Found”
   • Text: “We’re sorry, but the page you were looking for could not be found. It might have been removed, renamed, or doesn’t exist.”

2. Section 2:

   • Search Bar: Add the Elementor Search widget.

3. Section 3:

   • Heading: “Popular Pages”
   • List: Add a list of your most popular pages or categories using the Elementor List widget.

4. Section 4:

   • Text: “If you need further assistance, please contact us.”
   • Button: Link to your contact page.

Step 4: Publish Your 404 Page

1. Once you’re happy with your design, click the Publish button in the Elementor editor.
2. Make sure the page is set to Public visibility.

Step 5: Configure Astra to Use Your Custom 404 Page

Here’s how to tell Astra to use the page you just created as your 404 page:

1. Go to your WordPress dashboard.
2. Click on Appearance > Customize.
3. Navigate to Header > Site Identity (or a similar section, depending on your Astra setup).
4. Look for an option like “404 Page” or a similar setting. The precise location of this setting can depend on the Astra version or the plugins you use. If using Elementor Pro, you can alternatively use the Theme Builder functionality.
5. Select your newly created page from the dropdown menu.
6. Click Publish to save your changes.

Hint: If you don’t see a dedicated 404 page setting in the Astra Customizer, you might need to use a plugin like “Custom 404 Pro” or use Elementor Pro’s Theme Builder.

Alternative Method: Using Elementor Pro Theme Builder

If you have Elementor Pro, you can use the Theme Builder to create and assign a custom 404 page:

1. Go to Templates > Theme Builder in your WordPress dashboard.
2. Click the Add New button and select “Single” as the template type.
3. Choose “404 Page” as the post type and give your template a name.
4. Design your 404 page using Elementor’s Theme Builder interface.
5. Once you’re done, click the Publish button and set the display conditions to “404 Page.”

Step 6: Test Your Custom 404 Page

1. Visit a non-existent page on your website (e.g., yourdomain.com/thispagedoesnotexist).
2. You should see your custom 404 page instead of the default WordPress 404 page.
3. Test all the links and the search bar to make sure they’re working correctly.

Advanced Customization Tips

Here are some extra tips to make your 404 page even better:

• Use Conditional Logic: Display different content based on the referrer URL. For example, if a user came from a specific product page, you could suggest similar products on your 404 page.
• Incorporate Animation: Add subtle animations or interactive elements to make your 404 page more engaging. Be careful not to overdo it, as it can slow down the page.
• A/B Test Different Designs: Experiment with different layouts and content to see which 404 page performs best in terms of bounce rate and user engagement. You might want to take a look at top 10 valuable ai plugins for wordpress to boost your blog.
• Make it Mobile-Friendly: Ensure your custom 404 page looks great on all devices.

Examples of Great 404 Pages

Need some inspiration? Here are a few examples of creative and effective 404 pages:

• GitHub: GitHub’s 404 page features a playful animation of an Octocat (GitHub’s mascot) being abducted by aliens (https://github.com/404).
• Bluegg: Bluegg, a Welsh design agency, has a 404 page displaying a humorous message in Welsh (https://www.bluegg.co.uk/404).
• IMDb: IMDb’s 404 page displays a random quote from a movie or TV show accompanied by a relevant image (https://www.imdb.com/404).

Conclusion

Creating a custom 404 page in Astra and Elementor is a simple yet effective way to improve your website’s user experience and reinforce your brand. By following the steps outlined in this guide, you can turn a potential frustration point into an engaging opportunity. So, go ahead and design a 404 page that reflects your brand’s personality and helps users find their way back to your content!