Comment créer un modèle de page 404 personnalisé dans WordPress (en 3 étapes)


Pour les utilisateurs, rencontrer une page d'erreur peut être frustrant et déroutant. Si votre modèle de page 404 n'est pas personnalisé correctement, les utilisateurs peuvent décider de quitter votre site Web. Par conséquent, vous manquez d’engagement et de conversions potentielles.

Heureusement, vous pouvez informer les utilisateurs qu'ils se trouvent toujours sur votre site Web et les rediriger vers votre contenu en créant une page 404 personnalisée.

De plus, vous pouvez le faire sans avoir besoin de connaissances techniques particulières grâce à Elementor.

Dans cet article, nous expliquerons les avantages d’une page 404 personnalisée pour votre site Web. Ensuite, nous vous montrerons comment en créer un dans Elementor. Commençons!

Pourquoi avez-vous besoin d'une page 404 personnalisée

Une erreur 404 est une page affichée lorsqu'un serveur est incapable de trouver le contenu demandé. En d'autres termes, lorsqu'un visiteur clique sur un lien rompu ou entre une URL incorrecte sur votre site, il reçoit une erreur 404. Par exemple, voici notre page 404:

La page d'erreur ThemeIsle 404.

Comme vous pouvez le constater, notre page 404 a été adaptée à notre image de marque et nous permet de revenir à notre contenu actif – un formulaire de recherche dans ce cas.

Une page 404 personnalisée et personnalisée permet aux internautes de savoir qu’ils se trouvent sur le bon site Web. En outre, il peut fournir des liens vers votre contenu, ce qui peut améliorer vos chiffres d'engagement globaux. Si vous ne le personnalisez pas, vos visiteurs recevront une page générique de votre thème WordPress actif:

Un modèle de page 404 non personnalisé.

Bien que cette page 404 particulière contienne un lien vers son site Web principal, il n’ya pas d’autre moyen de savoir à quel site elle appartient. En conséquence, l'utilisateur peut simplement décider de fermer la fenêtre et de continuer. Après tout, s’ils ne parviennent pas à trouver le contenu qu’ils recherchent sur votre site, ils risquent de chercher ailleurs.

En revanche, avec notre page 404, l’utilisateur sait exactement où ils se trouvent. De plus, nous avons mis à disposition une barre de recherche pour les orienter vers ce qu’ils essayaient de trouver. Sans oublier, si vous faites défiler la page de notre exemple, vous trouverez des liens vers certains notre contenu le plus populaire.

Inclure de tels éléments sur votre page 404 personnalisée peut vous aider à: empêcher les utilisateurs de rebondir. En outre, vous pouvez augmenter votre image de marque et promouvoir la confiance et la bonne volonté auprès de votre public.

Comment créer un modèle de page WordPress 404 personnalisé à l'aide d'Elementor

Pour créer un modèle de page d'erreur 404 personnalisé sur WordPress, vous pouvez utiliser la version premium d'Elementor – Elementor Pro.

Elementor est un constructeur visuel de page, glisser-déposer, ce qui signifie que vous pouvez créer une conception totalement personnalisée sans avoir besoin de connaissances particulières. Ou, si vous ne voulez pas créer votre propre design à partir de zéro, Elementor Pro comprend également un certain nombre de modèles de page 404 prédéfinis que vous pouvez importer et personnaliser à votre guise.

Pour commencer, vous voudrez installer Elementor et Elementor Pro. Suivez ensuite ces étapes pour créer votre propre design de page 404 personnalisé…

1. Créer un nouveau modèle de page 404

Pour commencer, vous devez créer un nouveau modèle Elementor. Dans votre tableau de bord WordPress, accédez à Modèles → Générateur de thèmes:

L'administrateur WordPress avec Modèles → Générateur de thèmes sélectionné.

Ensuite, sélectionnez Single → Ajouter un nouveau. Cela affichera une page où vous pourrez choisir le modèle que vous souhaitez créer. Clique sur le Type de modèle menu déroulant et sélectionnez Célibataire. Ensuite, naviguez vers le Type de poste dérouler et cliquez 404.

Vous serez ensuite invité à nommer votre modèle. Vous êtes libre de le nommer comme bon vous semble, mais nous vous suggérons de vous en tenir à quelque chose que vous reconnaîtrez, comme «404 Page». Ceci fait, cliquez sur Créer un modèle et vous êtes prêt pour la prochaine étape.

Créer un modèle de page Elementor 404

Étape 2: Concevez votre page

Comme indiqué plus haut, une page 404 bien conçue peut empêcher les utilisateurs de quitter votre site lorsqu'ils en rencontrent un. Bien sûr, ils peuvent également augmenter l'engagement et réduire vos taux de rebond, raison pour laquelle cette étape est si importante.

Par conséquent, vous pouvez utiliser certaines stratégies pour créer votre page 404. Pour commencer, vous pouvez utiliser l'humour pour "adoucir le choc" et aider à éviter que les utilisateurs ne deviennent frustrés:

La page d'erreur Embrace Pet Insurance 404.

Une image comme celle-ci d’Embrace Pet Insurance contribue à rendre leur page 404 amusante et mignonne. Vous pouvez également utiliser des images intéressantes ou reflétant votre image de marque:

La page d'erreur Crunchbase 404.

Parmi les autres éléments que vous pouvez ajouter, vous trouverez des informations de contact, une barre de recherche (comme nous le faisons) et un lien vers votre page d'accueil. Vous pouvez également envisager d’ajouter des liens vers votre contenu le plus populaire, voire un sitemap, de la même manière que GitHub affiche au bas de sa page 404:

La page d'erreur GitHub 404.

La combinaison de ces fonctionnalités peut rendre divertissant la rencontre d’une page d’erreur 404. En fait, certaines personnes vont même délibérément mal taper une URL pour voir comment leur site favori a conçu la leur.

Pour concevoir votre page, vous pouvez commencer par l’un des modèles de page 404 d’Elementor, puis le personnaliser en fonction de votre image de marque et de votre voix à l’aide de l’interface visuelle de glisser-déposer d’Elementor:

Modèles de page Elementor 404

Elementor inclut tous les widgets dont vous aurez besoin, y compris un formulaire de recherche, afin que vous puissiez également créer votre modèle de page 404 à partir de zéro en utilisant l'interface glisser-déposer.

Si vous voulez un coup de main ici, nous avons un tutoriel sur l'utilisation d'Elementor. Bien que ce didacticiel se concentre sur la création d’une page de lancement de produit, vous pouvez appliquer les mêmes principes de base à la conception de pages 404.

Étape 3: publiez votre nouvelle page d'erreur 404

Il ne reste plus qu’à publier votre nouvelle page d’erreur 404.

Pour ce faire, cliquez sur Publier dans le coin inférieur gauche de l'interface Elementor. Cela ouvrira la Publier les paramètres popup, qui vous permet de contrôler où afficher votre modèle.

Elementor aura déjà sélectionné votre page 404, vous pouvez donc simplement cliquer sur Sauvegarder et fermer pour donner vie à votre nouveau modèle de page 404 personnalisé:

Publier le modèle Elementor

Désormais, chaque fois que quelqu'un clique sur un lien rompu ou saisit une URL de manière incorrecte, au lieu d'être perdu, il se retrouvera sur votre page d'erreur 404 personnalisée. Cela vous donnera une bien meilleure chance de garder les utilisateurs engagés et heureux pendant qu'ils naviguent sur votre site.

Conclusion

Aussi minutieux que vous puissiez être en matière de conception, les utilisateurs risquent de rencontrer une page d'erreur 404 sur votre site. Lorsqu'ils le font, l'optimisation de votre modèle de page 404 peut non seulement améliorer votre taux de rebond, mais également offrir une meilleure expérience utilisateur.

Cet article a expliqué à quel point il est facile d’utiliser Elementor et Elementor Pro construire une page 404 personnalisée. Il n’ya que trois étapes, récapitulons-les rapidement:

  1. Créez un nouveau modèle de page 404.
  2. Concevez votre page ou choisissez l’un des modèles Elementor.
  3. Publiez votre nouvelle page d'erreur 404.

Avez-vous des questions sur les pages d'erreur 404 ou sur la configuration d'une page dans WordPress? Demandez dans la section commentaires ci-dessous!

Guide gratuit

5 conseils essentiels pour accélérer
Votre site WordPress

Réduisez votre temps de chargement même de 50 à 80%
juste en suivant des conseils simples.

Partagez cet article

Newsletter

Inscrivez-vous à notre newsletter pour profiter de toutes nos astuces !

Laissez une réponse

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