Como Personalizar Sua Página de Login do WordPress (5 Maneiras Rápidas) 

Você quer criar uma página de login personalizada no WordPress?

Personalizar a página de login do WordPress é uma ótima maneira de melhorar o branding, a segurança e a experiência do usuário do seu site.

Se você gerencia um site de membros ou uma loja online, os usuários precisarão de uma página para fazer login. Portanto, personalizar a área de login padrão do WordPress ajudará você a refletir sua marca e oferecer uma melhor experiência ao usuário.

Este artigo mostrará como personalizar a página de login do WordPress em etapas fáceis.

Sumário

Benefícios de Personalizar Sua Página de Login do WordPress?

Dependendo da sua hospedagem, a página de login padrão do WordPress exibe o logotipo do WordPress. Ela também indica campos de formulário para os usuários inserirem seus nomes de usuário e senha.

Isso é aceitável se você for um pequeno blogueiro ou um site de pequena empresa, pois você provavelmente é a única pessoa com acesso de login ao wp-admin no backend.

Mas se o seu site permite que as pessoas se registrem e façam login no seu painel, você pode substituir a página de login padrão do WordPress e oferecer uma experiência melhor, mais profissional e amigável.

Os usuários se sentem mais à vontade com um design e logotipo de login personalizados porque reconhecem sua marca. Enquanto isso, enviá-los para uma tela de login que não se parece em nada com seu site pode parecer suspeito.

Além disso, a tela de login padrão do WordPress não tem nada além dos campos de entrada do formulário de login. Isso significa que você não pode facilmente deixar sua marca nela.

Exemplos de Design de Página de Login Personalizada no WordPress

Os proprietários de sites podem personalizar a página de login do WordPress de várias maneiras. Você pode adicionar diferentes estilos e imagens, vincular de volta à sua página inicial, incluir chamadas para ação para vender outros produtos e até mesmo adicionar ícones de perfil de mídia social.

Aqui estão alguns exemplos do que você pode fazer:

Personalização da Página de Login do WordPress MonsterInsights

MonsterInsights usa um layout de 2 colunas para o design de sua página de login. À esquerda está o formulário de login e à direita está uma CTA para seu produto irmão.

Este exemplo de página de login inclui uma imagem de fundo envolvente para criar uma experiência de login única.

Página de Login Personalizada do WordPress TED

A página de login da TED é outro exemplo com um design de 2 colunas. À esquerda, há uma imagem e um título envolventes, e a coluna da direita oferece várias maneiras de fazer login.

Os usuários também podem se inscrever para uma conta TED inserindo seus endereços de e-mail.

Página de Login Personalizada Church Motion Graphics

Esta página de login chama a atenção instantaneamente com seu fundo colorido. A imagem de fundo reflete o que o negócio faz e dá aos usuários uma ideia do que esperar.

O cabeçalho, rodapé e menus de navegação são os mesmos em todo o site. No entanto, o formulário de login é minimalista, contrastando a imagem vibrante do site com um fundo claro.

Aqui estão mais alguns exemplos de páginas de login para inspiração.

Com isso em mente, vamos explorar os diferentes métodos para personalizar sua página de login no WordPress. Prometemos que não envolverá nenhum CSS ou HTML personalizado complicado.

Vamos guiá-lo na criação de uma página de login personalizada no WordPress usando os melhores plugins do WordPress para essa tarefa, SeedProd e WPForms.

Como Personalizar a Página de Login do WordPress Usando SeedProd

SeedProd é o melhor construtor de landing pages e construtor de temas do WordPress com funcionalidade de modo de "em breve" e manutenção. Assim como o Elementor, ele permite que você crie qualquer tipo de landing page ou tema no WordPress com seu construtor de arrastar e soltar amigável para iniciantes.

Com toneladas de temas responsivos do WordPress e modelos de landing page, você pode criar impressionantes:

• Páginas "Em Breve"
• Páginas de manutenção
• Páginas de vendas
• Páginas de registro de webinar
• Páginas de captura de leads
• Páginas de erro 404
• Páginas de agradecimento do WordPress
• Páginas de login personalizadas

Com o modo de página de login front-end integrado e o bloco de formulário de login, você pode transformar completamente sua página de login do WordPress. Os usuários podem fazer login e logout rapidamente, e funciona com qualquer tema do WordPress.

O melhor de tudo é que o SeedProd é rápido, sem excesso de recursos e não vai deixar seu site lento. Ao contrário de outros plugins de construtor de landing pages, seu foco é gerar leads e resultados para o seu negócio.

Observação: Existe uma versão gratuita do SeedProd no WordPress.org. No entanto, usaremos o SeedProd Pro para os recursos avançados de personalização e modos de página de login.

Siga as etapas abaixo para estilizar a página de login padrão do WordPress com o personalizador de página de login personalizado do SeedProd.

Passo 1: Instalar e Ativar o SeedProd

O primeiro passo é baixar o plugin SeedProd e instalá-lo em seu site WordPress.

Se você não está familiarizado com isso, confira este guia passo a passo para instalar um plugin do WordPress.

Após instalar e ativar o plugin, você verá a página de boas-vindas do SeedProd em sua área de painel de administração do WordPress. É aqui que você pode inserir seus detalhes de licença e assistir ao vídeo de início rápido.

Após inserir sua chave de licença, clique no botão Criar sua primeira página.

Etapa 2: Editar sua Página de Login do WordPress

Após clicar para criar uma nova página no SeedProd, você verá a seguinte visão geral:

Estes são os diferentes modos de página que você pode habilitar no SeedProd. Para este tutorial, precisamos do modo Página de Login.

Então, prossiga e clique em Editar Página sob o título Página de Login.

Etapa 3: Escolher um Modelo de Página de Login Personalizado do WordPress

Você verá a biblioteca de modelos de landing page do SeedProd na próxima tela. Cada modelo é multifuncional e você pode personalizá-los no construtor de páginas visual.

Inclui modelos de mensagem de erro 404, modelos de página de vendas, páginas em breve, etc.

Clicar no botão Login exibe todos os modelos de página de login que você pode usar. Basta passar o mouse sobre o modelo que você mais gosta e clicar no ícone de marca de seleção.

Para este guia, escolheremos a Página de Login 8.

Após escolher seu modelo de página de login do WordPress, você verá um pop-up pedindo para inserir um nome e URL de página personalizada.

Clique no botão Salvar e Iniciar Edição da Página para iniciá-la no editor de arrastar e soltar.

Etapa 4: Personalize sua Página de Login do WordPress

O editor de páginas de destino de arrastar e soltar da SeedProd tem 2 seções distintas. Você verá os blocos de página e seções que pode usar à esquerda. E no lado direito, há uma prévia ao vivo da sua página de destino.

Para adicionar novo conteúdo à sua página de login, arraste um bloco da esquerda e solte-o em sua página. Por exemplo, você pode adicionar um logotipo de login à sua página com alguns cliques.

Clicar em qualquer bloco em sua página permite que você personalize o conteúdo. Por exemplo, clicar no formulário de login mostra as configurações do Bloco de Login da SeedProd no painel esquerdo.

Nessa área, você pode personalizar os rótulos do seu formulário de login, mostrar e ocultar campos de nome e senha, e personalizar o texto e a caixa de seleção do botão.

Você pode escolher entre vários estilos diferentes de formulário de login quando clica na guia Modelos.

Esta é uma maneira fácil de personalizar seu formulário sem nenhum conhecimento técnico. Basta escolher seu estilo preferido, que é exibido instantaneamente em seu formulário.

Adicionar conteúdo extra à sua página de login é igualmente fácil. Você pode adicionar botões, colunas, imagens e outros elementos focados em layout a quaisquer blocos padrão.

Por outro lado, Blocos Avançados ajudam a gerar leads para o seu negócio.

Com alguns cliques, você pode incorporar:

• Sorteios
• Formulários de contato
• Formulários de optin
• Contadores regressivos
• Barras de progresso
• Botões de perfil social
• Botões de compartilhamento em mídias sociais
• Produtos WooCommerce
• E mais.

Esta é uma maneira fantástica de transformar sua página de login em uma máquina de geração de leads. Por exemplo, você pode mostrar aos usuários um sorteio em sua página de login para aumentar seus seguidores sociais, aumentar o reconhecimento da marca e até mesmo impulsionar sua lista de e-mails.

Além de blocos individuais, o SeedProd também tem Seções de página de destino. Essas são áreas da página que você não precisa construir manualmente, bloco por bloco. Você pode ver as diferentes seções clicando na guia Seções.

A partir daí, você pode escolher uma nova:

• Cabeçalho
• Área principal
• Chamada para Ação
• Seção de FAQ
• Área de recursos
• Rodapé

E adicioná-los à sua página automaticamente.

Você vai querer alterar o plano de fundo, as fontes e as cores da sua página de login. É demorado fazer isso individualmente para cada bloco em sua página.

Felizmente, o SeedProd permite que você controle essas configurações globalmente. Basta clicar no ícone de engrenagem no canto inferior direito da sua tela para ver o painel Configurações Globais.

Na guia Fontes, você pode alterar as fontes e os pesos de seus cabeçalhos e corpo. Basta escolher um novo tamanho ou peso de fonte nos menus suspensos.

Você pode navegar pela biblioteca de combinações de fontes do SeedProd clicando no botão Temas de Fontes.

Isso mostrará quais fontes ficam melhores juntas para que você possa clicar uma vez e adicioná-las à sua página.

Você pode selecionar diferentes cores para links globais, cabeçalhos, texto, botões e planos de fundo com a ferramenta de seleção de cores.

Ou, você pode clicar no botão Paletas de Cores para escolher entre mais de 20 esquemas de cores.

A seção Plano de Fundo oferece uma maneira fácil de personalizar o plano de fundo da sua página de login. Você pode definir uma cor sólida ou gradiente de plano de fundo ou fazer upload de uma imagem de plano de fundo em tela cheia.

Clique no ícone de lixeira no painel de configurações de fundo para remover a imagem existente.

Você pode clicar no botão Usar sua própria imagem para selecionar uma nova imagem do seu computador ou da biblioteca de mídia do WordPress. A partir daí, você pode ajustar o tamanho do fundo, a repetição do fundo e outras opções.

Você também pode adicionar um vídeo de fundo ou uma apresentação de slides de fundo selecionando o alternador para cada configuração.

Lembre-se de clicar em Salvar para armazenar suas configurações de personalização.

Etapa 5: Configure as Configurações da sua Página de Login do WordPress

Com o design da sua página de login pronto, é hora de configurar algumas configurações necessárias.

Primeiro, conecte seu serviço de marketing por e-mail. Isso é útil se você tiver um formulário de optin em sua página de login e desejar coletar os endereços de e-mail dos usuários.

Para fazer isso, clique na guia Conectar na parte superior da tela, escolha seu serviço de e-mail preferido e siga as etapas para vincular sua conta.

O SeedProd se integra a serviços populares de newsletter por e-mail, incluindo:

• ActiveCampaign
• AWeber
• Campaign Monitor
• Constant Contact
• ConvertKit
• Drip
• GetResponse
• iContact
• Mad Mimi
• Sendy
• Mailchimp

Não há necessidade de se preocupar se você não tiver um provedor de e-mail. Você ainda pode coletar endereços de e-mail com o recurso de gerenciamento de assinantes do SeedProd.

Sempre que alguém se inscrever através da sua página de destino, os detalhes serão armazenados automaticamente em seu site WordPress. Você pode ver seus assinantes acessando SeedProd » Assinantes no seu painel do WordPress.

A próxima etapa é clicar na guia Configurações da Página na parte superior da tela.

Nesta página, você pode alterar as seguintes configurações em sua página de destino:

• Detalhes gerais – Altere o nome e a URL da sua página e defina-a como rascunho ou publicada.
• SEO – Edite o título SEO da sua página, meta descrição, etc., através de um plugin de SEO como All in One SEO.
• Análise – Visualize o desempenho da sua página de login usando um plugin de análise como MonsterInsights.
• Scripts – Insira scripts de rastreamento e retargeting, como cookies ou pixels de rastreamento do Facebook.

Lembre-se de clicar no botão Salvar antes de passar para a próxima etapa.

Etapa 6: Verifique se sua Página de Login é Amigável para Dispositivos Móveis

Qualquer página da web que você publicar deve ser responsiva para dispositivos móveis. Se não for, é mais difícil para os usuários de dispositivos móveis navegarem e usarem seu site.

Além de nossos modelos de página de destino responsivos para dispositivos móveis, o SeedProd tem uma opção útil de visualização móvel. Isso permitirá que você garanta que sua página de login fique ótima em todos os dispositivos.

Para visualizar a pré-visualização móvel da sua página de login do WordPress, clique no ícone de pré-visualização móvel na parte inferior da tela.

Isso mostra sua página de login como os usuários de dispositivos móveis a veriam. Com a visualização de desktop, você pode editá-la como faria, e o SeedProd salvará as alterações em ambas as visualizações.

Etapa 7: Publique sua Página de Login Personalizada do WordPress

Agora que você criou sua página de login personalizada do WordPress e a verificou em dispositivos móveis, é hora de torná-la ativa. Clique na seta para baixo ao lado do botão Salvar verde e selecione Publicar para fazer isso.

Depois, você verá um pop-up informando que sua página está ativa.

Vá em frente e clique no botão Ver Página Publicada para ver como ela fica.

A última coisa que você precisa fazer é habilitar o modo de página de login em sua área de administração do WordPress.

Clique no ícone "X" para sair do construtor de páginas e ver seu painel de páginas de destino do SeedProd.

Em seguida, sob o título Página de Login, mude o alternador de inativo para Ativo.

Parabéns! Agora qualquer pessoa que visitar sua página de login do WordPress verá seu design personalizado.

Personalizar a Página de Login do WordPress Usando WPForms

O segundo método para personalizar a tela de login do WordPress que abordaremos hoje envolve o uso do popular plugin WPForms.

WPForms é o melhor construtor de formulários de arrastar e soltar para WordPress. E o que você talvez não saiba é que pode usar seu prático complemento de formulário de registro de usuário para criar uma página de login para o seu site.

Com mais de 3 milhões de proprietários de sites usando o WPForms para criar formulários e pesquisas mais inteligentes, você pode ter certeza de que está em boas mãos.

Portanto, se você não precisa de um plugin de formulário dedicado à criação de páginas de login, siga este tutorial passo a passo para criar um formulário de login personalizado do WordPress usando o WPForms. O guia também mostrará como adicionar um link de senha perdida ao seu formulário e exibir seu formulário de login usando um shortcode.

Como Personalizar a Página de Login do WordPress Manualmente

Se você prefere fazer alterações ou adicionar estilos personalizados à sua página de login existente em vez de criar uma página de login totalmente nova ou usar um plugin de login do WordPress, você pode. Este método envolve adicionar código ao arquivo functions.php do seu tema ou a um plugin específico do site.

É mais difícil do que usar um construtor de páginas ou o personalizador do WordPress, então pode não atender às suas necessidades.

Se você é novo nisso, pode consultar este guia sobre como adicionar trechos de código no WordPress. Isso é para que você não quebre seu site acidentalmente.

Agora adicione o seguinte código ao arquivo functions.php do seu tema:

//Custom login page
function clp_login_head() {
         
    echo '<style>'; //Begin custom styles
    echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
    echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
    echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
    echo '</style>'; //End custom styles
         
}
add_action('login_head', 'clp_login_head');

Você pode alterar o CSS e o URL da imagem usando o código acima. Isso adicionará estilos personalizados à sua página de login do WordPress.

Exiba seu formulário de login do WordPress em qualquer lugar sem um plugin

Você pode adicionar este código ao arquivo de modelo do seu tema se quiser exibir seu formulário de login do WordPress em qualquer página sem um plugin de login do WordPress, widget de login na barra lateral ou área de rodapé.

<?php
          wp_login_form();
?>

Este código exibirá apenas a página de login geral do WordPress no local onde você adiciona o código.

Se você quiser adicionar uma página de formulário personalizado do WordPress com campos e opções adicionais, você pode usar este código:

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
wp_login_form($args);
?>

Personalizar o Logo e URL de Login do WordPress

Você não precisa sempre criar uma página de login personalizada para o seu site WordPress. Às vezes, você pode simplesmente alterar o logotipo e o link do logotipo na página de login padrão.

Se você quiser alterar o logotipo na tela de login para o seu, você pode facilmente usar um plugin para WordPress.

Para isso, primeiro instale e ative o plugin Colorlib Login Customizer. Após ativá-lo, navegue até Aparência » Personalizar no seu painel do WordPress e clique no novo item ‘Colorlib Login Customizer’.

O personalizador carregará sua tela de login padrão do WordPress com as configurações de personalização à esquerda e uma visualização ao vivo à direita.

Para substituir o logotipo padrão do WordPress pelo seu, clique na guia Opções de logotipo.

Agora você pode ocultar o logotipo do WordPress, carregar seu logotipo personalizado e alterar seu URL e texto.

Além disso, você pode alterar o tamanho do texto e a largura e altura do seu logotipo.

Se desejar, você pode até personalizar completamente a página de login padrão do WordPress com colunas, imagens de fundo, cores personalizadas e muito mais. Certifique-se de publicar as alterações quando estiver satisfeito com o novo logotipo da sua página de login.

Personalizar a Mensagem de Erro da Página de Login do WordPress

Se um usuário inserir o nome de usuário ou senha incorretos no WordPress, ele verá notificações de erro padrão. Essas mensagens, como "Nome de usuário inválido" ou "O endereço de e-mail não está correto", explicam claramente qual é o problema.

LoginPress é uma ferramenta que você pode usar para modificar essas mensagens de erro de login. Por exemplo, você pode querer adicionar mais detalhes às mensagens padrão para mostrar como corrigi-las.

No entanto, embora isso possa ajudar usuários legítimos a acessar suas contas, pode inadvertidamente ajudar hackers. Eles geralmente tentam invadir sites usando combinações de nomes de usuário e senhas populares. As notificações de erro padrão podem ajudar os hackers a saber quando eles inseriram o nome de usuário ou senha corretos.

Como medida de proteção, você pode querer uma notificação de erro mais generalizada. Para modificá-las, escolha Mensagens de Erro no menu Personalizador do WordPress:

A partir daí, você pode fazer as alterações que desejar na mensagem de erro de login. Elas são compatíveis com formatação HTML, permitindo que você inclua recursos estilísticos como negrito ou itálico em texto significativo.

Testando Sua Página de Login Personalizada

Testar é uma etapa essencial no processo de personalização da sua página de login do WordPress. Aqui está um breve guia sobre como realizar o teste:

• Carregamento da Página: Verifique se a página carrega corretamente, sem falhas ou elementos quebrados.
• Logo e Design: Certifique-se de que o novo logotipo e design apareçam como esperado.
• Teste de Funcionalidade: Tente fazer login com seu nome de usuário e senha. Certifique-se de que o processo seja tranquilo e bem-sucedido.
• Mensagens de Erro: Insira credenciais de login incorretas e verifique se as mensagens de erro são exibidas adequadamente.
• Recurso "Esqueci a Senha": Teste o recurso "Esqueci a Senha" para garantir que ele envie um e-mail com o link de redefinição de senha corretamente.
• URL Personalizada: Se você definiu uma URL personalizada para a página de login, verifique se ela redireciona corretamente para a nova página de login.
• Responsividade: Verifique a aparência e a usabilidade da página em diferentes dispositivos (celular, tablet e desktop) para garantir que ela seja responsiva e amigável.

Perguntas Frequentes sobre Personalização da Página de Login do WordPress

É isso!

Agora você sabe como criar uma página de login personalizada no WordPress. Você pode manter seu site WordPress com aparência profissional e oferecer uma excelente experiência ao usuário para seus clientes.

Experimente o SeedProd hoje mesmo para personalizar facilmente sua página de login do WordPress. Com o SeedProd, você pode alterar cores, fontes, logotipo e muito mais, tudo sem escrever nenhum código.

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.