Posicionando os Elementos<\/code>
\n<\/h3>\n\n Voc\u00ea pode estilizar as diferentes partes do formul\u00e1rio adicionando um c\u00f3digo simples como o abaixo. Isso colocar\u00e1 os diferentes componentes em posi\u00e7\u00f5es diferentes.<\/code>\n<\/p>\n<code>html, body {\nwidth: 100 %;\nheight: 100 %;\nfont-family: \"Helvetica Neue\", Helvetica, sans\n-serif;\ncolor: # 444 ;\n-webkit-font-smoothing: antialiased;\nbackground: #f0f0f0;\n}<\/code><\/code><\/pre>\n\n Depois disso, voc\u00ea pode posicionar os diferentes elementos da sua p\u00e1gina de login de acordo com suas especifica\u00e7\u00f5es. Primeiro, voc\u00ea precisar\u00e1 especificar os elementos b\u00e1sicos, como a cor da fonte e, em seguida, posicionar o formul\u00e1rio no centro da p\u00e1gina para obter equil\u00edbrio. Aqui, voc\u00ea pode adicionar qualquer cor de fonte que desejar, o que achar bonito. No entanto, \u00e9 sempre aconselh\u00e1vel garantir que o formul\u00e1rio permane\u00e7a simples para n\u00e3o confundir os visitantes.\n<\/p>\n
#container {\nposition: fixed;\nwidth: 340px;\nheight: 280 px;\ntop: 50%;\nleft: 50%;\nmargin-top: -140 px;\nmargin-left: -170 px;\n}<\/code><\/pre>\n\n Nesse ponto, a forma ainda pode parecer inst\u00e1vel e voc\u00ea pode melhor\u00e1-la adicionando um pouco de estilo estrutural. Para fazer isso, comece garantindo que os elementos do seu formul\u00e1rio de login n\u00e3o sejam esmagados e sejam facilmente leg\u00edveis. Voc\u00ea pode adicionar o c\u00f3digo a seguir para garantir a limpeza do seu formul\u00e1rio.\n<\/p>\n
form {\nmargin: 0 auto;\nmargin-top: 20 px;\n}\nlabel {\ncolor: # 555 ;\ndisplay: inline-block;\nmargin-left: 18 px;\npadding-top: 10px;\nfont-size: 14px;\n}<\/code><\/pre>\n\n Seu formul\u00e1rio de login agora parecer\u00e1 simples e quase completo com os diferentes elementos bem posicionados. No entanto, voc\u00ea precisa estilizar as v\u00e1rias \u00e1reas de entrada do seu formul\u00e1rio de login para torn\u00e1-las ainda melhores. Aqui, voc\u00ea especificar\u00e1 a cor, o tamanho da fonte, adicionar\u00e1 algum preenchimento, margens, a largura dos diferentes elementos e outros elementos b\u00e1sicos, como a cor que aparece quando voc\u00ea passa o mouse ou clica em um elemento. Adicione o c\u00f3digo abaixo.\n<\/p>\n
p a {\nfont-size: 11px;\ncolor: #aaa;\nfloat: right;\nmargin-top: -13 px;\nmargin-right: 20 px;\n}\np a:hover {\ncolor: # 555 ;\n}\ninput {\nfont-family: \"Helvetica Neue\", Helvetica,\nsans-serif;\nfont-size: 12px;\noutline: none;\n}\ninput[type=text],\ninput[type=password] {\ncolor: # 777 ;\npadding-left: 10px;\nmargin: 10 px;\nmargin-top: 12 px;\nmargin-left: 18 px;\nwidth: 290px;\nheight: 35px;\n}<\/code><\/pre>\n\n Como voc\u00ea deseja que sua p\u00e1gina de login pare\u00e7a ainda mais bonita, voc\u00ea pode adicionar um pouco mais de personaliza\u00e7\u00e3o para tornar o bot\u00e3o de login e a caixa de sele\u00e7\u00e3o um pouco elegantes. Adicione o seguinte c\u00f3digo.\n<\/p>\n
#lower {\nbackground: #ecf2f5;\nwidth: 100%;\nheight: 69px;\nmargin-top: 20 px;\n}\ninput[type=checkbox] {\nmargin-left: 20 px;\nmargin-top: 30 px;\n}\n.check {\nmargin-left: 3px;\n}\ninput[type=submit] {\nfloat: right;\nmargin-right: 20 px;\nmargin-top: 20 px;\nwidth: 80px;\nheight: 30px;\n}<\/code><\/pre>\n\n Estilizar os elementos do formul\u00e1rio
\n<\/h3>\n
\n Neste ponto, os elementos est\u00e3o bem posicionados e parecem bastante sofisticados. O formul\u00e1rio de login est\u00e1 pronto, mas voc\u00ea ainda pode torn\u00e1-lo um pouco mais bonito adicionando c\u00f3digos de estilo CSS. Voc\u00ea pode iniciar o processo arredondando os cantos do cont\u00eainer e, em seguida, aplicando uma sombra para real\u00e7ar sua apar\u00eancia e dar uma sensa\u00e7\u00e3o de profundidade. Para fazer isso, insira este c\u00f3digo abaixo na \u00e1rea do cont\u00eainer.\n<\/p>\n
background: #fff;\nborder-radius: 3px;\nborder: 1px solid #ccc;\nbox-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );<\/code><\/pre>\n\n Adicionar o c\u00f3digo acima \u00e0 \u00e1rea do cont\u00eainer far\u00e1 com que o c\u00f3digo do cont\u00eainer se pare\u00e7a com o seguinte:\n<\/p>\n
#container {\nposition: fixed;\nwidth: 340px;\nheight: 280 px;\ntop: 50 %;\nleft: 50 %;\nmargin-top: -140 px;\nmargin-left: -170 px;\nbackground: #fff;\nborder-radius: 3px;\nborder: 1px solid #ccc;\nbox-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );<\/code><\/pre>\n\n Depois de estilizar o cont\u00eainer, agora voc\u00ea pode estilizar as diferentes \u00e1reas de entrada com um c\u00f3digo semelhante. Adicione o c\u00f3digo abaixo e suas \u00e1reas de entrada ficar\u00e3o muito melhores do que eram no in\u00edcio.\n<\/p>\n
border: 1 px solid #c7d0d2;\nborder-radius: 2px;\nbox-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;\n}<\/code><\/pre>\n\n Agora, todo o c\u00f3digo de entrada da senha ser\u00e1 semelhante ao abaixo. O formul\u00e1rio de login ficar\u00e1 incr\u00edvel, mas ainda h\u00e1 mais estilo que voc\u00ea pode fazer para melhorar ainda mais a apar\u00eancia do seu formul\u00e1rio.\n<\/p>\n
input[type=password] {\ncolor: # 777 ;\npadding-left: 10px;\nmargin: 10 px;\nmargin-top: 12 px;\nmargin-left: 18 px;\nwidth: 290px;\nheight: 35px;\nborder: 1px solid #c7d0d2;\nborder-radius: 2px;\nbox-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;\n}<\/code><\/pre>\n\n Agora voc\u00ea precisa fazer com que o bot\u00e3o de login pare\u00e7a melhor e distinto. Para fazer isso, insira o c\u00f3digo abaixo na se\u00e7\u00e3o de envio do seu c\u00f3digo.\n<\/p>\n
font-size: 14 px;\nfont-weight: bold;\ncolor: #fff;\nbackground-color: #acd6ef; \/*IE fallback*\/\nbackground-image: -webkit-gradient(linear,\nleft top, left bottom, from (#acd6ef), to(# 6ec2\ne8));\nbackground-image: -moz-linear-gradient(\ntop left 90deg, #acd6ef 0 %, # 6ec2e8 100%);\nbackground-image: linear-gradient(top left\n90 deg, #acd6ef 0%, # 6 ec2e8 100 %);\nborder-radius: 30px;\nborder: 1px solid # 66add6;\nbox-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),\ninset 0 1px 0 rgba( 255, 255, 255, .5 );\ncursor: pointer;\n}<\/code><\/pre>\n\n Todo o c\u00f3digo da sua se\u00e7\u00e3o de envio ser\u00e1 semelhante ao abaixo e voc\u00ea ter\u00e1 alterado a cor do bot\u00e3o de login e outros aspectos, e ter\u00e1 um formul\u00e1rio de login simples como o abaixo.\n<\/p>\n
input[type=submit] {\nfloat: right;\nmargin-right: 20 px;\nmargin-top: 20 px;\nwidth: 80px;\nheight: 30px;\nfont-size: 14px;\nfont-weight: bold;\ncolor: #fff;\nbackground-color: #acd6ef; \/*IE fallback*\/\nbackground-image: -webkit-gradient(linear,\nleft top, left bottom, from (#acd6ef), to(# 6ec2\ne8));\nbackground-image: -moz-linear-gradient(\ntop left 90deg, #acd6ef 0 %, # 6ec2e8 100%);\nbackground-image: linear-gradient(top left\n90 deg, #acd6ef 0%, # 6 ec2e8 100 %);\nborder-radius: 30px;\nborder: 1px solid # 66add6;\nbox-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),\ninset 0 1px 0 rgba( 255, 255, 255, .5 );\ncursor: pointer;\n}<\/code><\/pre>\n\n O formul\u00e1rio de login agora parece bom. \u00c9 aconselh\u00e1vel deixar o formul\u00e1rio simples assim. Em vez de adicionar outros elementos e sobrecarregar a p\u00e1gina, voc\u00ea pode adicionar o logotipo da sua empresa e uma \u00fanica imagem. Os visitantes tendem a se distrair com tantos detalhes. Portanto, voc\u00ea desejar\u00e1 ter uma p\u00e1gina de login do site que seja o mais simples poss\u00edvel, mas ainda bonita e atraente, fazendo com que os visitantes voltem novamente. Voc\u00ea pode obter exemplos de formul\u00e1rios de login de alguns sites populares, como Snoggle News<\/strong>, Dropbox<\/strong>, Freshbooks<\/strong>, MailChimp<\/strong> e Theidealist<\/strong>, entre outros. Sites como Google e Facebook tamb\u00e9m empregaram o estilo minimalista, e suas p\u00e1ginas de login ficam \u00f3timas com apenas um formul\u00e1rio de login, logotipo da empresa e alguns outros detalhes.\n<\/p>\n\n Caixas de login jQuery
\n<\/h3>\n
\n As caixas de login jQuery t\u00eam sido usadas em um grande n\u00famero de sites, e est\u00e3o sempre parecendo inovadoras e encontraram seu caminho nos designs de formul\u00e1rio de login do site da nova era. Eles parecem simples, mas elegantes. Ao contr\u00e1rio do passado, o login hoje em dia acontece em uma p\u00e1gina simples e voc\u00ea n\u00e3o precisa se preocupar com nenhum contratempo do jQuery.\n<\/p>\n
\n Com o jQuery, voc\u00ea pode criar um bot\u00e3o de login na p\u00e1gina inicial do seu site, que direciona seus visitantes para a p\u00e1gina de login desenvolvida pelo jQuery. O formul\u00e1rio cont\u00e9m uma chamada Ajax e usa um script PHP externo para verificar as credenciais do login para conceder ou negar acesso. Com jQuery, \u00e9 f\u00e1cil adicionar um link de registro logo abaixo da caixa de login. Isso torna o processo mais suave e permite ao usu\u00e1rio uma experi\u00eancia tranquila. Seus visitantes achar\u00e3o f\u00e1cil localizar a p\u00e1gina de registro\/inscri\u00e7\u00e3o em seu site. Voc\u00ea tamb\u00e9m pode usar a mesma caixa de login para acessar sua conta.\n<\/p>\n
\n Assim como quando voc\u00ea est\u00e1 usando HTML e CSS para criar e estilizar sua p\u00e1gina de login, voc\u00ea precisa ter a caixa de login aqui para falar um pouco sobre o seu neg\u00f3cio de uma forma que n\u00e3o sobrecarregue a p\u00e1gina. O formul\u00e1rio de login que voc\u00ea cria com jQuery \u00e9 simples e bonito. No entanto, voc\u00ea precisar\u00e1 adicionar uma imagem ou apenas o logotipo da sua empresa para torn\u00e1-la mais atraente. As p\u00e1ginas de login devem ser amig\u00e1veis.\n<\/p>\n
\n Modelos de Formul\u00e1rio de Login do Construtor de Sites
\n<\/h3>\n
\n A melhor maneira amig\u00e1vel para iniciantes de criar um formul\u00e1rio de login atraente \u00e9 por meio dos modelos de formul\u00e1rio de login do construtor de sites. Aqui, voc\u00ea n\u00e3o precisa saber codificar e nem precisa ter criado nenhum outro site; formul\u00e1rios de login s\u00e3o criados com o clique de um bot\u00e3o. Construtores de sites como Weebly<\/strong> e WordPress<\/strong> oferecem formul\u00e1rios freemium e premium.\n<\/p>\n\n Para criar a p\u00e1gina de login, instale os plug-ins de formul\u00e1rio e, em seguida, visite a p\u00e1gina de configura\u00e7\u00f5es do modelo\/plug-in para personaliz\u00e1-lo ao seu gosto. No WordPress, voc\u00ea precisar\u00e1 instalar o WPForms<\/strong> e inserir seu c\u00f3digo de compra para verificar. Visite a p\u00e1gina de configura\u00e7\u00f5es e clique em Addons. Aqui, voc\u00ea pode adicionar qualquer elemento que desejar. Clique em Complemento de registro do usu\u00e1rio e pronto.\n<\/p>\n\n Clique em “Criar nova p\u00e1gina” e selecione o formul\u00e1rio “login do usu\u00e1rio”. Um modelo aparecer\u00e1 com todos os campos pr\u00e9-criados, e tudo o que voc\u00ea precisa fazer \u00e9 clicar em um campo para edit\u00e1-lo. Ap\u00f3s editar cada campo, clique no bot\u00e3o guia de configura\u00e7\u00f5es e decidir o que deve acontecer ap\u00f3s o login de um visitante; voc\u00ea pode direcion\u00e1-lo para um determinado URL.\n<\/p>\n
\n Depois de criar o formul\u00e1rio, crie uma nova p\u00e1gina para o formul\u00e1rio de login. Um editor aparecer\u00e1 e, no topo dele, clique em “adicionar formul\u00e1rio”. Um pop-up aparecer\u00e1 e voc\u00ea poder\u00e1 selecionar o formul\u00e1rio que acabou de criar. Voc\u00ea pode continuar editando a p\u00e1gina para atender melhor \u00e0s suas necessidades ou pode salvar e publicar. Voc\u00ea pode adicionar o login personalizado que acabou de criar como um widget na barra lateral do seu site.\n<\/p>\n
\n Ao lidar com modelos de login fornecidos pelo construtor de sites, o processo \u00e9 mais ou menos o mesmo; instale o modelo, edite-o ao seu gosto, crie uma nova p\u00e1gina e insira o formul\u00e1rio criado. Isso \u00e9 recomendado para aqueles que s\u00e3o novos no design de sites.\n<\/p>\n
\n Temas e plugins de terceiros
\n<\/h3>\n\n Temas
\n<\/h5>\n
\n Seu criador de sites pode ter fornecido um modelo ou tema de login, gratuito ou premium, mas pode n\u00e3o atender \u00e0s suas necessidades. Felizmente, existem in\u00fameros temas e plugins de terceiros<\/a> especialmente para WordPress. Os temas s\u00e3o como modelos para todo o site que trazem estilos diferentes e, com a maioria deles, voc\u00ea poder\u00e1 obter uma p\u00e1gina de login elegante e atraente; O tema n\u00e3o afeta apenas a p\u00e1gina de login, mas tamb\u00e9m outros aspectos do seu site.\n<\/p>\n\n Voc\u00ea precisar\u00e1 escolher um tema com uma p\u00e1gina de login que voc\u00ea adora. O bom \u00e9 que, com a maioria dos temas, voc\u00ea pode fazer um tour pelos recursos antes de instalar. Os temas custam entre US$ 2 e at\u00e9 mais de US$ 100. Os temas, assim como os modelos do construtor de sites, s\u00e3o f\u00e1ceis de editar. Voc\u00ea pode alterar as cores, fontes e tamanhos do design ao seu gosto e gosto.\n<\/p>\n
\n Os temas podem ser do seu criador de sites, temas premium ou de desenvolvedores terceirizados, como o Themeforest<\/strong>.\n<\/p>\n\n Plugins
\n<\/h5>\n
\n Plugins s\u00e3o simples; ao contr\u00e1rio dos temas que afetam quase todos os aspectos do seu site, existem plug-ins para diferentes aspectos do seu site. Portanto, voc\u00ea pode instalar um plug-in apenas para criar um formul\u00e1rio de login ou um formul\u00e1rio de registro. Os plug-ins est\u00e3o dispon\u00edveis gratuitamente e alguns s\u00e3o premium; escolha um com base no seu or\u00e7amento e nas suas necessidades.\n<\/p>\n
\n Todos os construtores de sites ter\u00e3o plugins para voc\u00ea escolher; se voc\u00ea estiver usando Weebly<\/strong>, Joomla<\/strong> ou WordPress<\/strong>, existem v\u00e1rios temas. Para criar uma p\u00e1gina de login usando um plug-in, visite seu painel para ver a lista de plug-ins dispon\u00edveis para o seu construtor de sites. Instale o plug-in desejado e voc\u00ea ser\u00e1 direcionado para uma p\u00e1gina de checkout, onde pagar\u00e1 pelo plug-in.\n<\/p>\n\n Depois de instalar o plug-in, voc\u00ea ser\u00e1 solicitado a editar os diferentes elementos; clique em cada elemento para editar e, em seguida, clique em salvar altera\u00e7\u00f5es. Crie uma nova p\u00e1gina e adicione o formul\u00e1rio que voc\u00ea criou usando o plug-in.\n<\/p>\n
\n Conclus\u00e3o
\n<\/h4>\n
\n Uma p\u00e1gina de login precisa ser simples tanto quanto atraente. Diferentes designs de p\u00e1gina de login foram testemunhados no passado recente. Escolha apenas o m\u00e9todo de cria\u00e7\u00e3o de p\u00e1gina de login com o qual voc\u00ea se sinta confort\u00e1vel; n\u00e3o escolha codificar se n\u00e3o for bem versado em c\u00f3digos. Voc\u00ea pode obter assist\u00eancia de design de um profissional, mas, melhor ainda, pode obter ajuda para projetar sua p\u00e1gina de login.\n<\/p>\n
\n As pessoas tamb\u00e9m usaram logins sociais. Aqui, voc\u00ea permite que os visitantes fa\u00e7am login com os detalhes de suas contas de m\u00eddia social, como Facebook ou Twitter. Essa tamb\u00e9m \u00e9 uma boa op\u00e7\u00e3o, visto que \u00e9 bastante simples e tamb\u00e9m melhora a presen\u00e7a e o desempenho da m\u00eddia social de sua empresa. Voc\u00ea pode verificar as p\u00e1ginas de login<\/a> de sites populares para obter informa\u00e7\u00f5es sobre como estilizar a p\u00e1gina de login do seu site; sem bagun\u00e7ar e sem deixar detalhes de fora.\n<\/p>\n<\/p>\n\n Fonte de grava\u00e7\u00e3o:
instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"A p\u00e1gina de login, assim como a p\u00e1gina de destino de um site, \u00e9 muito importante para os empres\u00e1rios que desejam converter tr\u00e1fego. Assim como a p\u00e1gina de destino, a p\u00e1gina de login precisa ser sofisticada para que os visitantes forne\u00e7am apenas seus dados sem muito aborrecimento. A maioria das melhores p\u00e1ginas de login s\u00e3o diretas, elas empregam um estilo minimalista sem an\u00fancios e truques de marketing; apenas o formul\u00e1rio de login com uma ou duas imagens de fundo. Existem algumas maneiras diferentes de criar p\u00e1ginas de login que cortejam os visitantes e os incentivam a voltar. Se voc\u00ea \u00e9 bom em codifica\u00e7\u00e3o,\u2026<\/p>\n","protected":false},"author":1,"featured_media":159941,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[202,59],"tags":[],"class_list":["post-260983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer-de-web","category-web-e-wordpress-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=260983"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260983\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/159941"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=260983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=260983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=260983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}