Resumo de IA
Quer personalizar a página de login no seu site WordPress? Com o WPForms, tem imensas formas de estilizar os seus formulários de login, sem necessidade de qualquer código!
Neste post, vamos mostrar-lhe 7 exemplos diferentes de páginas de login de sites populares e como recriá-los.
Vamos guiá-lo através do processo de construção de cada formulário no mesmo estilo dos exemplos que apresentamos aqui, com apenas alguns cliques do seu rato.
Vamos a isso!
Crie a Sua Página de Login Agora! 🙂
O Que Torna Uma Boa Página de Login?
A sua página de login provavelmente contém alguns campos onde os utilizadores digitam o seu nome de utilizador, endereço de e-mail, palavra-passe e mais. É um local onde os visitantes do site inserem as suas credenciais para aceder ao seu site.
Estes visitantes podem ter uma conta no seu site, ou alguma outra razão para precisar de fazer login no seu website. Páginas de login fortes tendem a partilhar o mesmo punhado de decisões, mesmo quando não se parecem em nada à superfície.
- Uma tarefa, claramente declarada: Uma página de login pede credenciais e sai do caminho para reduzir a distração e ajudar os utilizadores a aceder às suas contas.
- Uma saída para pessoas que não têm conta: Um número surpreendente de visitantes da página de login está no lugar errado. Um link de inscrição visível poupa-os de sair.
- Um link de reposição de palavra-passe fácil de encontrar: Palavras-passe esquecidas são a razão mais comum pela qual alguém acede a uma página de login duas vezes seguidas.
- Marca suficiente para parecer o seu site: Um logótipo ou uma imagem de cabeçalho são geralmente suficientes. Os leitores ficam nervosos ao digitar uma palavra-passe numa página que parece genérica.
- Proteção contra spam que não penaliza pessoas reais: Os bots visam constantemente os formulários de início de sessão. Uma caixa de verificação ou uma verificação invisível impede a maioria sem adicionar atrito.
- Espaço para respirar num telemóvel: Campos apertados e alvos de toque minúsculos falham em dispositivos móveis muito antes de falharem em desktops.
7 Exemplos de Páginas de Login
Cada exemplo abaixo é uma página ativa que pode visitar agora mesmo. Abaixo de cada um, destaquei a escolha de design específica que o torna funcional, para que possa adotar o padrão em vez de copiar os pixels.
1. HubSpot
Esta página de login no site da HubSpot é bastante básica e sem muitos detalhes incluídos no formulário. O formulário consiste simplesmente num campo para e-mail, palavra-passe, uma caixa de seleção e um botão de login.
A questão sobre um formulário como este é que é semelhante à base de todos os outros exemplos de formulários de login. Tem os elementos mais básicos necessários para uma página de login.
E, se preferir, a sua própria página de login também pode ser simplificada assim. O WPForms é o melhor plugin construtor de formulários para WordPress, e torna super fácil adicionar uma página de login personalizada ao seu site.
Primeiro, terá de instalar o WPForms e subscrever o Plano Pro para aceder ao addon de Registo de Utilizador. Após introduzir a sua chave de licença nas suas definições do WPForms, vá para WPForms » Addons no seu painel.
Percorra os addons disponíveis para encontrar o addon de Registo de Utilizador, que também irá instalar. Certifique-se de que também ativa o addon assim que o tiver instalado.
Agora está pronto para criar o seu formulário de início de sessão. Vá para WPForms » Adicionar Novo e encontre o modelo Formulário de Início de Sessão de Utilizador nos seus Addons de Modelos disponíveis.
Clique no botão Usar Modelo para selecionar este modelo e abrir o construtor de formulários. O construtor de formulários WPForms torna fácil editar este modelo pré-fabricado para se adequar às suas necessidades.
Encontrará uma extensa seleção de campos de formulário que cobrem praticamente qualquer elemento que deseje no seu formulário online. Tudo o que precisa de fazer é simplesmente arrastar e soltar cada campo no lugar.
Verá que o Formulário de Início de Sessão de Utilizador já carregou os campos necessários. Mas, como todos os modelos WPForms, este formulário é altamente personalizável, pelo que pode adicionar e editar campos no seu formulário de várias maneiras.
Para este formulário, vamos editar o botão Enviar na parte inferior do formulário para que diga ‘Iniciar sessão’, como o exemplo da página de início de sessão da HubSpot. Basta clicar no botão para expandir as suas definições.
Em seguida, para alterar o texto do botão, abra o separador Geral e navegue até à caixa Texto do Botão de Envio.
Agora, digite o que gostaria que o botão dissesse, como ‘Iniciar sessão’. Olhando novamente para o formulário, o botão na parte inferior do formulário alinha-se melhor com a natureza de início de sessão desta página.
E é tudo o que precisa de fazer para criar um formulário de início de sessão básico como o utilizado na página de início de sessão da HubSpot. A partir daqui, prossiga e Guarde este formulário.
Assim que for guardado, este formulário estará disponível para utilização na página Todos os Formulários do WPForms no seu painel WordPress.
Agora tem um formulário de início de sessão simples que pode publicar rapidamente no seu site, ou que pode usar como base para criar páginas de início de sessão mais detalhadas. Estes são os passos básicos necessários para todos os exemplos de páginas de início de sessão abordados aqui.
2. WordPress.org
Dê uma vista de olhos à página de início de sessão do WordPress.org. Tal como o primeiro exemplo que abordámos, este é bastante básico. Mas tem um excerto de texto instrutivo no topo, e o seu formulário também pode tê-lo.
Como mencionámos, cada formulário criado aqui requer primeiro o modelo de Formulário de Início de Sessão de Utilizador, incluindo este. Prossiga e selecione novamente o modelo.
Em seguida, no construtor de formulários, arraste o campo Conteúdo para a parte superior do formulário e solte-o aí.
Como dissemos antes, pode arrastar e soltar este campo no seu formulário onde quiser. Mas para se assemelhar ao texto instrutivo na página de início de sessão acima, vamos colocar o campo no topo.
Clique no campo para abrir as suas opções personalizáveis, encontradas no lado esquerdo do ecrã. Em seguida, utilize o editor de texto para escrever o texto instrutivo que pretende que seja exibido neste campo.
Tal como o exemplo acima, pode instruir os utilizadores sobre como introduzir as suas informações para iniciar sessão no seu site.
Muitas opções estão ao seu alcance graças ao editor de texto, com estilos de fonte personalizáveis, cores e muito mais, tudo disponível dentro deste campo.
Por exemplo, veja novamente a página de início de sessão da HubSpot do exemplo 1. Note que existe um excerto muito curto de texto instrutivo.
O texto instrutivo diz: ‘Não tem conta? Inscreva-se’ e fornece um link para uma página onde os utilizadores podem criar uma conta.
Isto também é possível com o editor de texto do campo Conteúdo no seu formulário. Primeiro, escreva o seu texto de instrução e realce a parte que pretende ligar. Em seguida, clique no ícone de ligação na barra de ferramentas do editor de texto.
Agora, irá inserir o URL da página para a qual pretende que os utilizadores aterrem. Clique em OK quando terminar.
E é tudo! Agora tem texto instrutivo e um link no seu formulário.
Como sempre, guarde o seu formulário para mais tarde ou incorpore-o numa página. Partilharemos detalhes sobre como publicar quando estiver pronto para que a página de início de sessão fique ativa no seu site no final desta publicação.
3. Imagem de Cabeçalho
Outra forma de personalizar o Formulário de Início de Sessão do Utilizador para a sua página de início de sessão é adicionando uma imagem de cabeçalho à sua escolha. Utilizar uma imagem no topo do seu formulário é uma boa forma de personalizar o seu formulário, ou complementar o estilo do seu site.
Para adicionar uma imagem de cabeçalho, irá novamente utilizar o campo Conteúdo e o modelo de Formulário de Início de Sessão do Utilizador. Arraste e solte este campo no topo do seu formulário como antes.
Mas desta vez, clique no botão Adicionar Média acima do editor de texto.
Agora, irá carregar uma imagem da sua escolha, que aparecerá acima do texto no editor de texto. Também pode eliminar o texto desta vez, se desejar, e trabalhar apenas com a imagem.
Clique na imagem para aceder às suas Definições de Exibição e posicione a imagem como desejar.
Para fazer com que a imagem no nosso exemplo atue como uma verdadeira imagem de cabeçalho, centralizaremos o alinhamento e selecionaremos a versão de tamanho completo. Pode ajustar estas definições algumas vezes para descobrir o que prefere.
Certifique-se de que clica no botão azul Atualizar para aplicar quaisquer alterações. Também pode explorar os outros separadores de definições para mais opções, como alterar o Tamanho do Campo no separador Avançadas.
Experimente o tamanho de campo Grande para ver a sua imagem exibida ainda maior no topo do seu formulário, como uma verdadeira imagem de cabeçalho.
Mais uma vez, certifique-se de que guarda o seu formulário para mais tarde. E para mais dicas relacionadas com este exemplo, consulte esta publicação completa sobre adicionar uma imagem de cabeçalho aos seus formulários.
4. SendLayer
Vamos dar uma vista de olhos à página de início de sessão SendLayer. No topo do formulário, acima do texto instrutivo que cobrimos anteriormente, encontra-se um logótipo para o site.
Também pode adicionar um logótipo ao seu formulário, utilizando novamente o campo Conteúdo no seu Formulário de Início de Sessão do Utilizador.
Lembra-se de como usou o campo Conteúdo para carregar uma imagem de cabeçalho? Porque não usar um processo semelhante para exibir um logótipo? Graças ao construtor de formulários, tem várias opções para colocar logótipos no seu formulário.
Simplesmente arraste o campo Conteúdo para onde o deseja no seu formulário.
Para se assemelhar ao exemplo acima, vamos colocar o logótipo no topo do formulário. E como isto é um pouco como uma imagem de cabeçalho, um logótipo com estilo horizontal pode ficar melhor aqui.
Lembre-se de simplesmente clicar no botão Adicionar Média do campo Conteúdo para carregar o seu logótipo.
E não se esqueça das definições adicionais. Pode querer centralizar o logótipo, torná-lo de tamanho completo, ou alterar o tamanho do campo nas definições Avançadas.
Também pode editar o texto abaixo do logótipo como cobrimos no exemplo do texto instrutivo, o que faria com que o seu formulário aqui se assemelhasse de perto ao exemplo.
A sua página de início de sessão tem agora o seu logótipo claramente exibido no seu formulário. Sinta-se à vontade para adicionar outro logótipo na parte inferior, ou em qualquer outro lugar onde deseje arrastar o campo Conteúdo!
5. TrustPulse
Agora vamos tomar nota da página de login da TrustPulse. Este formulário de login tem credenciais inseridas num lado do ecrã com um pequeno logótipo acima, e uma grande ilustração apresentada no outro lado.
Você também pode criar um formulário que se pareça com este usando o campo Layout e o campo Conteúdo em conjunto. Primeiro, arraste o campo Layout para o seu Formulário de Login do Utilizador.
Não importa realmente onde arrasta e solta o campo Layout agora, porque eventualmente irá arrastar os campos pré-carregados do formulário para o próprio campo Layout.
Por agora, vamos apenas arrastá-lo para o topo do formulário para nos mantermos organizados. Selecionará também a orientação das colunas dentro do layout, o que determinará o tamanho e a colocação do conteúdo neste campo.
Agora, arraste o campo Conteúdo para a primeira coluna do campo Layout no seu formulário, para que possa exibir um logótipo aqui como o exemplo da TrustPulse.
Utilize o botão Adicionar Média para carregar novamente o seu logótipo e, em seguida, certifique-se de que as definições da imagem o orientam e dimensionam como pretende.
Em seguida, arraste e solte os outros campos do formulário nesse lado do campo Layout.
Simplesmente agarre cada campo com o rato, arraste-o para a coluna Layout e solte-o. O campo Email, o campo Password e a caixa de seleção estarão agora na coluna esquerda do seu formulário.
Agora, adicionará conteúdo à outra coluna no campo Layout. Selecione novamente o campo Conteúdo e arraste-o para a coluna maior no lado direito do seu formulário.
Agora pode adicionar uma ilustração da sua escolha para ser exibida em grande neste lado do seu formulário. Clique no botão Adicionar Média como fez do outro lado para carregar uma ilustração.
E, mais uma vez, certifique-se de ajustar as definições do campo para personalizar o tamanho e a colocação da sua ilustração. Para uma ilustração grande como o exemplo, pode querer remover qualquer texto adicional do campo Conteúdo.
E agora o seu formulário tem o pequeno logótipo e as entradas de credenciais de um lado, e uma grande ilustração apresentada do outro lado.
Como sempre, terá de guardar este formulário para o manter no WPForms no seu painel de controlo e, em seguida, incorporá-lo numa página do WordPress quando estiver pronto para o utilizar.
6. ExactMetrics
Em seguida, veremos a página de login da ExactMetrics, que é algo semelhante ao login anterior, mas com um botão de chamada para ação num lado do formulário em vez de uma ilustração.
Um lado tem um pequeno logótipo, entrada de email, entrada de password e botão de login, e o outro lado tem bastante texto, seguido por um CTA clicável.
Para criar um aspeto semelhante com o seu próprio formulário, basta seguir os passos que cobrimos no exemplo anterior: primeiro adicionar o campo Layout ao seu Formulário de Login do Utilizador e arrastar campos para um lado ou coluna do layout.
Lembre-se, basta arrastar o campo Conteúdo para o Layout para carregar o seu logótipo e, em seguida, arrastar os campos restantes do formulário para esse lado do Layout também.
Mas depois, para o outro lado do campo Layout, na segunda coluna, não se preocupe em carregar nada. Irá apenas editar o texto que já está aqui.
Repare como parte do texto pré-carregado é maior e mais ousado do que o que está por baixo, semelhante ao estilo de texto no exemplo.
Isto torna fácil moldar o seu texto como o do exemplo, mas não se esqueça de todas as outras formas de usar o editor de texto a seu favor. Pode alterar o tamanho, orientação, cor e muito mais do texto, conforme entender.
E dentro do editor de texto do campo Conteúdo, pode até inserir um trecho de código para criar um botão de CTA. Clique no separador Texto da caixa do editor de texto para copiar e colar o código que gostaria de usar para criar um botão.
Pode editar o seu trecho de código para estilizar a aparência do seu botão de CTA como desejar.
Agora tem um botão de CTA no seu formulário! Mais uma vez, terá de guardar este formulário e depois incorporá-lo numa página WordPress quando estiver pronto para o usar.
7. WPForms
Agora que percorremos as formas mais complexas de estilizar um formulário de login, vamos analisar um dos elementos de segurança mais fáceis de adicionar ao seu formulário, onde quer que o queira.
A verificação reCAPTCHA ajuda a proteger o seu site WordPress de bots e spam que tentariam usar os seus formulários para aceder ao seu site.
Como pode ver, nós usamos-o na nossa própria página de login aqui em WPForms.
Pode facilmente adicionar um campo reCAPTCHA a qualquer um dos seus formulários de login também. Mas primeiro, terá de o configurar nas suas definições do WPForms.
No seu painel WordPress, navegue até WPForms e depois Definições. Em seguida, certifique-se de que está no ecrã CAPTCHA.
Selecione a opção reCAPTCHA do meio do ecrã.
Em seguida, escolherá o tipo de verificação reCAPTCHA que deseja usar. Vamos selecionar o reCAPTCHA v2 de Caixa de Verificação.
Em seguida, terá de introduzir uma Chave do Site e uma Chave Secreta nesta página de definições, fornecidas pelo Google. Para receber estas chaves, deve seguir o processo de configuração na consola de administração reCAPTCHA do Google.
Para mais informações, juntamente com um tutorial totalmente detalhado sobre como fazer isto, consulte o nosso artigo sobre configurar e usar reCAPTCHA com os seus formulários WordPress.
Não se esqueça de clicar Guardar na parte inferior deste ecrã para aplicar estas definições ao seu campo reCAPTCHA.
Agora está pronto para adicionar a verificação reCAPTCHA ao seu formulário. De volta à página de criação de formulários, basta clicar no campo reCAPTCHA para o ativar no seu Formulário de Login do Utilizador.
E é tudo! O seu formulário de login está agora protegido contra bots e spam que, de outra forma, poderiam infiltrar-se no seu site.
Além disso, o ícone reCAPTCHA é então exibido no seu formulário, o que informa os seus utilizadores que as suas informações estão seguras.
Como Adicionar uma Página de Login Personalizada ao WordPress
A coisa útil sobre o construtor de formulários do WPForms é que todas as opções personalizáveis e escolhas de estilo inspiradas nestes exemplos podem ser criadas no próprio formulário.
No entanto, alguns dos estilos alcançados nestes exemplos podem ser o resultado de edição adicional na página de login.
Assim, para dicas adicionais aprofundadas sobre como obter ainda mais estilo com o WPForms na sua página WordPress, consulte este artigo completo sobre como estilizar formulários com CSS.
Além disso, tenha em mente que com todos os seus formulários criados e os exemplos que cobrimos aqui, você precisará salvar o formulário quando terminar de editá-lo.
Depois, talvez mais tarde, se necessário, pode incorporar o formulário numa página e publicá-lo quando estiver pronto. Ou, a partir do construtor de formulários, pode incorporar o seu formulário numa página agora.
Ao clicar em Incorporar pode incorporar o seu formulário de login numa página que já criou para o seu website, ou pode criar uma nova página agora para este formulário de login.
Se decidir criar uma nova página, terá de lhe dar um nome, tal como as outras páginas do seu website são nomeadas para que as possa encontrar facilmente no painel WordPress.
Clique Vamos a isso! para continuar. O WPForms adicionará automaticamente o seu formulário de login à sua nova página.
Após o seu formulário ser incorporado, pode sempre editar mais algumas coisas na própria página WordPress acedendo às definições do bloco WPForms e editando outros elementos de estilo da página.
Consulte este artigo para mais ideias sobre como editar e personalizar a sua página de login WordPress.
E lembre-se que, como todas as suas páginas WordPress, você precisará publicar a página com o seu formulário incorporado para a colocar no ar no seu site. Você também pode pré-visualizar a página antes de publicar, ou guardar o rascunho para mais tarde.
Para ainda mais leitura sobre este tópico, consulte este tutorial que abrange como exibir formulários de login e registo.
FAQs sobre Exemplos de Páginas de Login
O design da página de login surge com muita frequência entre os proprietários de sites WordPress, especialmente quando um site começa a aceitar registos. Aqui estão as perguntas que me fazem com mais frequência.
Como crio uma página de login personalizada no WordPress?
Instale o addon de Registo de Utilizador, comece com o modelo Formulário de Login de Utilizador, personalize-o no construtor de formulários, depois incorpore-o numa página e publique. O WordPress manterá o seu ecrã de login predefinido em wp-login.php, e a sua página personalizada funcionará em paralelo com ele em vez de o substituir.
Posso adicionar um link de inscrição à minha página de login?
Sim, e deve fazê-lo se o registo estiver aberto no seu site. Adicione um campo de Conteúdo ao seu formulário de login e use a ferramenta de link do editor de texto para apontar para a sua página de registo. A linha da HubSpot “Não tem conta? Inscreva-se” é o padrão a copiar.
Preciso de um CAPTCHA na minha página de login?
Para qualquer site com contas de utilizador reais, sim. Os formulários de login recebem tráfego automatizado, quer tenha notado ou não, e as tentativas falhadas não aparecem em nenhum local óbvio. reCAPTCHA, hCaptcha e Cloudflare Turnstile funcionam todos com WPForms em todas as licenças, incluindo a versão gratuita.
Posso usar uma página de login personalizada em vez de wp-login.php?
A sua página personalizada pode tornar-se a página de login para a qual liga em todo o lado, mas wp-login.php permanece ativa em segundo plano porque o núcleo do WordPress depende dela. Escondê-la ou movê-la requer um plugin dedicado em vez de um formulário, e há um resumo das opções no nosso guia sobre plugins de página de login.
Em seguida, Transforme as Suas Novas Inscrições em Utilizadores Registados
Uma página de login só se justifica quando as pessoas têm contas para iniciar sessão. Se também estiver a criar o lado do registo, consulte o nosso guia sobre como criar um formulário de registo WordPress com PayPal.
Cobre o registo de novos utilizadores e a receção de pagamentos no mesmo passo, que é a próxima coisa que as pessoas geralmente querem depois de uma página de login.
E se precisar de um registo de quem se inscreveu e quando, dê uma vista de olhos em como imprimir os seus envios de formulário em PDF.
Crie a Sua Página de Login Agora
Pronto para construir o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no X (Twitter) para mais tutoriais e guias gratuitos sobre WordPress.
