Como criar uma bela página de login personalizada para o seu site
Publicados: 2017-08-10A 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 detalhes sem muito incômodo.
A maioria das melhores páginas de login são diretas, empregam um estilo minimalista sem anúncios e truques de marketing; apenas o login no formulário com uma imagem de fundo ou duas.
Existem algumas maneiras diferentes de criar páginas de login que atraem 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 construtores 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 plugins 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 por web designers experientes.
O método que você escolher para personalizar a página de login do seu 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. Os plugins são bons, mas alguns são premium.
Continue lendo para saber como você pode criar e personalizar uma bela página de login.
Usar 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, por último, 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 de nome de usuário, uma parte de 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 então 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 considerar 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;
}
Neste ponto, o formulário ainda pode parecer instável, e você pode melhorá-lo adicionando um pouco de estilo estrutural. Para fazer isso, comece garantindo que os elementos do seu formulário de login não sejam compactados e sejam facilmente legíveis. Você pode adicionar o código a seguir para garantir essa limpeza em 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ê estará especificando a cor, o tamanho da fonte, adicionando alguns preenchimentos, 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 fique ainda mais bonita, você pode adicionar um pouco mais de personalizações 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;
}
Estilize os elementos do formulário
Neste ponto, os elementos estão bem posicionados e parecem sofisticados o suficiente. 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 fazendo os cantos arredondados do contêiner e, em seguida, dando-lhe uma sombra para melhorar sua aparência e trazer uma sensação de profundidade. Para isso, insira este código abaixo na área do container.
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 abaixo:
#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 mais bonitas 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 de senha será semelhante ao abaixo. O formulário de login ficará incrível, mas ainda há mais estilos que você pode fazer para aprimorar 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 o botão de login parecer 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 tão simples. Em vez de adicionar outros elementos e desordenar 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ê vai querer ter uma página de login do site que seja tão simples quanto 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 do jQuery têm sido usadas em um grande número de sites, e elas sempre parecem inovadoras e encontraram seu caminho nos designs de formulários de login de sites 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 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 que é alimentada por 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 que a caixa de login aqui fale um pouco sobre o seu negócio de uma forma que não atrapalhe 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 fáceis de usar.
Modelos de formulário de login do Criador de sites
A melhor maneira amigável para iniciantes de criar um formulário de login atraente é através dos modelos de formulário de login do construtor de sites. Aqui, você não precisa saber codificação e nem precisa ter criado nenhum outro site; os 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 plugins do formulário e depois visite a página de configurações do template/plugin para personalizá-lo ao seu gosto. No WordPress, você precisará instalar o WPForms e, em seguida, 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 User Registration Addon 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 que você precisa fazer é clicar em um campo para editá-lo. Após editar cada campo, clique na aba de configurações e decida o que deve acontecer após o login de um visitante; você pode direcioná-los 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, na parte superior, 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 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 template, edite-o ao seu gosto, crie uma nova página e insira o seu formulário criado. Isso é recomendado para aqueles que são novos no design do site.
Temas e plugins de terceiros
Temas
Seu construtor de sites pode ter fornecido um modelo ou tema de login, gratuito ou premium, mas pode não atender às suas necessidades. Felizmente, existem vários temas e plugins de terceiros especialmente para WordPress. Os temas são como templates 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ê ama. 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 da web, são fáceis de editar. Você pode alterar as cores do design, fontes e tamanhos ao seu gosto e gosto.
Os temas podem ser do construtor de sites, temas premium ou podem ser de desenvolvedores de terceiros, como Themeforest .
Plug-ins
Os plugins são simples; Ao contrário dos temas que afetam quase todos os aspectos do seu site, existem plugins para diferentes aspectos do seu site. Portanto, você pode instalar um plugin apenas para criar um formulário de login ou um formulário de registro. Os plugins estão disponíveis gratuitamente e alguns são premium; escolha um com base em seu orçamento e suas necessidades.
Todos os criadores 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 seu construtor de sites. Instale o plugin que você deseja e você será levado para uma página de checkout onde você paga pelo plugin.
Depois de instalar o plugin, 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 plugin.
Conclusão
Uma página de login precisa ser simples tanto quanto precisa ser atraente. Diferentes designs de página de login foram testemunhados no passado recente. Escolha apenas o método de criação da página de login com o qual você se sente confortável; não escolha codificar se você não for bem versado em códigos. Você pode obter assistência de design de um profissional, mas melhor ainda, você 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. Esta é uma boa opção também, visto que é bastante simples e também melhora a presença e o desempenho da mídia social da sua empresa. Você pode conferir as páginas de login de sites populares para obter informações sobre como estilizar a página de login do seu site; sem desordenar e sem deixar detalhes de fora.