Como personalizar sua página de login do WordPress (5 maneiras rápidas) 

Deseja criar uma página de login personalizada do WordPress?

A personalização da página de login do WordPress é uma ótima maneira de melhorar a marca, a segurança e a experiência do usuário do seu site.

Se você administra um site de associação ou uma loja on-line, os usuários precisarão de uma página para fazer login. Portanto, a personalização da área de login padrão do WordPress o ajudará a refletir sua marca e a oferecer uma melhor experiência ao usuário.

Este artigo mostrará a você como personalizar a página de login do WordPress em etapas simples.

Índice

Benefícios de personalizar sua página de login do WordPress?

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

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

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

Os usuários se sentem mais à vontade com um design e um logotipo de login personalizados porque reconhecem a sua marca. Enquanto isso, enviá-los para uma tela de login que não se parece em nada com o 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 colocar seu selo nela.

Exemplos de design de página de login personalizada do WordPress

Os proprietários de sites podem personalizar a página de login do WordPress de várias maneiras. É possível adicionar diferentes estilos e imagens, criar links para a página inicial, incluir calls-to-action 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 MonsterInsights WordPress

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

Esse exemplo de página de login inclui uma imagem de fundo atraente para criar uma experiência de login exclusiva.

Página de login personalizada do TED no WordPress

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

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

Página de login personalizada da Church Motion Graphics

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

O cabeçalho, o rodapé e os menus de navegação são os mesmos em todo o site. No entanto, o formulário de login é minimalista, contrastando a imagem brilhante 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 isso não envolverá nenhum CSS ou HTML personalizado complicado.

Vamos orientá-lo na criação de uma página de login personalizada do WordPress usando os melhores plug-ins do WordPress para esse trabalho, o SeedProd e o WPForms.

Como personalizar a página de login do WordPress usando o SeedProd

O SeedProd é o melhor construtor de páginas de destino e de temas do WordPress com funcionalidade de modo de manutenção e em breve. Assim como o Elementor, ele permite que você crie qualquer tipo de página de destino ou tema no WordPress com seu construtor de arrastar e soltar fácil para iniciantes.

Com vários temas responsivos para WordPress e modelos de página de destino, você pode criar uma página impressionante:

• Páginas em breve
• Páginas de manutenção
• Páginas de vendas
• Páginas de registro de webinar
• Páginas de aperto 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 de 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 isso funciona com qualquer tema do WordPress.

O melhor de tudo é que o SeedProd é rápido, não tem inchaço e não deixa seu site lento. Ao contrário de outros plug-ins de criação de landing pages, seu foco está na geração de leads e resultados para sua empresa.

Observação: há uma versão gratuita do SeedProd no WordPress.org. No entanto, usaremos o SeedProd Pro para obter os recursos avançados de personalização e os 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.

Etapa 1: Instalar e ativar o SeedProd

A primeira etapa é fazer o download do plug-in SeedProd e instalá-lo em seu site WordPress.

Se você não estiver familiarizado com isso, confira este guia passo a passo para instalar um plug-in do WordPress.

Depois de instalar e ativar o plug-in, você verá a página de boas-vindas do SeedProd na área do painel de administração do WordPress. É aqui que você pode inserir os detalhes da sua licença e assistir ao vídeo de início rápido.

Depois de inserir sua chave de licença, clique no botão Create Your First Page (Criar sua primeira página ).

Etapa 2: Editar sua página de login do WordPress

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

Esses são os diferentes modos de página que você pode ativar no SeedProd. Para este tutorial, precisamos do modo de página de login.

Portanto, clique em Edit Page (Editar página ) sob o título Login Page (Página de login).

Etapa 3: Escolha um modelo personalizado de página de login do WordPress

Você verá a biblioteca de modelos de página de destino do SeedProd na próxima tela. Cada modelo é multiuso e você pode personalizá-los no construtor de páginas visuais.

Inclui modelos de mensagens de erro 404, modelos de páginas de vendas, páginas de lançamento em breve etc.

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

Para este guia, escolheremos Login Page 8.

Depois de escolher o modelo de página de login do WordPress, você verá uma janela pop-up solicitando a inserção de um nome de página e URL personalizados.

Clique no botão Salvar e começar a editar a 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ágina de destino de arrastar e soltar do SeedProd tem duas seções distintas. Você verá os blocos e as seções da página que podem ser usados à esquerda. E, no lado direito, há uma visualização ao vivo de 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 apenas alguns cliques.

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

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

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

Essa é uma maneira fácil de personalizar seu formulário sem nenhum conhecimento técnico. Basta escolher o estilo de sua preferência, que será 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 com foco no layout a qualquer bloco padrão.

Por outro lado, os blocos avançados ajudam a gerar leads para sua empresa.

Com alguns cliques, você pode incorporar:

• Brindes
• Formulários de contato
• Formulários Optin
• Temporizadores de contagem regressiva
• Barras de progresso
• Botões de perfil social
• Botões de compartilhamento de mídia social
• Produtos do WooCommerce
• E mais.

Essa é 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 brinde na sua página de login para aumentar seus seguidores sociais, aumentar o conhecimento da marca e até mesmo aumentar sua lista de e-mails.

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

A partir daí, você pode escolher um novo:

• Cabeçalho
• Área do herói
• Chamada para ação
• Seção de perguntas frequentes
• Área de recursos
• Rodapé

E adicione-os à sua página automaticamente.

Você deverá alterar o plano de fundo, as fontes e as cores da página de login. É demorado fazer isso individualmente para cada bloco de 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 tela para ver o painel Global Settings.

Na guia Fonts (Fontes ), você pode alterar as fontes e os pesos do cabeçalho e do 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 Font Themes (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 cores diferentes para links globais, cabeçalhos, textos, botões e planos de fundo com a ferramenta de seleção de cores.

Ou você pode clicar no botão Color Palettes (Paletas de cores ) para escolher entre mais de 20 esquemas de cores.

A seção Background (Plano de fundo ) oferece uma maneira fácil de personalizar o plano de fundo da página de login. Você pode definir uma cor de fundo sólida ou gradiente ou carregar uma imagem de fundo de largura total.

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

Você pode clicar no botão Use Your Own Image (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 plano de fundo, a repetição do plano de fundo e outras opções.

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

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

Etapa 5: Configure as definições da página de login do WordPress

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

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

Para fazer isso, clique na guia Connect (Conectar ) na parte superior da tela, escolha o serviço de e-mail de sua preferência e siga as etapas para vincular sua conta.

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

• ActiveCampaign
• AWeber
• Monitor de campanha
• Contato constante
• ConvertKit
• Gotejamento
• GetResponse
• iContact
• Mad Mimi
• Sendy
• Mailchimp

Não é preciso 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 inscreve por meio de sua landing page, os detalhes dessa pessoa são armazenados automaticamente em seu site do WordPress. Você pode visualizar seus assinantes acessando SeedProd " Subscribers no painel do WordPress.

A próxima etapa é clicar na guia Page Settings (Configurações da página ) na parte superior da tela.

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

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

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

Etapa 6: Verifique se sua página de login é compatível com dispositivos móveis

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

Além dos 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 tenha uma ótima aparência em todos os dispositivos.

Para visualizar a visualização móvel da página de login do WordPress, clique no ícone de 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 para 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 colocá-la no ar. Clique na seta para baixo ao lado do botão verde Save (Salvar) e selecione Publish (Publicar) para fazer isso.

Em seguida, você verá uma janela pop-up informando que sua página está ativa.

Clique no botão See Live Page para ver como ficou.

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

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

Em seguida, no título Página de login, alterne 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 plug-in WPForms.

O WPForms é o melhor construtor de formulários de arrastar e soltar para WordPress. E o que você talvez não perceba é que pode usar o prático complemento User Registration Form 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 plug-in 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 informará como adicionar um link de senha perdida ao formulário e exibir o formulário de login usando um shortcode.

Como personalizar manualmente a página de login do WordPress

Se você preferir fazer alterações ou adicionar um estilo personalizado à sua página de login existente em vez de criar uma página de login totalmente nova ou usar um plug-in de login do WordPress, é possível. Esse método envolve a adição de código ao arquivo functions.php do seu tema ou em um plug-in específico do site.

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

Se você não tem experiência com isso, consulte este guia sobre como adicionar trechos de código no WordPress. Isso é para que você não danifique 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á um estilo personalizado à sua página de login do WordPress.

Mostre seu formulário de login do WordPress em qualquer lugar sem um plug-in

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

<?php
          wp_login_form();
?>

Esse código exibirá apenas a página de login geral do WordPress no local em que você adicionar o código.

Se você quiser adicionar uma página de formulário personalizada do WordPress com campos e opções adicionais, poderá 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 logotipo e o URL de login do WordPress

Nem sempre é necessário criar uma página de login personalizada para o seu site WordPress. Às vezes, você pode simplesmente alterar o logotipo e o link para o logotipo na página de login padrão.

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

Para isso, primeiro instale e ative o plug-in Colorlib Login Customizer. Depois de ativá-lo, navegue até Appearance " Customize (Aparência " Personalizar ) em seu administrador do WordPress e clique no novo item "Colorlib Login Customizer" (Personalizador de login Colorlib).

O personalizador carregará sua tela de login padrão do WordPress com 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 o URL e o texto.

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

Se quiser, você pode até mesmo 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 página de login.

Personalizar a mensagem de erro da página de login do WordPress

Se um usuário digitar o nome de usuário ou a senha errados 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.

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

No entanto, embora isso possa ajudar os usuários genuínos a acessar suas contas, pode, inadvertidamente, ajudar os hackers. Eles geralmente tentam se infiltrar em 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 a senha corretos.

Como medida de proteção, talvez você queira uma notificação de erro mais generalizada. Para modificá-las, escolha Error Messages (Mensagens de erro) no menu WordPress Customizer (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 a formatação HTML, permitindo que você inclua recursos estilísticos como negrito ou itálico em textos significativos.

Teste de sua página de login personalizada

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

• Carregamento da página: Verifique se a página é carregada corretamente, sem falhas ou elementos quebrados.
• Logotipo e design: Assegurar que o novo logotipo e o design sejam exibidos conforme o 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 de esquecimento de senha: Teste o recurso "Esqueci minha senha" para garantir que ele envie um e-mail com o link de redefinição de senha corretamente.
• URL personalizado: Se você tiver definido um URL personalizado para a página de login, verifique se ele redireciona corretamente para a nova página de login.
• Capacidade de resposta: Verifique a aparência da página em diferentes dispositivos (celular, tablet e desktop) para garantir que ela seja responsiva e fácil de usar.

Personalizar as perguntas frequentes da página de login do WordPress

É isso aí!

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 de 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 as cores, as fontes, o logotipo e muito mais, tudo sem escrever nenhum código.

Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.

Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.