Como Personalizar as Páginas de Erro Padrão do cPanel (403, 404, 500)
Olá, amigo(a) GeHost! 👋
Se você já se deparou com uma página de erro como 404 – Página não encontrada ou 500 – Erro interno do servidor no seu site, sabe como isso pode deixar o visitante confuso… ou até desistir de voltar!
A boa notícia é: você pode personalizar essas páginas para deixá-las mais amigáveis, profissionais e até com seu logo, cor e mensagem. E o melhor? É bem simples — e tudo isso direto no cPanel, o painel de controle da sua hospedagem.
Por que personalizar essas páginas?
Imagine um visitante que tenta acessar uma página que não existe… e encontra uma tela branca com texto técnico. Ele pode achar que o site está quebrado!
Com uma página personalizada, você transforma um erro em uma oportunidade: mostrar seu branding, dar um toque humano e até redirecionar o visitante para outra parte do site.
Passo a passo: Como fazer isso no cPanel
Antes de começar, certifique-se de estar logado no cPanel da sua conta. Se precisar, acesse o Painel do Cliente e entre com suas credenciais.
- Acesse o Gerenciador de Arquivos
No cPanel, localize o grupo Arquivos e clique em Gerenciador de Arquivos.
- Selecione a pasta principal
No Gerenciador de Arquivos, clique em public_html (essa é a pasta raiz do seu site).
- Verifique se já existe uma página de erro
Procure por arquivos como403.html,404.htmlou500.html. Se já existirem, você pode editá-los. Se não, crie-os. - Crie os arquivos de erro
Clique no botão Novo Arquivo e digite o nome do arquivo exatamente como:404.html403.html500.html
Após criar cada um, clique duas vezes nele para editá-lo.
- Edite o conteúdo da página
Abra o arquivo no editor de texto do cPanel e insira um conteúdo simples, como:<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Página não encontrada (404)</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; background: #f4f4f4; } .container { max-width: 600px; margin: 0 auto; padding: 30px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #e74c3c; } a { color: #3498db; text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <div class="container"> <h1>Oops! Página não encontrada.</h1> <p>A página que você está procurando não existe ou foi movida.</p> <p><a href="/">Voltar para a página inicial</a></p> </div> </body> </html>Essa é uma versão simples, mas você pode personalizar com seu logo, cores e mensagens. Basta usar HTML e CSS básico.
- Salve as alterações
Após editar cada arquivo, clique em Salvar no editor. Repita o processo para todos os arquivos. - Pronto! Teste o resultado
Abra seu navegador e acesse uma URL que não existe no seu site, comoseusite.com/pagina-inexistente. Você verá a sua página personalizada!
Dica extra: Use o mesmo estilo do seu site
Se você tem um site com uma paleta de cores e layout definidos, tente copiar o mesmo estilo nas páginas de erro. Isso cria uma experiência mais coerente para o visitante.
💡 Dica do Sensei: Use o mesmo CSS do seu site principal, ou crie um arquivo
erro.csse inclua-o noheaddos arquivos HTML. Assim, você mantém o design consistente!
Importante: O que não fazer
- Não substitua o arquivo
index.htmlpor uma página de erro — isso pode quebrar seu site principal. - Não use links externos para arquivos CSS ou JS — isso pode falhar em alguns navegadores.
- Não coloque códigos complexos ou scripts que não sejam seguros.
Se precisar de ajuda, estamos aqui!
Se você tiver dúvidas sobre como montar a página, como usar HTML/CSS ou se algo não estiver funcionando, é só entrar em contato com o nosso suporte — e lembre-se: você tem 30 dias grátis após a entrega para tirar todas as suas dúvidas.
Seu site é sua marca. Com uma página de erro bem-feita, você mostra que cuida de cada detalhe — mesmo nos momentos de erro. 🌟
Com carinho,
Sensei da GeHost
*Equipe de apoio com coração e código* ❤️