Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the visitor on your site if he or she passes by.

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - What is a 404 error?

A 404 error is a response code sent by your browser when it cannot find any content to display.

This can happen in various cases:

• You have changed the URL of your site, following a migration, and you have forgotten to redirect the domain name.
• You changed the URL of your publication - or rather you changed the slug - and you forgot to redirect.
• You deleted a publication and forgot to redirect it.
• You have shared an incorrect URL, for example one that you misspelled (which is why I recommend always copying and pasting the URL rather than typing it in by hand).
• The Internet user has mistyped a URL of your site while browsing and comes across a page that does not exist.

That's pretty much what we're used to.

Want to customize Divi like a pro? Check out all the tutorials!

2 - Special case: the home page is available but all other pages display a 404 error

It can happen that the home page of your site is available but that all the other pages of your site display a 404 error. This is quite rare but it has happened to me 4 or 5 times in a few years.

In this case, you have a problem with the .htaccess file. You just need to regenerate it to correct the problem.

To do this, go to the Settings > Permalinks tab and click twice on the "save changes" button. In most cases, this will generate a new .htaccess file and fix those 404 error concerns.

Don't delay! Discover the Divi theme here !

3 - Why and how to avoid 404 errors?

Repeated 404 errors offer a bad user experience. But beyond that, it's bad for the SEO of your site. Google does not like to come across content that no longer exists!

To correct 404 errors, simply install the Redirection plugin. It is a free and easy to use extension that allows you to enter the old web address and indicate to which new address it should be redirected.

This is a plugin that I install on each of my sites and I recommend that you do the same.

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.

4 - Why customise the 404 error page on your site?

You may wonder if it is really necessary to customise a site's 404 error page if you are fixing all the existing errors?

The answer is yes, you should still customize this page, for two reasons:

• Even if you correct all the 404 errors on your site, it is possible that a visitor enters the wrong address. In this case, they would end up on this page.
• The basic 404 error page is not pretty and you could make it fit in with the rest of your site.

In addition, by customising your 404 error page, you could create an unusual design so that the user is finally satisfied with having stumbled upon this page with a touch of humour, for example!

But beyond the design, the goal is to improve the user experience and avoid losing the user. It is essential to encourage the user to go further than this error and discover other pages of your site. In this way, you improve your bounce rate.

5 - 404 error page with the Divi Theme Builder

The good news is that the Divi Theme Builder allows you to personalise this page in the blink of an eye!

1. Go to the Divi > Theme Builder tab.
2. Click on "+Add a new template".
3. Choose the "404 Page" template.
4. Click on "Add a custom body".
5. Then build your layout as you see fit. Add a title, some text, some codeimages, etc. But don't forget to insert a Blog module if you have a blog and/or a shop module if you have an online shop! This way, the Internet user will have plenty of choice to continue browsing your site! Why not even add a contact form and/or a newsletter registration form? In short, use your imagination.

Finally, don't forget to save your changes so that this custom 404 error page takes the place of the classic page offered by the Divi theme.

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

6 - 404 error page without the Divi Theme Builder

If now, for some reason I don't know, you don't want to use the theme builder to customise your 404 error page, you can opt for the "old school method".

You will then need to make this change in your child theme.

1. Create your child theme as shown here. Then open the Divi theme folder (parent theme), locate the file named " 404.php " and copy it.
2. Then paste this file into your child theme folder.
3. Locate the code noted between lines 6 and 10 of the file.
4. Replace this code with your own HTML code.

Here is the result:

It's a simple design that required some knowledge of HTML and CSS. I might as well tell you that it's much easier to use the Theme Builder...

But hey, at least you know what this tool can do and you understand what we were forced to do before the theme builder existed...

7 - Inspirations for customising your 404 error page

Now that you've figured out why and how to customise your 404 error page, you may need some inspiration to create your own.

Good news! The Hello 404 website publishes new inspiration for customising your 404 error page every week.

6 - Customise your 404 error page: the video tutorial

The creation of this page is very simple, as you have seen in this tutorial... However, I have prepared a video version for you:

To go further, here is a list of useful links to customise your 404 error page:

• 4 plugins to customize the 404 error page
• Getting a 404 error layout (free of charge)
• How to fix 404 errors on WordPress sites