{"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\/pt\/como-criar-uma-pagina-404-personalizada-envolvente-em-elementor-para-uma-melhor-experiencia-do-utilizador","title":{"rendered":"Como criar uma p\u00e1gina 404 personalizada envolvente no Elementor para uma melhor experi\u00eancia do utilizador"},"content":{"rendered":"

Introdu\u00e7\u00e3o<\/h3>

Um erro \"404 Page Not Found\" pode perturbar a experi\u00eancia de navega\u00e7\u00e3o dos seus visitantes e lev\u00e1-los a abandonar o seu site. Em vez de uma p\u00e1gina de erro 404 padr\u00e3o, muitas vezes sem gra\u00e7a, um design personalizado oferece uma oportunidade valiosa para guiar os utilizadores de volta ao conte\u00fado crucial, melhorar a navega\u00e7\u00e3o e apresentar uma experi\u00eancia \u00fanica que se alinha com a sua marca. Embora o Elementor n\u00e3o configure automaticamente uma p\u00e1gina 404 personalizada, pode criar e integrar uma manualmente com ambos Elementor Pro<\/strong> e Elementor Gr\u00e1tis<\/strong>. Aqui, iremos abordar um processo passo-a-passo para cada vers\u00e3o do Elementor para fazer o cria\u00e7\u00e3o<\/strong> simples e eficaz.<\/p>

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

Criando uma p\u00e1gina 404 personalizada no Elementor: Passos detalhados<\/strong><\/p>

Configurar uma p\u00e1gina 404 personalizada com o Elementor Pro<\/h3>

Para os utilizadores do Elementor Pro, a op\u00e7\u00e3o Criador de temas<\/strong> simplifica a cria\u00e7\u00e3o e atribui\u00e7\u00e3o de uma p\u00e1gina 404. Esta funcionalidade permite-lhe designar uma p\u00e1gina modelo<\/strong> que ser\u00e1 automaticamente apresentado quando os utilizadores encontrarem uma p\u00e1gina em falta.<\/p>

Passo 1: Aceder ao Theme Builder<\/h4>
  1. No seu painel de controlo do WordPress, navegue at\u00e9 Modelos > Criador de temas<\/strong>.<\/li><\/ol>
    \"\"<\/figure><\/div>
    1. Clique em Adicionar novo<\/strong> e selecione 404 P\u00e1gina<\/strong> como o tipo de modelo.
      • Esta configura\u00e7\u00e3o abre uma tela em branco para que possa conceber a sua p\u00e1gina de erro 404 personalizada do zero<\/mark><\/strong>.<\/li><\/ul><\/li><\/ol>
        \"\"<\/figure><\/div>
        1. Clique no x para ir para a p\u00e1gina que.<\/li><\/ol>
          \"\"<\/figure><\/div>

          Passo 2: Conceber o esquema da p\u00e1gina<\/h4>
          1. Crie uma mensagem de erro amig\u00e1vel<\/strong>:
            • Utilize um T\u00edtulo<\/strong> widget<\/mark> para criar uma mensagem clara e de boas-vindas, como \"Oops! P\u00e1gina n\u00e3o encontrada\" ou \"Lamentamos, mas essa p\u00e1gina n\u00e3o existe\".<\/li><\/ul><\/li><\/ol>
              \"\"<\/figure><\/div>
              1. Adicionar liga\u00e7\u00f5es de navega\u00e7\u00e3o ou Bot\u00f5es<\/mark><\/strong>:
                • Inclua um ou mais bot\u00f5es que liguem a p\u00e1ginas populares, como a P\u00e1gina inicial<\/strong>, Blogue<\/strong>, ou Contacte-nos<\/strong>. Adicionar um Pesquise<\/strong> A barra tamb\u00e9m pode ser \u00fatil para os utilizadores que pretendem encontrar um conte\u00fado espec\u00edfico.<\/li>\n\n
                • Personalize cada bot\u00e3o (como \"Go Back Home\") definindo a liga\u00e7\u00e3o URL diretamente no Elementor.<\/li><\/ul><\/li><\/ol>
                  \"\"<\/figure><\/div>\n\n
                  \"\"<\/figure><\/div><\/div>
                  1. Inclua elementos visuais<\/strong>:
                    • Considere a possibilidade de adicionar imagens, \u00edcones ou anima\u00e7\u00f5es que estejam de acordo com o estilo da sua marca para manter os utilizadores envolvidos.<\/li><\/ul><\/li>\n\n
                    • Elementos opcionais<\/strong>:
                      • Adicionar elementos como anima\u00e7\u00f5es, \u00edcones ou um toque visual humor\u00edstico pode tornar a p\u00e1gina 404 mais atractiva.<\/li><\/ul><\/li><\/ol>
                        \"\"<\/figure><\/div>

                        Passo 3: Atribuir o modelo<\/h4>
                        1. Quando o desenho estiver finalizado, clique em Publicar<\/strong>.<\/li>\n\n
                        2. Defina o Condi\u00e7\u00e3o do ecr\u00e3<\/strong> como 404 P\u00e1gina<\/strong> para garantir que a p\u00e1gina aparece apenas para URLs de erro.<\/li>\n\n
                        3. Guarde e feche as defini\u00e7\u00f5es para confirmar a atribui\u00e7\u00e3o do modelo.<\/li><\/ol>
                          \"\"<\/figure><\/div>

                          Passo 4: Testar a p\u00e1gina 404<\/h4>
                          1. Para verificar se tudo funciona como planeado, navegue para um URL inexistente no seu site (por exemplo, yourwebsite.com\/thispagedoesnotexist).<\/li>\n\n
                          2. Verifique se a p\u00e1gina 404 \u00e9 apresentada corretamente e teste cada liga\u00e7\u00e3o ou bot\u00e3o para garantir que orientam os utilizadores como esperado.<\/li><\/ol>
                            \"\"<\/figure><\/div>

                            Criar uma p\u00e1gina 404 personalizada com o Elementor Free<\/h3>

                            O Elementor Free n\u00e3o oferece a funcionalidade Criador de temas<\/strong> mas pode criar uma p\u00e1gina 404 personalizada, concebendo um modelo e incorporando-o no ficheiro 404.php do seu tema.<\/p>

                            Passo 1: Conceber a sua p\u00e1gina 404<\/h4>
                            1. Crie uma nova p\u00e1gina<\/strong>:
                              • Aceda a P\u00e1ginas > Adicionar novo<\/strong> e d\u00ea-lhe um nome como \"P\u00e1gina 404 personalizada\".<\/li><\/ul><\/li><\/ol>
                                \"\"<\/figure><\/div>
                                1. Adicione elementos para uma navega\u00e7\u00e3o f\u00e1cil de utilizar<\/strong>:
                                  • Adicione um T\u00edtulo<\/strong> widget para a sua mensagem de erro, como \"P\u00e1gina n\u00e3o encontrada\" ou \"Desculpe, esta p\u00e1gina n\u00e3o existe\".<\/li>\n\n
                                  • Inclua um Bot\u00e3o<\/strong> widget de liga\u00e7\u00e3o a p\u00e1ginas essenciais e um Pesquise<\/strong> se quiser que os utilizadores localizem rapidamente o conte\u00fado.<\/li>\n\n
                                  • Utilize elementos visuais, \u00edcones ou imagens para tornar a p\u00e1gina visualmente apelativa.<\/li><\/ul><\/li><\/ol>
                                    \"\"<\/figure><\/div>
                                    1. Guardar como modelo<\/strong>:
                                      • Clique no bot\u00e3o Seta junto ao bot\u00e3o Atualizar\/Publicar<\/strong> e selecione Guardar como modelo<\/strong> para guardar o seu desenho.<\/li><\/ul><\/li><\/ol>
                                        \"\"<\/figure><\/div>
                                        \"\"<\/figure><\/div>

                                        Passo 2: Integrar o modelo com o seu tema<\/h4>
                                        1. Obtenha o c\u00f3digo curto do modelo<\/strong>:
                                          • Aceda a Modelos > Modelos guardados<\/strong> para encontrar e copiar o c\u00f3digo curto<\/mark> do seu modelo 404 recentemente guardado.<\/li><\/ul><\/li><\/ol>
                                            \"\"<\/figure>
                                            1. Edite o ficheiro 404.php<\/strong>:
                                              • Em Apar\u00eancia > Editor de ficheiros de temas<\/strong> (ou via FTP), encontre o ficheiro 404.php do seu tema em \/wp-content\/themes\/your-theme\/.<\/li><\/ul><\/li><\/ol>
                                                \"\"<\/figure>
                                                1. Insira o c\u00f3digo curto do modelo<\/strong>:
                                                  • Substitua o conte\u00fado de 404.php pelo seguinte c\u00f3digo, inserindo o shortcode do seu modelo em vez 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. Guardar altera\u00e7\u00f5es<\/strong> para o ficheiro 404.php.<\/li><\/ol>
                                                      \"\"<\/figure>
                                                      Passo 3: Testar a sua p\u00e1gina<\/h4>
                                                      • Para confirmar que a p\u00e1gina 404 \u00e9 apresentada como pretendido, navegue para um URL inexistente no seu site e verifique se todas as liga\u00e7\u00f5es e elementos est\u00e3o a funcionar corretamente.<\/li><\/ul>
                                                        Melhorar a p\u00e1gina 404 para uma melhor experi\u00eancia do utilizador<\/h3>
                                                        \"\"<\/figure><\/div>
                                                        Uma p\u00e1gina 404 personalizada \u00e9 mais do que apenas um espa\u00e7o reservado; \u00e9 uma oportunidade para manter os utilizadores envolvidos com op\u00e7\u00f5es de navega\u00e7\u00e3o \u00fateis e um pouco de personalidade. Aqui est\u00e3o algumas dicas para criar uma p\u00e1gina 404 eficaz:<\/p>
                                                        • Personalize a mensagem<\/strong>: Uma linguagem amig\u00e1vel, como \"Oops! Algo correu mal\" ou \"N\u00e3o conseguimos encontrar a p\u00e1gina\" pode melhorar a sua experi\u00eancia.<\/li>\n\n
                                                        • Destaque as liga\u00e7\u00f5es relevantes<\/strong>: Para orientar os utilizadores, inclua liga\u00e7\u00f5es para categorias populares ou para as \u00faltimas publica\u00e7\u00f5es do blogue.<\/li>\n\n
                                                        • Utilize elementos interactivos<\/strong>: As anima\u00e7\u00f5es simples ou os efeitos de pairar d\u00e3o-lhe um toque interativo.<\/li>\n\n
                                                        • Garanta a consist\u00eancia da marca<\/strong>: Reflicta as cores, os tipos de letra e o log\u00f3tipo do seu s\u00edtio Web na p\u00e1gina 404 para alinhar com o seu estilo geral.<\/li><\/ul>
                                                          Conclus\u00e3o<\/strong><\/h3>
                                                          Criar uma p\u00e1gina de erro 404 personalizada no Elementor ajuda os visitantes a manterem-se envolvidos mesmo quando chegam a uma p\u00e1gina de erro. O Elementor Pro facilita a atribui\u00e7\u00e3o desta p\u00e1gina utilizando o Theme Builder, enquanto o Elementor Free permite-lhe obter um efeito semelhante atrav\u00e9s da integra\u00e7\u00e3o de modelos. Seguir estes passos garante que os utilizadores ter\u00e3o sempre uma forma clara de regressar ao seu conte\u00fado, melhorando a navega\u00e7\u00e3o, minimizando a frustra\u00e7\u00e3o e melhorando a experi\u00eancia geral do utilizador no seu s\u00edtio.<\/p>","protected":false},"excerpt":{"rendered":"
                                                          Introdu\u00e7\u00e3o Um erro \"404 Page Not Found\" pode perturbar a experi\u00eancia de navega\u00e7\u00e3o dos seus visitantes e lev\u00e1-los a abandonar o seu site. Em vez de um...<\/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\/pt\/wp-json\/wp\/v2\/posts\/4920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/comments?post=4920"}],"version-history":[{"count":1,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/4920\/revisions"}],"predecessor-version":[{"id":4945,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/4920\/revisions\/4945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media\/4944"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media?parent=4920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/categories?post=4920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/tags?post=4920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}