Introdução
A “404 Page Not Found” error can disrupt the browsing experience for your visitors and lead them to abandon your site. Instead of a default, often bland 404 error page, a custom design offers a valuable opportunity to guide users back to crucial content, improve navigation, and present a unique experience that aligns with your brand. While Elementor doesn’t automatically set up a custom 404 page, you can build and integrate one manually with both Elementor Pro e Elementor Grátis. Here, we’ll cover a step-by-step process for each version of Elementor to make the 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
- No seu painel de controlo do WordPress, navegue até Modelos > Criador de temas.
- 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.
- Clique no x para ir para a página que.
Passo 2: Conceber o esquema da página
- Crie uma mensagem de erro amigável:
- Utilize um Título widget to create a clear, welcoming message, such as “Oops! Page Not Found” or “We’re sorry, but that page doesn’t exist.”
- 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.
- Customize each button (like “Go Back Home”) by setting the URL link directly within Elementor.
- Inclua elementos visuais:
- Consider adding images, icons, or animations that align with your brand’s style to keep users engaged.
- 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
- Quando o desenho estiver finalizado, clique em Publicar.
- Defina o Condição do ecrã como 404 Página para garantir que a página aparece apenas para URLs de erro.
- Guarde e feche as definições para confirmar a atribuição do modelo.
Passo 4: Testar a página 404
- Para verificar se tudo funciona como planeado, navegue para um URL inexistente no seu site (por exemplo, yourwebsite.com/thispagedoesnotexist).
- 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
Elementor Free doesn’t offer the Criador de temas feature, but you can still create a custom 404 page by designing a template and embedding it into your theme’s 404.php file.
Passo 1: Conceber a sua página 404
- Crie uma nova página:
- Aceda a Páginas > Adicionar novo and name it something like “Custom 404 Page.”
- Adicione elementos para uma navegação fácil de utilizar:
- Adicione um Título widget for your error message, such as “Page Not Found” or “Sorry, this page doesn’t exist.”
- 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.
- 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
- Obtenha o código curto do modelo:
- Aceda a Templates > Saved Templates para encontrar e copiar o código curto do seu modelo 404 recentemente guardado.
- Edite o ficheiro 404.php:
- Em Appearance > Theme File Editor (or via FTP), find your theme’s 404.php file under /wp-content/themes/your-theme/.
- 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
?>- 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
A custom 404 page is more than just a placeholder; it’s an opportunity to keep users engaged with helpful navigation options and a bit of personality. Here are some tips for crafting an effective 404 page:
- Personalize a mensagem: Friendly language, such as “Oops! Something went wrong” or “We couldn’t find the page,” can improve the experience.
- 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: Reflect your website’s colors, fonts, and logo on the 404 page to align with your overall style.
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.