{"id":4920,"date":"2024-10-29T20:59:21","date_gmt":"2024-10-29T12:59:21","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=4920"},"modified":"2024-10-29T20:59:21","modified_gmt":"2024-10-29T12:59:21","slug":"how-to-create-an-engaging-custom-404-page-in-elementor-for-a-better-user-experience","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/fr\/comment-creer-une-page-404-personnalisee-et-attrayante-dans-elementor-pour-une-meilleure-experience-utilisateur","title":{"rendered":"Comment cr\u00e9er une page 404 personnalis\u00e9e dans Elementor pour une meilleure exp\u00e9rience utilisateur"},"content":{"rendered":"

Introduction<\/h3>

Une erreur \"404 Page Not Found\" peut perturber l'exp\u00e9rience de navigation de vos visiteurs et les amener \u00e0 abandonner votre site. Au lieu d'une page d'erreur 404 par d\u00e9faut, souvent fade, un design personnalis\u00e9 offre une opportunit\u00e9 pr\u00e9cieuse de guider les utilisateurs vers un contenu crucial, d'am\u00e9liorer la navigation et de pr\u00e9senter une exp\u00e9rience unique qui s'aligne avec votre marque. Bien qu'Elementor ne configure pas automatiquement une page 404 personnalis\u00e9e, vous pouvez en cr\u00e9er et en int\u00e9grer une manuellement \u00e0 l'aide des outils suivants Elementor Pro<\/strong> et Elementor Gratuit<\/strong>. Ici, nous allons couvrir un processus \u00e9tape par \u00e9tape pour chaque version d'Elementor afin de rendre le processus d'achat plus efficace. cr\u00e9ation<\/strong> simple et efficace.<\/p>

\"\"<\/figure><\/div>

Cr\u00e9er une page 404 personnalis\u00e9e dans Elementor : Etapes d\u00e9taill\u00e9es<\/strong><\/p>

Cr\u00e9er une page 404 personnalis\u00e9e avec Elementor Pro<\/h3>

Pour les utilisateurs d'Elementor Pro, l'option Constructeur de th\u00e8mes<\/strong> simplifie la cr\u00e9ation et l'attribution d'une page 404. Cette fonction vous permet de d\u00e9signer une page mod\u00e8le<\/strong> qui s'affichera automatiquement lorsque les utilisateurs rencontreront une page manquante.<\/p>

\u00c9tape 1 : Acc\u00e8s au concepteur de th\u00e8mes<\/h4>
  1. Dans votre tableau de bord WordPress, naviguez vers Mod\u00e8les > Constructeur de th\u00e8mes<\/strong>.<\/li><\/ol>
    \"\"<\/figure><\/div>
    1. Cliquez sur Ajouter un nouveau<\/strong> et s\u00e9lectionnez 404 Page<\/strong> comme type de mod\u00e8le.
      • Cette configuration vous permet de cr\u00e9er votre page d'erreur 404 personnalis\u00e9e. \u00e0 partir de z\u00e9ro<\/mark><\/strong>.<\/li><\/ul><\/li><\/ol>
        \"\"<\/figure><\/div>
        1. Cliquez sur le x pour acc\u00e9der \u00e0 la page qui.<\/li><\/ol>
          \"\"<\/figure><\/div>

          \u00c9tape 2 : Conception de la mise en page<\/h4>
          1. R\u00e9diger un message d'erreur convivial<\/strong>:
            • Utilisez un Rubrique<\/strong> widget<\/mark> pour cr\u00e9er un message clair et accueillant, tel que \"Oops ! Page introuvable\" ou \"Nous sommes d\u00e9sol\u00e9s, mais cette page n'existe pas\".<\/li><\/ul><\/li><\/ol>
              \"\"<\/figure><\/div>
              1. Ajouter des liens de navigation ou Boutons<\/mark><\/strong>:
                • Incluez un ou plusieurs boutons renvoyant \u00e0 des pages populaires, telles que la rubrique Page d'accueil<\/strong>, Blog<\/strong>ou Contactez nous<\/strong>. Ajouter un Recherche<\/strong> Les barres peuvent \u00e9galement \u00eatre utiles aux utilisateurs qui cherchent un contenu sp\u00e9cifique.<\/li>\n\n
                • Personnalisez chaque bouton (comme \"Retour \u00e0 la maison\") en d\u00e9finissant le lien URL directement dans Elementor.<\/li><\/ul><\/li><\/ol>
                  \"\"<\/figure><\/div>\n\n
                  \"\"<\/figure><\/div><\/div>
                  1. Inclure des \u00e9l\u00e9ments visuels<\/strong>:
                    • Pensez \u00e0 ajouter des images, des ic\u00f4nes ou des animations qui correspondent au style de votre marque afin de maintenir l'int\u00e9r\u00eat des utilisateurs.<\/li><\/ul><\/li>\n\n
                    • \u00c9l\u00e9ments facultatifs<\/strong>:
                      • L'ajout d'\u00e9l\u00e9ments tels que des animations, des ic\u00f4nes ou une touche visuelle humoristique peut rendre la page 404 plus attrayante.<\/li><\/ul><\/li><\/ol>
                        \"\"<\/figure><\/div>

                        \u00c9tape 3 : Attribution du mod\u00e8le<\/h4>
                        1. Une fois la conception finalis\u00e9e, cliquez sur Publier<\/strong>.<\/li>\n\n
                        2. R\u00e9glez le Condition d'affichage<\/strong> comme 404 Page<\/strong> pour que la page n'apparaisse que pour les URL d'erreur.<\/li>\n\n
                        3. Enregistrez et fermez les param\u00e8tres pour confirmer l'affectation du mod\u00e8le.<\/li><\/ol>
                          \"\"<\/figure><\/div>

                          \u00c9tape 4 : Test de la page 404<\/h4>
                          1. Pour v\u00e9rifier que tout fonctionne comme pr\u00e9vu, naviguez jusqu'\u00e0 une URL inexistante sur votre site (par exemple, yourwebsite.com\/thispagedoesnotexist).<\/li>\n\n
                          2. V\u00e9rifiez que la page 404 s'affiche correctement et testez chaque lien ou bouton pour vous assurer qu'ils guident les utilisateurs comme pr\u00e9vu.<\/li><\/ol>
                            \"\"<\/figure><\/div>

                            Construire une page 404 personnalis\u00e9e avec Elementor Gratuit<\/h3>

                            Elementor Free n'offre pas la fonction Constructeur de th\u00e8mes<\/strong> mais vous pouvez toujours cr\u00e9er une page 404 personnalis\u00e9e en concevant un mod\u00e8le et en l'int\u00e9grant dans le fichier 404.php de votre th\u00e8me.<\/p>

                            \u00c9tape 1 : Conception de votre page 404<\/h4>
                            1. Cr\u00e9er une nouvelle page<\/strong>:
                              • Aller \u00e0 Pages > Ajouter un nouveau<\/strong> et nommez-la quelque chose comme \"Page 404 personnalis\u00e9e\".<\/li><\/ul><\/li><\/ol>
                                \"\"<\/figure><\/div>
                                1. Ajouter des \u00e9l\u00e9ments pour une navigation conviviale<\/strong>:
                                  • Ajouter un Rubrique<\/strong> pour votre message d'erreur, tel que \"Page Not Found\" ou \"Sorry, this page doesn't exist\".<\/li>\n\n
                                  • Inclure un Bouton<\/strong> qui renvoie aux pages essentielles et un Recherche<\/strong> si vous souhaitez que les utilisateurs puissent localiser rapidement le contenu.<\/li>\n\n
                                  • Utilisez des \u00e9l\u00e9ments visuels, des ic\u00f4nes ou des images pour rendre la page visuellement attrayante.<\/li><\/ul><\/li><\/ol>
                                    \"\"<\/figure><\/div>
                                    1. Enregistrer comme mod\u00e8le<\/strong>:
                                      • Cliquez sur le bouton Fl\u00e8che \u00e0 c\u00f4t\u00e9 du bouton Mettre \u00e0 jour\/Publier<\/strong> et choisissez Enregistrer comme mod\u00e8le<\/strong> pour enregistrer votre dessin.<\/li><\/ul><\/li><\/ol>
                                        \"\"<\/figure><\/div>
                                        \"\"<\/figure><\/div>

                                        \u00c9tape 2 : Int\u00e9grer le mod\u00e8le \u00e0 votre th\u00e8me<\/h4>
                                        1. Obtenez le shortcode du mod\u00e8le<\/strong>:
                                          • Aller \u00e0 Mod\u00e8les > Mod\u00e8les enregistr\u00e9s<\/strong> pour trouver et copier le shortcode<\/mark> de votre mod\u00e8le 404 nouvellement enregistr\u00e9.<\/li><\/ul><\/li><\/ol>
                                            \"\"<\/figure>
                                            1. Modifiez le fichier 404.php<\/strong>:
                                              • En Apparence > Editeur de fichier de th\u00e8me<\/strong> (ou via FTP), trouvez le fichier 404.php de votre th\u00e8me sous \/wp-content\/themes\/votre-th\u00e8me\/.<\/li><\/ul><\/li><\/ol>
                                                \"\"<\/figure>
                                                1. Ins\u00e9rer le shortcode du mod\u00e8le<\/strong>:
                                                  • Remplacez le contenu de 404.php par le code suivant, en ins\u00e9rant le shortcode de votre mod\u00e8le \u00e0 la place de :<\/li><\/ul><\/li><\/ol>
                                                    <?php\n\n\/\/ Your theme's header and additional elements\n\n?>\n\n<div id="primary" class="content-area">\n\n  <main id="main" class="site-main" role="main">\n\n    <?php echo do_shortcode('[elementor-template id="123"]'); ?>\n\n  <\/main>\n\n<\/div>\n\n<?php\n\n\/\/ Your theme's footer and additional elements\n\n?><\/code><\/pre>
                                                    1. Enregistrer les modifications<\/strong> dans le fichier 404.php.<\/li><\/ol>
                                                      \"\"<\/figure>
                                                      \u00c9tape 3 : Test de votre page<\/h4>
                                                      • Pour confirmer que la page 404 s'affiche comme pr\u00e9vu, naviguez vers une URL inexistante sur votre site et v\u00e9rifiez que tous les liens et \u00e9l\u00e9ments fonctionnent correctement.<\/li><\/ul>
                                                        Am\u00e9liorer la page 404 pour une meilleure exp\u00e9rience utilisateur<\/h3>
                                                        \"\"<\/figure><\/div>
                                                        Une page 404 personnalis\u00e9e est plus qu'un simple emplacement ; c'est l'occasion de maintenir l'int\u00e9r\u00eat des utilisateurs gr\u00e2ce \u00e0 des options de navigation utiles et \u00e0 un peu de personnalit\u00e9. Voici quelques conseils pour cr\u00e9er une page 404 efficace :<\/p>
                                                        • Personnalisez le message<\/strong>: Un langage amical, tel que \"Oups ! Quelque chose s'est mal pass\u00e9\" ou \"Nous n'avons pas trouv\u00e9 la page\", peut am\u00e9liorer l'exp\u00e9rience.<\/li>\n\n
                                                        • Mettez en \u00e9vidence les liens pertinents<\/strong>: Pour guider les utilisateurs, incluez des liens vers les cat\u00e9gories populaires ou les derniers articles de blog.<\/li>\n\n
                                                        • Utilisez des \u00e9l\u00e9ments interactifs<\/strong>: De simples animations ou des effets de survol ajoutent une touche interactive.<\/li>\n\n
                                                        • Assurer la coh\u00e9rence de la marque<\/strong>: Refl\u00e9tez les couleurs, les polices et le logo de votre site web sur la page 404 afin de l'harmoniser avec votre style g\u00e9n\u00e9ral.<\/li><\/ul>
                                                          Conclusion<\/strong><\/h3>
                                                          La cr\u00e9ation d'une page d'erreur 404 personnalis\u00e9e dans Elementor aide les visiteurs \u00e0 rester engag\u00e9s m\u00eame lorsqu'ils atteignent une page d'erreur. Elementor Pro permet d'assigner facilement cette page en utilisant le constructeur de th\u00e8me, tandis qu'Elementor Free vous permet d'obtenir un effet similaire gr\u00e2ce \u00e0 l'int\u00e9gration de mod\u00e8les. En suivant ces \u00e9tapes, vous vous assurez que les utilisateurs auront toujours un moyen clair de revenir \u00e0 votre contenu, ce qui am\u00e9liore la navigation, minimise la frustration et am\u00e9liore l'exp\u00e9rience globale de l'utilisateur sur votre site.<\/p>","protected":false},"excerpt":{"rendered":"
                                                          Introduction L'erreur \"404 Page Not Found\" peut perturber l'exp\u00e9rience de navigation de vos visiteurs et les amener \u00e0 abandonner votre site. Au lieu d'une...<\/p>","protected":false},"author":10,"featured_media":4944,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61,57],"tags":[414,413],"class_list":["post-4920","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugin-usage-and-recommendation","category-plugins-theme","tag-customerrorpage","tag-elementor404page",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/4920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/comments?post=4920"}],"version-history":[{"count":1,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/4920\/revisions"}],"predecessor-version":[{"id":4945,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/4920\/revisions\/4945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/media\/4944"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/media?parent=4920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/categories?post=4920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/tags?post=4920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}