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

Have you thought about personnaliser la page d'erreur 404 de votre site ? No? Pourtant, vous le devriez : non seulement c'est simple à faire, mais en plus, cela pourrait faire lower your rebound rate ! L'idée est de conserver sur votre site l'internaute qui passerait par là.

1 - Qu'est-ce qu'une erreur 404 ?

One error 404 est un code de réponse envoyé par votre navigateur lorsqu'il ne trouve aucun contenu à afficher.

This can happen in a number of cases:

• Vous avez changé l'URL de votre site, suite à une migration, et vous avez oublié de faire une redirection de nom de domaine.
• Vous avez changé l'URL de votre publication - ou plutôt vous avez modifié le slug - et vous avez oublié de faire une redirection.
• You deleted a publication and forgot to redirect.
• Vous avez partagé une URL erronée, par exemple une URL que vous auriez mal orthographié (c'est pourquoi je recommande de toujours faire un copié-collé de l'URL plutôt que de la saisir à la main).
• L'internaute a mal saisi une URL de votre site lors de sa navigation et tombe sur une page qui n'existe pas.

Voilà, c'est à peu près les cas de figure que nous avons l'habitude de rencontrer.

Want to customize Divi as a pro? Discover all the tutorials!

2 - Cas particulier : la page d'accueil est disponible mais toutes les autres pages affichent une erreur 404

Il peut arriver que la page d'accueil de votre site soit disponible mais que toutes les autres pages de votre site affichent une erreur 404. C'est assez rare mais ça m'est déjà arrivé 4 ou 5 fois en quelques années.

In this case, you have a .htaccess file problem. It is then sufficient to regenerate it to correct the problem.

Pour cela, rendez-vous dans l'onglet Settings > Permalians et cliquez 2 fois sur le bouton "enregistrer les modifications". Dans la plupart des cas, cela génère un nouveau fichier .htaccess and règle ces soucis d'erreur 404.

Don't delay! Discover the theme Divi here !

3 - Pourquoi et comment éviter les erreurs 404 ?

Repeated 404 errors offer a bad user experience. But beyond that, it's bad for the SEO of your site. Google n'aime pas tomber sur un contenu qui n'existe plus !

For correct errors 404, il suffit d'installer le Redirect plugin. C'est une extension gratuite et facile d'utilisation qui vous permet de saisir l'ancienne adresse web et d'indiquer vers quelle nouvelle adresse elle doit être redirigée.

C'est un plugin que j'installe sur chacun de mes sites et je vous recommande d'en faire de même.

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

4 - Pourquoi personnaliser la page d'erreur 404 sur son site ?

Vous vous demander peut-être s'il est réellement nécessaire de personnaliser la page d'erreur 404 d'un site si vous corrigez toutes les erreurs existantes ?

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

• Même si vous corrigez toutes les erreurs 404 de votre site, il se pourrait qu'un internaute saisisse une mauvaise adresse. Dans ce cas, il tomberait sur cette page.
• La page d'erreur 404 de base n'est pas jolie et vous pourriez l'harmoniser avec le reste de votre site.

De plus, en personnalisant votre page d'erreur 404, vous pourriez créer un design hors du commun afin que l'internaute soit finalement satisfait d'être tombé sur cette page avec un brin d'humour, par exemple !

But beyond design, le but est d'améliorer l'expérience utilisateur de l'internaute and d'éviter de le perdre. It is absolutely necessary inciter l'internaute à aller plus loin que cette erreur and découvrir d'autres pages de votre site. So you improve your rebound rate.

5 - Page d'erreur 404 avec le Divi Thème Builder

The good news is that the Divi Builder Theme permet de personnaliser cette page en un clin d'œil !

1. Go to the tab Divi > Theme Builder.
2. Click "+Ajouter un nouveau modèle".
3. Choose the model "404 Page".
4. Click "Ajouter un corps personnalisé".
5. Then build your layout as you please. Add a title, text, from code, des images, etc. Mais n'oubliez pas d'insérer un Blog module if you have a blog and/or Boutique module si vous avez une boutique en ligne ! Ainsi, l'internaute aura l'embarras du choix pour continuer sa navigation sur votre site ! Pourquoi pas, même, ajouter un contact form et/ou un formulaire d'inscription à la newsletter ? Bref, utilisez votre imagination.

Enfin, n'oubliez pas de sauvegarder vos changements afin que cette page d'erreur 404 personnalisée take the place of the classic page offered by the theme Divi.

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

6 - Page d'erreur 404 sans le Divi Thème Builder

If now, for a reason I don't know, you don't want to use the builder theme for personnaliser votre page d'erreur 404, vous pouvez opter pour la "méthode à l'ancienne".

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

1. Create your child theme as shown here. Ensuite, ouvrez le dossier du thème Divi (thème parent), repérez le fichier nommé "404.php" et copiez-le.
2. Then paste this file into your child theme folder.
3. Find the code between lines 6 and 10 of the file.
4. Replace this code with your own HTML code.

Here's the result:

C'est un design simple qui a demandé quelques connaissances en HTML et en CSS. Autant vous dire que c'est bien plus simple d'utiliser le Thème Builder...

Mais bon, au moins vous savez ce que cet outil est capable de faire et vous comprenez ce que nous étions obligé de faire avant que le thème builder n'existe...

7 - Inspirations pour personnaliser votre page d'erreur 404

Maintenant que vous avez compris pourquoi et comment personnaliser votre page d'erreur 404, vous avez peut-être besoin d'un peu d'inspiration pour créer la vôtre.

Good news! The Hello 404 website publie chaque semaine de nouvelles inspirations pour personnaliser votre page d'erreur 404.

6 - Personnalisez votre page d'erreur 404 : le tuto en vidéo

La création de cette page est très simple, vous l'avez vu dans ce tutoriel... Toutefois, je vous ai préparé une version vidéo :

Pour aller plus loin, voici une liste de liens utiles pour personnaliser votre page d'erreurs 404 :

• 4 plugins pour personnaliser la page d'erreur 404
• Get an error layout 404 (free)
• How to repair 404 errors on WordPress sites