Comment créer une page 404 personnalisée dans Elementor pour une meilleure expérience utilisateur

Introduction

Une erreur "404 Page Not Found" peut perturber l'expérience de navigation de vos visiteurs et les amener à abandonner votre site. Au lieu d'une page d'erreur 404 par défaut, souvent fade, un design personnalisé offre une opportunité précieuse de guider les utilisateurs vers un contenu crucial, d'améliorer la navigation et de présenter une expérience unique qui s'aligne avec votre marque. Bien qu'Elementor ne configure pas automatiquement une page 404 personnalisée, vous pouvez en créer et en intégrer une manuellement à l'aide des outils suivants Elementor Pro et Elementor Gratuit. Ici, nous allons couvrir un processus étape par étape pour chaque version d'Elementor afin de rendre le processus d'achat plus efficace. création simple et efficace.

Créer une page 404 personnalisée dans Elementor : Etapes détaillées

Créer une page 404 personnalisée avec Elementor Pro

Pour les utilisateurs d'Elementor Pro, l'option Constructeur de thèmes simplifie la création et l'attribution d'une page 404. Cette fonction vous permet de désigner une page modèle qui s'affichera automatiquement lorsque les utilisateurs rencontreront une page manquante.

Étape 1 : Accès au concepteur de thèmes

  1. Dans votre tableau de bord WordPress, naviguez vers Modèles > Constructeur de thèmes.
  1. Cliquez sur Ajouter un nouveau et sélectionnez 404 Page comme type de modèle.
    • Cette configuration vous permet de créer votre page d'erreur 404 personnalisée. à partir de zéro.
  1. Cliquez sur le x pour accéder à la page qui.

Étape 2 : Conception de la mise en page

  1. Rédiger un message d'erreur convivial:
    • Utilisez un Rubrique widget pour créer un message clair et accueillant, tel que "Oops ! Page introuvable" ou "Nous sommes désolés, mais cette page n'existe pas".
  1. Ajouter des liens de navigation ou Boutons:
    • Incluez un ou plusieurs boutons renvoyant à des pages populaires, telles que la rubrique Page d'accueil, Blogou Contactez nous. Ajouter un Recherche Les barres peuvent également être utiles aux utilisateurs qui cherchent un contenu spécifique.
    • Personnalisez chaque bouton (comme "Retour à la maison") en définissant le lien URL directement dans Elementor.
  1. Inclure des éléments visuels:
    • Pensez à ajouter des images, des icônes ou des animations qui correspondent au style de votre marque afin de maintenir l'intérêt des utilisateurs.
  2. Éléments facultatifs:
    • L'ajout d'éléments tels que des animations, des icônes ou une touche visuelle humoristique peut rendre la page 404 plus attrayante.

Étape 3 : Attribution du modèle

  1. Une fois la conception finalisée, cliquez sur Publier.
  2. Réglez le Condition d'affichage comme 404 Page pour que la page n'apparaisse que pour les URL d'erreur.
  3. Enregistrez et fermez les paramètres pour confirmer l'affectation du modèle.

Étape 4 : Test de la page 404

  1. Pour vérifier que tout fonctionne comme prévu, naviguez jusqu'à une URL inexistante sur votre site (par exemple, yourwebsite.com/thispagedoesnotexist).
  2. Vérifiez que la page 404 s'affiche correctement et testez chaque lien ou bouton pour vous assurer qu'ils guident les utilisateurs comme prévu.

Construire une page 404 personnalisée avec Elementor Gratuit

Elementor Free n'offre pas la fonction Constructeur de thèmes mais vous pouvez toujours créer une page 404 personnalisée en concevant un modèle et en l'intégrant dans le fichier 404.php de votre thème.

Étape 1 : Conception de votre page 404

  1. Créer une nouvelle page:
    • Aller à Pages > Ajouter un nouveau et nommez-la quelque chose comme "Page 404 personnalisée".
  1. Ajouter des éléments pour une navigation conviviale:
    • Ajouter un Rubrique pour votre message d'erreur, tel que "Page Not Found" ou "Sorry, this page doesn't exist".
    • Inclure un Bouton qui renvoie aux pages essentielles et un Recherche si vous souhaitez que les utilisateurs puissent localiser rapidement le contenu.
    • Utilisez des éléments visuels, des icônes ou des images pour rendre la page visuellement attrayante.
  1. Enregistrer comme modèle:
    • Cliquez sur le bouton Flèche à côté du bouton Mettre à jour/Publier et choisissez Enregistrer comme modèle pour enregistrer votre dessin.

Étape 2 : Intégrer le modèle à votre thème

  1. Obtenez le shortcode du modèle:
    • Aller à Modèles > Modèles enregistrés pour trouver et copier le shortcode de votre modèle 404 nouvellement enregistré.
  1. Modifiez le fichier 404.php:
    • En Apparence > Editeur de fichier de thème (ou via FTP), trouvez le fichier 404.php de votre thème sous /wp-content/themes/votre-thème/.
  1. Insérer le shortcode du modèle:
    • Remplacez le contenu de 404.php par le code suivant, en insérant le shortcode de votre modèle à la place de :
<?php

// Your theme's header and additional elements

?>

<div id="primary" class="content-area">

  <main id="main" class="site-main" role="main">

    <?php echo do_shortcode('[elementor-template id="123"]'); ?>

  </main>

</div>

<?php

// Your theme's footer and additional elements

?>
  1. Enregistrer les modifications dans le fichier 404.php.

Étape 3 : Test de votre page

  • Pour confirmer que la page 404 s'affiche comme prévu, naviguez vers une URL inexistante sur votre site et vérifiez que tous les liens et éléments fonctionnent correctement.

Améliorer la page 404 pour une meilleure expérience utilisateur

Une page 404 personnalisée est plus qu'un simple emplacement ; c'est l'occasion de maintenir l'intérêt des utilisateurs grâce à des options de navigation utiles et à un peu de personnalité. Voici quelques conseils pour créer une page 404 efficace :

  • Personnalisez le message: Un langage amical, tel que "Oups ! Quelque chose s'est mal passé" ou "Nous n'avons pas trouvé la page", peut améliorer l'expérience.
  • Mettez en évidence les liens pertinents: Pour guider les utilisateurs, incluez des liens vers les catégories populaires ou les derniers articles de blog.
  • Utilisez des éléments interactifs: De simples animations ou des effets de survol ajoutent une touche interactive.
  • Assurer la cohérence de la marque: Reflétez les couleurs, les polices et le logo de votre site web sur la page 404 afin de l'harmoniser avec votre style général.

Conclusion

La création d'une page d'erreur 404 personnalisée dans Elementor aide les visiteurs à rester engagés même lorsqu'ils atteignent une page d'erreur. Elementor Pro permet d'assigner facilement cette page en utilisant le constructeur de thème, tandis qu'Elementor Free vous permet d'obtenir un effet similaire grâce à l'intégration de modèles. En suivant ces étapes, vous vous assurez que les utilisateurs auront toujours un moyen clair de revenir à votre contenu, ce qui améliore la navigation, minimise la frustration et améliore l'expérience globale de l'utilisateur sur votre site.

Articles liés

Réponses

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