Introdução

Um erro "404 Page Not Found" pode perturbar a experiência de navegação dos seus visitantes e levá-los a abandonar o seu site. Em vez de uma página de erro 404 padrão, muitas vezes sem graça, um design personalizado oferece uma oportunidade valiosa para guiar os utilizadores de volta ao conteúdo crucial, melhorar a navegação e apresentar uma experiência única que se alinha com a sua marca. Embora o Elementor não configure automaticamente uma página 404 personalizada, pode criar e integrar uma manualmente com ambos Elementor Pro e Elementor Grátis. Aqui, iremos abordar um processo passo-a-passo para cada versão do Elementor para fazer o criação simples e eficaz.

Criando uma página 404 personalizada no Elementor: Passos detalhados

Configurar uma página 404 personalizada com o Elementor Pro

Para os utilizadores do Elementor Pro, a opção Criador de temas simplifica a criação e atribuição de uma página 404. Esta funcionalidade permite-lhe designar uma página modelo que será automaticamente apresentado quando os utilizadores encontrarem uma página em falta.

Passo 1: Aceder ao Theme Builder

1. No seu painel de controlo do WordPress, navegue até Modelos > Criador de temas.

2. Clique em Adicionar novo e selecione 404 Página como o tipo de modelo.
   • Esta configuração abre uma tela em branco para que possa conceber a sua página de erro 404 personalizada do zero.

3. Clique no x para ir para a página que.

Passo 2: Conceber o esquema da página

1. Crie uma mensagem de erro amigável:
   • Utilize um Título widget para criar uma mensagem clara e de boas-vindas, como "Oops! Página não encontrada" ou "Lamentamos, mas essa página não existe".

2. Adicionar ligações de navegação ou Botões:
   • Inclua um ou mais botões que liguem a páginas populares, como a Página inicial, Blogue, ou Contacte-nos. Adicionar um Pesquise A barra também pode ser útil para os utilizadores que pretendem encontrar um conteúdo específico.
   • Personalize cada botão (como "Go Back Home") definindo a ligação URL diretamente no Elementor.

3. Inclua elementos visuais:
   • Considere a possibilidade de adicionar imagens, ícones ou animações que estejam de acordo com o estilo da sua marca para manter os utilizadores envolvidos.
4. Elementos opcionais:
   • Adicionar elementos como animações, ícones ou um toque visual humorístico pode tornar a página 404 mais atractiva.

Passo 3: Atribuir o modelo

1. Quando o desenho estiver finalizado, clique em Publicar.
2. Defina o Condição do ecrã como 404 Página para garantir que a página aparece apenas para URLs de erro.
3. Guarde e feche as definições para confirmar a atribuição do modelo.

Passo 4: Testar a página 404

1. Para verificar se tudo funciona como planeado, navegue para um URL inexistente no seu site (por exemplo, yourwebsite.com/thispagedoesnotexist).
2. Verifique se a página 404 é apresentada corretamente e teste cada ligação ou botão para garantir que orientam os utilizadores como esperado.

Criar uma página 404 personalizada com o Elementor Free

O Elementor Free não oferece a funcionalidade Criador de temas mas pode criar uma página 404 personalizada, concebendo um modelo e incorporando-o no ficheiro 404.php do seu tema.

Passo 1: Conceber a sua página 404

1. Crie uma nova página:
   • Aceda a Páginas > Adicionar novo e dê-lhe um nome como "Página 404 personalizada".

2. Adicione elementos para uma navegação fácil de utilizar:
   • Adicione um Título widget para a sua mensagem de erro, como "Página não encontrada" ou "Desculpe, esta página não existe".
   • Inclua um Botão widget de ligação a páginas essenciais e um Pesquise se quiser que os utilizadores localizem rapidamente o conteúdo.
   • Utilize elementos visuais, ícones ou imagens para tornar a página visualmente apelativa.

3. Guardar como modelo:
   • Clique no botão Seta junto ao botão Atualizar/Publicar e selecione Guardar como modelo para guardar o seu desenho.

Passo 2: Integrar o modelo com o seu tema

1. Obtenha o código curto do modelo:
   • Aceda a Modelos > Modelos guardados para encontrar e copiar o código curto do seu modelo 404 recentemente guardado.

2. Edite o ficheiro 404.php:
   • Em Aparência > Editor de ficheiros de temas (ou via FTP), encontre o ficheiro 404.php do seu tema em /wp-content/themes/your-theme/.

3. Insira o código curto do modelo:
   • Substitua o conteúdo de 404.php pelo seguinte código, inserindo o shortcode do seu modelo em vez 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

?>

4. Guardar alterações para o ficheiro 404.php.

Passo 3: Testar a sua página

• Para confirmar que a página 404 é apresentada como pretendido, navegue para um URL inexistente no seu site e verifique se todas as ligações e elementos estão a funcionar corretamente.

Melhorar a página 404 para uma melhor experiência do utilizador

Uma página 404 personalizada é mais do que apenas um espaço reservado; é uma oportunidade para manter os utilizadores envolvidos com opções de navegação úteis e um pouco de personalidade. Aqui estão algumas dicas para criar uma página 404 eficaz:

• Personalize a mensagem: Uma linguagem amigável, como "Oops! Algo correu mal" ou "Não conseguimos encontrar a página" pode melhorar a sua experiência.
• Destaque as ligações relevantes: Para orientar os utilizadores, inclua ligações para categorias populares ou para as últimas publicações do blogue.
• Utilize elementos interactivos: As animações simples ou os efeitos de pairar dão-lhe um toque interativo.
• Garanta a consistência da marca: Reflicta as cores, os tipos de letra e o logótipo do seu sítio Web na página 404 para alinhar com o seu estilo geral.

Conclusão

Criar uma página de erro 404 personalizada no Elementor ajuda os visitantes a manterem-se envolvidos mesmo quando chegam a uma página de erro. O Elementor Pro facilita a atribuição desta página utilizando o Theme Builder, enquanto o Elementor Free permite-lhe obter um efeito semelhante através da integração de modelos. Seguir estes passos garante que os utilizadores terão sempre uma forma clara de regressar ao seu conteúdo, melhorando a navegação, minimizando a frustração e melhorando a experiência geral do utilizador no seu sítio.