Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Publié le 22/06/2021 | 2 commentaires

Avez-vous pensé à personnaliser la page d’erreur 404 de votre site ? Non ? Pourtant, vous le devriez : non seulement c’est simple à faire, mais en plus, cela pourrait faire baisser votre taux de rebond ! L’idée est de conserver sur votre site l’internaute qui passerait par là.

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Qu’est-ce qu’une erreur 404 ?

Une erreur 404 est un code de réponse envoyé par votre navigateur lorsqu’il ne trouve aucun contenu à afficher.

Cela peut arriver dans divers cas :

  • 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.
  • Vous avez supprimé une publication et vous avez oublié de faire une redirection.
  • 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.

Envie de customiser Divi comme un(e) pro ? Découvrez tous les tutos !

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.

Dans ce cas, vous avez un problème de fichier .htaccess. Il suffit alors de le régénérer pour corriger le problème.

Pour cela, rendez-vous dans l’onglet Réglages > Permaliens et cliquez 2 fois sur le bouton « enregistrer les modifications ». Dans la plupart des cas, cela génère un nouveau fichier .htaccess et règle ces soucis d’erreur 404.

Ne tardez plus ! Découvrez le thème Divi ici !

3 – Pourquoi et comment éviter les erreurs 404 ?

Les erreurs 404 à répétition offrent une mauvaise expérience utilisateur. Mais au-delà de ça, cela est mauvais pour le SEO de votre site. Google n’aime pas tomber sur un contenu qui n’existe plus !

Pour corriger les erreurs 404, il suffit d’installer le plugin Redirection. 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.

Besoin de maitriser Divi ? Découvrez ma formation qui vous offre une toute nouvelle expérience : elle vous accompagne pas à pas dans la compréhension et l’utilisation de Divi, mais en plus, un site Divi prêt à l’emploi vous est offert ! En savoir plus sur la formation Divi.

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 ?

La réponse est oui, vous devriez quand même personnaliser cette page, pour deux raisons :

  • 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 !

Mais au-delà du design, le but est d’améliorer l’expérience utilisateur de l’internaute et d’éviter de le perdre. Il faut absolument inciter l’internaute à aller plus loin que cette erreur et découvrir d’autres pages de votre site. Ainsi, vous améliorez votre taux de rebond.

5 – Page d’erreur 404 avec le Divi Thème Builder

La bonne nouvelle est que le Thème Builder de Divi permet de personnaliser cette page en un clin d’œil !

Page erreur 404 avec le Theme Builder
  1. Rendez-vous à l’onglet Divi > Theme Builder.
  2. Cliquez sur « +Ajouter un nouveau modèle ».
  3. Choisissez le modèle « 404 Page ».
  4. Cliquez sur « Ajouter un corps personnalisé ».
  5. Construisez ensuite votre mise en page comme bon vous semble. Ajoutez un titre, du texte, du code, des images, etc. Mais n’oubliez pas d’insérer un module Blog si vous avez un blog et/ou un module Boutique 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 formulaire de contact et/ou un formulaire d’inscription à la newsletter ? Bref, utilisez votre imagination.
Contenu de la page erreur 404

Enfin, n’oubliez pas de sauvegarder vos changements afin que cette page d’erreur 404 personnalisée prenne la place de la page classique offerte par le thème Divi.

Le saviez-vous ? Vous pouvez tester Divi gratuitement en vous rendant sur cette page et en cliquant sur « TRY IT FOR FREE »

6 – Page d’erreur 404 sans le Divi Thème Builder

Si maintenant, pour une raison que je ne connais pas, vous ne voulez pas utiliser le thème builder pour personnaliser votre page d’erreur 404, vous pouvez opter pour la « méthode à l’ancienne ».

Il faudra alors faire cette modification dans votre thème enfant.

Page erreur 404 Divi avec un thème enfant
  1. Créez votre thème enfant comme indiqué ici. Ensuite, ouvrez le dossier du thème Divi (thème parent), repérez le fichier nommé « 404.php » et copiez-le.
  2. Collez ensuite ce fichier dans le dossier de votre thème enfant.
  3. Repérez le code noté entre les lignes 6 et 10 du fichier.
  4. Remplacez ce code par votre propre code HTML.
page erreur 404 divi ok

Voilà le résultat :

Page erreur 404 personnalisée

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.

Bonne nouvelle ! Le site Bonjour 404 publie chaque semaine de nouvelles inspirations pour personnaliser votre page d’erreur 404.

Inspirations page 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 :

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

1,055 mots

4

Ça devrait vous plaire aussi :

Appliquer des masques et des formes sur vos images avec Divi

Appliquer des masques et des formes sur vos images avec Divi

Les masques rendent vos images plus graphiques et offrent une originalité à votre mise en page. Savez-vous que vous pouvez les créer facilement à l’aide du Divi Visual Builder ? Je vous montre comment faire dans ce tutoriel et dans cette vidéo.

2 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 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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.

Pin It on Pinterest

Shares
Share This