Como criar uma bela página de login personalizada para o seu site
A página de login, assim como a página de destino de um site, é muito importante para os empresários que desejam converter tráfego. Assim como a página de destino, a página de login precisa ser sofisticada para que os visitantes forneçam apenas seus dados sem muito aborrecimento.
A maioria das melhores páginas de login são diretas, elas empregam um estilo minimalista sem anúncios e truques de marketing; apenas o formulário de login com uma ou duas imagens de fundo.
Existem algumas maneiras diferentes de criar páginas de login que cortejam os visitantes e os incentivam a voltar.
- Se você é bom em codificação (HTML e CSS simples ), deve ser capaz de criar uma página de login simples, mas atraente, com alguns códigos básicos.
- Para iniciantes, é mais fácil personalizar a página de login que acompanha o modelo do construtor de sites. A maioria dos criadores e modelos de sites (WordPress, Weebly, Shopify, Joomla e outros) vem com modelos prontos e tudo o que você precisa fazer é editá-los para atender às suas necessidades.
- Você também pode usar plugins e temas simples para criar uma página de login. Os plug-ins são bons porque permitem que você personalize sua página de login com o clique de um botão. Eles podem ser usados por novatos, bem como web designers experientes.
O método escolhido para personalizar a página de login do site será determinado pelo seu nível de habilidade. Embora a codificação possa ser um bom método para uma pessoa, outra pode não saber onde colocar qual código. Plugins são bons, mas alguns são premium.
Continue lendo para saber como criar e personalizar uma bela página de login.
Use HTML/CSS Simples
Criar e personalizar um formulário de login em HTML e CSS é feito em três etapas fáceis: lidar com a marcação HTML, posicionar os diferentes elementos do formulário de login e, finalmente, estilizar os diferentes elementos para torná-los atraentes.
Marcação HTML
Aqui, você adicionará tags HTML simples para criar o formulário real. A parte HTML consiste em um contêiner, o próprio formulário e algumas outras entradas. Ao inserir o código corretamente, você poderá criar um formulário de login simples com uma parte do nome de usuário, uma parte da senha, uma caixa de seleção e um botão de login. Os componentes, no entanto, não estão bem organizados.
<div id="container">
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="
username">
<label for="password">Password:</label>
<input type="password" id="password" name
="password">
<div id="lower">
<input type="checkbox"><label for="checkbox
">Keep me logged in</label>
<input type="submit" value="Login">
</div>
</form>
</div>Posicionando os Elementos
Você pode estilizar as diferentes partes do formulário adicionando um código simples como o abaixo. Isso colocará os diferentes componentes em posições diferentes.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue", Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}Depois disso, você pode posicionar os diferentes elementos da sua página de login de acordo com suas especificações. Primeiro, você precisará especificar os elementos básicos, como a cor da fonte e, em seguida, posicionar o formulário no centro da página para obter equilíbrio. Aqui, você pode adicionar qualquer cor de fonte que desejar, o que achar bonito. No entanto, é sempre aconselhável garantir que o formulário permaneça simples para não confundir os visitantes.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}Nesse ponto, a forma ainda pode parecer instável e você pode melhorá-la adicionando um pouco de estilo estrutural. Para fazer isso, comece garantindo que os elementos do seu formulário de login não sejam esmagados e sejam facilmente legíveis. Você pode adicionar o código a seguir para garantir a limpeza do seu formulário.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}Seu formulário de login agora parecerá simples e quase completo com os diferentes elementos bem posicionados. No entanto, você precisa estilizar as várias áreas de entrada do seu formulário de login para torná-las ainda melhores. Aqui, você especificará a cor, o tamanho da fonte, adicionará algum preenchimento, margens, a largura dos diferentes elementos e outros elementos básicos, como a cor que aparece quando você passa o mouse ou clica em um elemento. Adicione o código abaixo.
p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13 px;
margin-right: 20 px;
}
p a:hover {
color: # 555 ;
}
input {
font-family: "Helvetica Neue", Helvetica,
sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
}Como você deseja que sua página de login pareça ainda mais bonita, você pode adicionar um pouco mais de personalização para tornar o botão de login e a caixa de seleção um pouco elegantes. Adicione o seguinte código.
#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20 px;
}
input[type=checkbox] {
margin-left: 20 px;
margin-top: 30 px;
}
.check {
margin-left: 3px;
}
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
}Estilizar os elementos do formulário
Neste ponto, os elementos estão bem posicionados e parecem bastante sofisticados. O formulário de login está pronto, mas você ainda pode torná-lo um pouco mais bonito adicionando códigos de estilo CSS. Você pode iniciar o processo arredondando os cantos do contêiner e, em seguida, aplicando uma sombra para realçar sua aparência e dar uma sensação de profundidade. Para fazer isso, insira este código abaixo na área do contêiner.
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );Adicionar o código acima à área do contêiner fará com que o código do contêiner se pareça com o seguinte:
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50 %;
left: 50 %;
margin-top: -140 px;
margin-left: -170 px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );Depois de estilizar o contêiner, agora você pode estilizar as diferentes áreas de entrada com um código semelhante. Adicione o código abaixo e suas áreas de entrada ficarão muito melhores do que eram no início.
border: 1 px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;
}Agora, todo o código de entrada da senha será semelhante ao abaixo. O formulário de login ficará incrível, mas ainda há mais estilo que você pode fazer para melhorar ainda mais a aparência do seu formulário.
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;
}Agora você precisa fazer com que o botão de login pareça melhor e distinto. Para fazer isso, insira o código abaixo na seção de envio do seu código.
font-size: 14 px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),
inset 0 1px 0 rgba( 255, 255, 255, .5 );
cursor: pointer;
}Todo o código da sua seção de envio será semelhante ao abaixo e você terá alterado a cor do botão de login e outros aspectos, e terá um formulário de login simples como o abaixo.
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),
inset 0 1px 0 rgba( 255, 255, 255, .5 );
cursor: pointer;
}O formulário de login agora parece bom. É aconselhável deixar o formulário simples assim. Em vez de adicionar outros elementos e sobrecarregar a página, você pode adicionar o logotipo da sua empresa e uma única imagem. Os visitantes tendem a se distrair com tantos detalhes. Portanto, você desejará ter uma página de login do site que seja o mais simples possível, mas ainda bonita e atraente, fazendo com que os visitantes voltem novamente. Você pode obter exemplos de formulários de login de alguns sites populares, como Snoggle News, Dropbox, Freshbooks, MailChimp e Theidealist, entre outros. Sites como Google e Facebook também empregaram o estilo minimalista, e suas páginas de login ficam ótimas com apenas um formulário de login, logotipo da empresa e alguns outros detalhes.
Caixas de login jQuery
As caixas de login jQuery têm sido usadas em um grande número de sites, e estão sempre parecendo inovadoras e encontraram seu caminho nos designs de formulário de login do site da nova era. Eles parecem simples, mas elegantes. Ao contrário do passado, o login hoje em dia acontece em uma página simples e você não precisa se preocupar com nenhum contratempo do jQuery.
Com o jQuery, você pode criar um botão de login na página inicial do seu site, que direciona seus visitantes para a página de login desenvolvida pelo jQuery. O formulário contém uma chamada Ajax e usa um script PHP externo para verificar as credenciais do login para conceder ou negar acesso. Com jQuery, é fácil adicionar um link de registro logo abaixo da caixa de login. Isso torna o processo mais suave e permite ao usuário uma experiência tranquila. Seus visitantes acharão fácil localizar a página de registro/inscrição em seu site. Você também pode usar a mesma caixa de login para acessar sua conta.
Assim como quando você está usando HTML e CSS para criar e estilizar sua página de login, você precisa ter a caixa de login aqui para falar um pouco sobre o seu negócio de uma forma que não sobrecarregue a página. O formulário de login que você cria com jQuery é simples e bonito. No entanto, você precisará adicionar uma imagem ou apenas o logotipo da sua empresa para torná-la mais atraente. As páginas de login devem ser amigáveis.
Modelos de Formulário de Login do Construtor de Sites
A melhor maneira amigável para iniciantes de criar um formulário de login atraente é por meio dos modelos de formulário de login do construtor de sites. Aqui, você não precisa saber codificar e nem precisa ter criado nenhum outro site; formulários de login são criados com o clique de um botão. Construtores de sites como Weebly e WordPress oferecem formulários freemium e premium.
Para criar a página de login, instale os plug-ins de formulário e, em seguida, visite a página de configurações do modelo/plug-in para personalizá-lo ao seu gosto. No WordPress, você precisará instalar o WPForms e inserir seu código de compra para verificar. Visite a página de configurações e clique em Addons. Aqui, você pode adicionar qualquer elemento que desejar. Clique em Complemento de registro do usuário e pronto.
Clique em "Criar nova página" e selecione o formulário "login do usuário". Um modelo aparecerá com todos os campos pré-criados, e tudo o que você precisa fazer é clicar em um campo para editá-lo. Após editar cada campo, clique no botão guia de configurações e decidir o que deve acontecer após o login de um visitante; você pode direcioná-lo para um determinado URL.
Depois de criar o formulário, crie uma nova página para o formulário de login. Um editor aparecerá e, no topo dele, clique em “adicionar formulário". Um pop-up aparecerá e você poderá selecionar o formulário que acabou de criar. Você pode continuar editando a página para atender melhor às suas necessidades ou pode salvar e publicar. Você pode adicionar o login personalizado que acabou de criar como um widget na barra lateral do seu site.
Ao lidar com modelos de login fornecidos pelo construtor de sites, o processo é mais ou menos o mesmo; instale o modelo, edite-o ao seu gosto, crie uma nova página e insira o formulário criado. Isso é recomendado para aqueles que são novos no design de sites.
Temas e plugins de terceiros
Temas
Seu criador de sites pode ter fornecido um modelo ou tema de login, gratuito ou premium, mas pode não atender às suas necessidades. Felizmente, existem inúmeros temas e plugins de terceiros especialmente para WordPress. Os temas são como modelos para todo o site que trazem estilos diferentes e, com a maioria deles, você poderá obter uma página de login elegante e atraente; O tema não afeta apenas a página de login, mas também outros aspectos do seu site.
Você precisará escolher um tema com uma página de login que você adora. O bom é que, com a maioria dos temas, você pode fazer um tour pelos recursos antes de instalar. Os temas custam entre US$ 2 e até mais de US$ 100. Os temas, assim como os modelos do construtor de sites, são fáceis de editar. Você pode alterar as cores, fontes e tamanhos do design ao seu gosto e gosto.
Os temas podem ser do seu criador de sites, temas premium ou de desenvolvedores terceirizados, como o Themeforest.
Plugins
Plugins são simples; ao contrário dos temas que afetam quase todos os aspectos do seu site, existem plug-ins para diferentes aspectos do seu site. Portanto, você pode instalar um plug-in apenas para criar um formulário de login ou um formulário de registro. Os plug-ins estão disponíveis gratuitamente e alguns são premium; escolha um com base no seu orçamento e nas suas necessidades.
Todos os construtores de sites terão plugins para você escolher; se você estiver usando Weebly, Joomla ou WordPress, existem vários temas. Para criar uma página de login usando um plug-in, visite seu painel para ver a lista de plug-ins disponíveis para o seu construtor de sites. Instale o plug-in desejado e você será direcionado para uma página de checkout, onde pagará pelo plug-in.
Depois de instalar o plug-in, você será solicitado a editar os diferentes elementos; clique em cada elemento para editar e, em seguida, clique em salvar alterações. Crie uma nova página e adicione o formulário que você criou usando o plug-in.
Conclusão
Uma página de login precisa ser simples tanto quanto atraente. Diferentes designs de página de login foram testemunhados no passado recente. Escolha apenas o método de criação de página de login com o qual você se sinta confortável; não escolha codificar se não for bem versado em códigos. Você pode obter assistência de design de um profissional, mas, melhor ainda, pode obter ajuda para projetar sua página de login.
As pessoas também usaram logins sociais. Aqui, você permite que os visitantes façam login com os detalhes de suas contas de mídia social, como Facebook ou Twitter. Essa também é uma boa opção, visto que é bastante simples e também melhora a presença e o desempenho da mídia social de sua empresa. Você pode verificar as páginas de login de sites populares para obter informações sobre como estilizar a página de login do seu site; sem bagunçar e sem deixar detalhes de fora.