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

Published on 22/06/2021 | 4 comments

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!

Page erreur 404 avec le Theme Builder
  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.
Contenu de la page erreur 404

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.

Page erreur 404 Divi avec un thème enfant
  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.
page erreur 404 divi ok

Here is the result:

Page erreur 404 personnalisée

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.

Inspirations page erreur 404

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:

personnaliser page erreur 404
personnaliser page erreur 404 avec Divi
pin modifier page erreur 404 en 117

1,055 words

4

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

4 Commentaires

  1. cj-envadrouille

    Super ! J’ai déjà crée une page d’erreur 404 pour mon 2eme site https://aixelles.fr …..en m’inspirant de la page d’erreur d’astuces Divi ( trop jolie) 😊
    Dans quelques temps, je le ferai pour les « roulettes ».
    Merci de tes bons conseils, une vraie mine d’or pour nous les apprentis 🥳🥳

  2. Lycia Diaz

    Super ! Merci Christine 😉

  3. Léa-Sandra

    Bonjour,

    Je viens de regarder votre vidéo.
    Et si vous n’avez toujours pas trouvé la solution pour le player (tuto datant de juin 2021)
    je peux vous le dire :

    il suffit simplement de décocher la case « controls » et le player n’y sera plus.

    Et si oui, vous avez réglé votre mini soucis, ne tenez pas compte de ce message ^-^

    Je vous souhaite une bonne continuation.

  4. Lycia Diaz

    Merci oui il faut que je modifie le tutoriel…

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

New Divi training!

55 videos to master the Divi Visual Builder like a pro: ⏱ 3h30 of theory + 👩🏻💻 6h00 of practical application + 🤝 30min. of individual coaching in visio.

(CPF eligible training)

Pin It on Pinterest

Shares
Share This