It can always happen that your website is under maintenance, individual pages are not accessible or contain faulty links, which often leads to a 404 page. This is not nice, but with well-designed error pages, you can still keep your visitors. We'll show you how to do this with WordPress and Visual Composer.

The purpose of a 404 error page is to inform your visitors about the error that has occurred. And to redirect them to those parts of your website that are still available or working. This reduces the bounce rate.

A custom 404 page is also ideal for promoting and inserting call-to-action elements. This means that it can basically perform the same functions as a functioning target page and landing page.

We look at the following points:

• What is a 404 error page?
• 404 error variants
• When do 404 errors occur 
• How to fix 404 errors
• Good and creative examples for 404 pages
• Create a custom 404 error page with WordPress
• Create 404 error page with Visual Composer

What is a 404 page?

Briefly described, the 404 error is an HTTP (Hypertext Transfer Protocol) response code. It means that the server cannot find the requested source. Or rather the part of the website path that comes after the "/". Basically, this means that the specific page to be displayed is not available.

A 404 error message is usually displayed as follows:

• HTTP 404
• 404 Not Found / not found
• 404
• 404 Error / Error
• 404 This page does not exist
• Page Not Found
• File Not Found
• Directory Not Found 
• Requested URL Not Found
• ... and similar variations

Possible reasons why 404 errors occur:

• A WordPress page or post is deleted or moved to another page without redirecting the links
• A visitor enters the domain name incorrectly (a letter is missing, spelling mistake, etc.)
• Former links (which have changed) are still listed in external sources
• The server/website has crashed, is undergoing maintenance or has technical problems that prevent the website from being displayed correctly (e.g. interrupted connection)

In addition to 404 errors, there are the following other HTTP status codes:

• 100-199 Response: Request recipient and continue processing
• 200-299 Successful: Request successful and accepted
• 300-399 Redirection or forwarding: Requires further actions to complete the request
• 400-499 Client error: Request invalid or cannot be completed
• 500-599 Server error: The server could not accept the request

How to fix 404 errors

On the one hand, you can use redirects to redirect your visitors directly to target pages that match the content of the original request as closely as possible. With Raidboxes, you don't need an additional WordPress plugin to set redirects and redirect rules. See the guide on 301 and 302 redirects.

Another option is to find and repair broken links - i.e. replace them with the new valid internal source. Make sure that all internal links lead to the desired pages. Also ask the owners of external link sources to change all broken links.

Another tip: Use user-friendly URLs and permalinks - keep them short, use lowercase letters and describe where the links lead to. This will help you to better track any broken links, keep track of them and also optimize your website for search engines. See the article Internal linking and SEO with WordPress.

And finally, you should create a custom 404 page. This leads "lost" visitors back to the homepage or to relevant content. At the same time, they won't confuse the error with a failure of your entire website.

What makes target-oriented 404 pages

So it's important to have a custom 404 error page that takes your visitors back to the existing parts of the website. Now let's look at what options you have. The common and recommended practices when creating custom 404 pages are:

• Back or home buttons: Give your target audience the option to return to the available pages or to any location.
• Search bar: Usually these types of errors occur when users try to find a specific content or page. So offer them a search option or suggest specific target pages.
• Contact forms: People can use a contact form or live chat to get help if they can't find the content they're looking for. Or if they need help with other things on your website.
• Social media icons: It's always good to link to different social media platforms where your content can be found and reached.
• Humorous images: This is one of the most underrated practices that is clearly underutilized. Certainly humor can defuse the result of the (probably) negative perception. Here are a few examples.

Create a custom 404 page with WordPress

You have the following options for creating a 404 page. With WordPress, with a website builder or page builder and with user-defined code - for example with HTML. This is how it works with WordPress:

1. Go to your WordPress dashboard
2. Select the "Design" area on the left
3. There the sub-item "Editor"
4. Check whether your WordPress theme contains a "404 template" (Ctrl + F and then enter "404.php");
5. Click the link for the 404 template on the right-hand side

The content looks something like this:

get_header();
?>
	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->
	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->
<?php
get_footer();

Now change this according to your needs. However, you will need knowledge of HTML to do this. You should also work with a child theme, otherwise your changes may be deleted after an update of the WordPress theme.

Create 404 page with Visual Composer

One of the easiest and quickest ways to create a 404 page is with a website or page builder. In this example, we'll show you how to create a custom 404 page with Visual Composer, using drag and drop. Note that this is only possible with the premium version.

First you need to download and install the Visual Composer plugin. See this video tutorial on YouTube:

As soon as the plugin has been installed and activated, you can get started. Use one of the many templates. To do this, click on the marketplace icon in the frontend editor. Select Templates and enter "404" to find ready-made 404 pages.

This tutorial explains exactly how to create a custom 404 page with Visual Composer:

Once you have completed and saved your individual 404 page designs, you can now manage them in the editor. The following video shows how to do this:

You can find more tips on creating a custom 404 page, the best plugin solutions and some inspiration for 404 pages in the article by Visual Composer 404 pages with WordPress.

Examples of good 404 pages

We've collected some of the most creative 404 error pages - independent of WordPress and Visual Composer - for you to get inspired by. GOG.com's 404 page is one of the best examples of thinking outside the box. And in the truest sense of the word:

As this is a site with entertainment value, Blizzard had to meet high standards with regard to its 404 page. The cool design becomes a classic in itself:

The last example of 404 pages from Slack is super simple, yet surprising. It's a great example of creativity:

Conclusion on 404 pages with WordPress

Now you know how to create a 404 error page to guide your visitors to the active subpages of your website. And how you can turn a bad situation into something that minimizes or even resolves the annoyance. Also that there are very simple ways to design such a 404 page - assuming creativity and a little graphic skill.

With a website builder as a tool, you don't need any programming knowledge to turn a boring 404 page into something that puts your visitors in a good mood. And/or that helps your visitors in their situation. Do you have a good example of a successful 404 error page? Then please share it in the comments.