Posicionamiento de los elementos<\/code>
\n<\/h3>\n\n Luego puede dise\u00f1ar las diferentes partes del formulario agregando un c\u00f3digo simple como el que se muestra a continuaci\u00f3n. Esto colocar\u00e1 los diferentes componentes en diferentes posiciones.<\/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 Despu\u00e9s de esto, puede colocar los diferentes elementos de su p\u00e1gina de inicio de sesi\u00f3n seg\u00fan sus especificaciones. En primer lugar, deber\u00e1 especificar los elementos b\u00e1sicos, como el color de la fuente y luego colocar el formulario en el centro de su p\u00e1gina para mantener el equilibrio. Aqu\u00ed, puede agregar cualquier color de fuente que desee, lo que considere hermoso. Sin embargo, siempre es recomendable asegurarse de que el formulario sea simple para no confundir a los 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 En este punto, es posible que el formulario a\u00fan se vea torcido, y puede mejorarlo agregando un poco de estilo estructural. Para hacer esto, comience por asegurarse de que los elementos de su formulario de inicio de sesi\u00f3n no est\u00e9n aplastados y sean f\u00e1cilmente legibles. Puede agregar el siguiente c\u00f3digo para garantizar la limpieza en su formulario.\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 Su formulario de inicio de sesi\u00f3n ahora se ver\u00e1 simple y casi completo con los diferentes elementos bien posicionados. Sin embargo, debe dise\u00f1ar las diversas \u00e1reas de entrada de su formulario de inicio de sesi\u00f3n para que se vean a\u00fan mejor. Aqu\u00ed, especificar\u00e1 el color, el tama\u00f1o de fuente, agregar\u00e1 algo de relleno, m\u00e1rgenes, el ancho de los diferentes elementos y otros elementos b\u00e1sicos, como el color que aparece cuando pasa el mouse por encima o hace clic en un elemento. Agregue el c\u00f3digo a continuaci\u00f3n.\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 desea que su p\u00e1gina de inicio de sesi\u00f3n se vea a\u00fan m\u00e1s hermosa, puede agregar un poco m\u00e1s de personalizaciones para que el bot\u00f3n de inicio de sesi\u00f3n y la casilla de verificaci\u00f3n se vean un poco elegantes. Agrega el siguiente 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 Aplicar estilo a los elementos del formulario
\n<\/h3>\n
\n En este punto, los elementos est\u00e1n bien posicionados y se ven lo suficientemente sofisticados. El formulario de inicio de sesi\u00f3n est\u00e1 listo, pero a\u00fan puede hacerlo un poco m\u00e1s hermoso agregando c\u00f3digos de estilo CSS. Puede comenzar el proceso redondeando las esquinas del contenedor y luego d\u00e1ndole una sombra para mejorar su apariencia y resaltar una sensaci\u00f3n de profundidad. Para hacer eso, ingrese este c\u00f3digo a continuaci\u00f3n en el \u00e1rea del contenedor.\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 Agregar el c\u00f3digo anterior al \u00e1rea del contenedor har\u00e1 que el c\u00f3digo del contenedor se vea como el siguiente:\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 Una vez que haya dise\u00f1ado el contenedor, ahora puede dise\u00f1ar las diferentes \u00e1reas de entrada con un c\u00f3digo similar. Agregue el c\u00f3digo a continuaci\u00f3n y sus \u00e1reas de entrada se ver\u00e1n mucho mejor de lo que eran al principio.\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 Ahora todo el c\u00f3digo de entrada de la contrase\u00f1a se ver\u00e1 como el siguiente. El formulario de inicio de sesi\u00f3n se ver\u00e1 incre\u00edble, pero a\u00fan hay m\u00e1s estilos que puede hacer para mejorar a\u00fan m\u00e1s el aspecto de su formulario.\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 Ahora necesita hacer que el bot\u00f3n de inicio de sesi\u00f3n se vea mejor y distinto. Para hacer esto, ingrese el c\u00f3digo a continuaci\u00f3n en la secci\u00f3n de env\u00edo de su 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 El c\u00f3digo completo de su secci\u00f3n de env\u00edo se ver\u00e1 como el que se muestra a continuaci\u00f3n y habr\u00e1 cambiado el color de su bot\u00f3n de inicio de sesi\u00f3n y otros aspectos, y tendr\u00e1 un formulario de inicio de sesi\u00f3n simple como el que se muestra a continuaci\u00f3n.\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 El formulario de inicio de sesi\u00f3n ahora se ve bien. Es recomendable dejar el formulario as\u00ed de simple. En lugar de agregar otros elementos y abarrotar la p\u00e1gina, puede agregar el logotipo de su empresa y una sola imagen. Los visitantes tienden a distraerse con tantos detalles. Ergo, querr\u00e1s tener una p\u00e1gina de inicio de sesi\u00f3n del sitio web que sea lo m\u00e1s simple posible pero a\u00fan as\u00ed hermosa y atractiva que haga que los visitantes regresen nuevamente. Puede tomar ejemplos de formularios de inicio de sesi\u00f3n de algunos sitios web populares como Snoggle News<\/strong>, Dropbox<\/strong>, Freshbooks<\/strong>, MailChimp<\/strong> y Theidealist<\/strong>, entre otros. Los sitios web como Google y Facebook tambi\u00e9n han empleado el estilo minimalista, y sus p\u00e1ginas de inicio de sesi\u00f3n se ven muy bien con solo un formulario de inicio de sesi\u00f3n, el logotipo de la empresa y algunos otros detalles.\n<\/p>\n\n Cuadros de inicio de sesi\u00f3n de jQuery
\n<\/h3>\n
\n Los cuadros de inicio de sesi\u00f3n de jQuery se han utilizado en una gran cantidad de sitios web, y siempre se ven innovadores y se han abierto camino en los dise\u00f1os de formularios de inicio de sesi\u00f3n de sitios web de la nueva era. Se ven simples pero elegantes. A diferencia del pasado, el inicio de sesi\u00f3n en la actualidad se realiza en una p\u00e1gina simple y no tiene que preocuparse por los contratiempos de jQuery.\n<\/p>\n
\n Con jQuery, puede crear un bot\u00f3n de inicio de sesi\u00f3n en la p\u00e1gina de inicio de su sitio web, que dirige a sus visitantes a la p\u00e1gina de inicio de sesi\u00f3n que funciona con jQuery. El formulario contiene una llamada Ajax y utiliza un script PHP externo para verificar las credenciales del inicio de sesi\u00f3n para otorgar o denegar el acceso. Con jQuery, es f\u00e1cil agregar un enlace de registro justo debajo del cuadro de inicio de sesi\u00f3n. Esto hace que el proceso sea m\u00e1s fluido y permite que el usuario tenga una experiencia fluida. A sus visitantes les resultar\u00e1 f\u00e1cil ubicar la p\u00e1gina de registro\/registro en su sitio web. Tambi\u00e9n puede usar el mismo cuadro de inicio de sesi\u00f3n para acceder a su cuenta.\n<\/p>\n
\n Al igual que cuando usa HTML y CSS para crear y dise\u00f1ar su p\u00e1gina de inicio de sesi\u00f3n, debe tener el cuadro de inicio de sesi\u00f3n aqu\u00ed que hable un poco sobre su negocio de una manera que no abarrote la p\u00e1gina. El formulario de inicio de sesi\u00f3n que crea con jQuery es simple y se ve hermoso. Sin embargo, deber\u00e1 agregar una imagen o solo el logotipo de su empresa para que sea m\u00e1s atractivo. Las p\u00e1ginas de inicio de sesi\u00f3n deben ser f\u00e1ciles de usar.\n<\/p>\n
\n Plantillas de formulario de inicio de sesi\u00f3n del creador de sitios web
\n<\/h3>\n
\n La mejor manera para principiantes de crear un formulario de inicio de sesi\u00f3n atractivo es a trav\u00e9s de las plantillas de formulario de inicio de sesi\u00f3n del creador de sitios web. Aqu\u00ed, no necesita saber codificaci\u00f3n, y ni siquiera necesita haber creado ning\u00fan otro sitio web; los formularios de inicio de sesi\u00f3n se crean con el clic de un bot\u00f3n. Los creadores de sitios web como Weebly<\/strong> y WordPress<\/strong> ofrecen formularios premium y freemium.\n<\/p>\n\n Para crear la p\u00e1gina de inicio de sesi\u00f3n, instale los complementos de formulario y luego visite la p\u00e1gina de configuraci\u00f3n de la plantilla\/complemento para personalizarlo a su gusto. En WordPress, deber\u00e1 instalar WPForms<\/strong> y luego ingresar su c\u00f3digo de compra para verificar. Visite la p\u00e1gina de configuraci\u00f3n y haga clic en Complementos. Aqu\u00ed, puede agregar cualquier elemento que desee. Haga clic en Complemento de registro de usuario y estar\u00e1 listo para comenzar.\n<\/p>\n\n Haga clic en \u00abCrear nueva p\u00e1gina\u00bb y luego seleccione el formulario de \u00abinicio de sesi\u00f3n de usuario\u00bb. Aparecer\u00e1 una plantilla con todos los campos creados previamente, y todo lo que necesita hacer es hacer clic en un campo para editarlo. Despu\u00e9s de editar cada campo, haga clic en el pesta\u00f1a de configuraci\u00f3n y decidir qu\u00e9 debe suceder despu\u00e9s de que un visitante haya iniciado sesi\u00f3n; puede dirigirlo a una determinada URL.\n<\/p>\n
\n Una vez que haya creado el formulario, cree una nueva p\u00e1gina para el formulario de inicio de sesi\u00f3n. Aparecer\u00e1 un editor y, en la parte superior, haga clic en \u00abagregar formulario\u00bb. Aparecer\u00e1 una ventana emergente y podr\u00e1 seleccionar el formulario que acaba de crear. Puede continuar editando la p\u00e1gina para satisfacer mejor sus necesidades, o puede guardarla y publicarla. Puede agregar el inicio de sesi\u00f3n personalizado que acaba de crear como un widget en la barra lateral de su sitio web.\n<\/p>\n
\n Cuando se trata de plantillas de inicio de sesi\u00f3n proporcionadas por el creador del sitio web, el proceso es m\u00e1s o menos el mismo; instale la plantilla, ed\u00edtela a su gusto, cree una nueva p\u00e1gina e inserte su formulario creado. Esto se recomienda para aquellos que son nuevos en el dise\u00f1o de sitios web.\n<\/p>\n
\n Temas y complementos de terceros
\n<\/h3>\n\n Temas
\n<\/h5>\n
\n Es posible que el creador de su sitio web haya proporcionado una plantilla o un tema de inicio de sesi\u00f3n, de forma gratuita o premium, pero es posible que no satisfaga sus necesidades. Afortunadamente, existen numerosos temas y complementos de terceros,<\/a> especialmente para WordPress. Los temas son como plantillas para todo el sitio web que incorporan diferentes estilos y, con la mayor\u00eda de ellos, podr\u00e1 obtener una p\u00e1gina de inicio de sesi\u00f3n elegante y atractiva; El tema no solo afecta la p\u00e1gina de inicio de sesi\u00f3n, sino tambi\u00e9n otros aspectos de su sitio web.\n<\/p>\n\n Deber\u00e1 elegir un tema con una p\u00e1gina de inicio de sesi\u00f3n que le guste. Lo bueno es que con la mayor\u00eda de los temas, puede hacer un recorrido por las funciones antes de instalar. Los temas cuestan entre $2 y m\u00e1s de $100. Los temas, al igual que las plantillas del creador web, son f\u00e1ciles de editar. Puedes cambiar los colores, fuentes y tama\u00f1os del dise\u00f1o a tu gusto y gusto.\n<\/p>\n
\n Los temas pueden ser del creador de su sitio web, temas premium o pueden ser de desarrolladores externos como Themeforest<\/strong>.\n<\/p>\n\n Complementos
\n<\/h5>\n
\n Los complementos son simples; a diferencia de los temas que afectan a casi todos los aspectos de su sitio web, existen complementos para diferentes aspectos de su sitio web. Ergo, puede instalar un complemento solo para crear un formulario de inicio de sesi\u00f3n o un formulario de registro. Los complementos est\u00e1n disponibles de forma gratuita y algunos son premium; elige uno en funci\u00f3n de tu presupuesto y tus necesidades.\n<\/p>\n
\n Todos los creadores de sitios web tendr\u00e1n complementos para que elijas; ya sea que est\u00e9 utilizando Weebly<\/strong>, Joomla<\/strong> o WordPress<\/strong>, existen numerosos temas. Para crear una p\u00e1gina de inicio de sesi\u00f3n con un complemento, visite su tablero para ver la lista de complementos disponibles para el creador de su sitio web. Instale el complemento que desee y se lo dirigir\u00e1 a una p\u00e1gina de pago donde pagar\u00e1 por el complemento.\n<\/p>\n\n Despu\u00e9s de instalar el complemento, se le pedir\u00e1 que edite los diferentes elementos; haga clic en cada elemento para editar y luego haga clic en guardar cambios. Cree una nueva p\u00e1gina y agregue el formulario que ha creado usando el complemento.\n<\/p>\n
\n Conclusi\u00f3n
\n<\/h4>\n
\n Una p\u00e1gina de inicio de sesi\u00f3n debe ser simple tanto como atractiva. En el pasado reciente se han visto diferentes dise\u00f1os de p\u00e1ginas de inicio de sesi\u00f3n. Elija solo el m\u00e9todo de creaci\u00f3n de la p\u00e1gina de inicio de sesi\u00f3n con el que se sienta c\u00f3modo; no elija codificar si no est\u00e1 bien versado en c\u00f3digos. Puede obtener asistencia de dise\u00f1o de un profesional, pero a\u00fan mejor, puede obtener ayuda para dise\u00f1ar su p\u00e1gina de inicio de sesi\u00f3n.\n<\/p>\n
\n Las personas tambi\u00e9n han utilizado inicios de sesi\u00f3n sociales. Aqu\u00ed, permite que los visitantes inicien sesi\u00f3n con los detalles de su cuenta de redes sociales, como Facebook o Twitter. Esta tambi\u00e9n es una buena opci\u00f3n, ya que es lo suficientemente simple y tambi\u00e9n mejora la presencia y el rendimiento de las redes sociales de su empresa. Puede consultar las p\u00e1ginas<\/a> de inicio de sesi\u00f3n de sitios web populares para obtener informaci\u00f3n sobre c\u00f3mo dise\u00f1ar la p\u00e1gina de inicio de sesi\u00f3n de su sitio web; sin abarrotarlo y sin omitir detalles.\n<\/p>\n<\/p>\n\n Fuente de grabaci\u00f3n:
instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"La p\u00e1gina de inicio de sesi\u00f3n, al igual que la p\u00e1gina de destino de un sitio web, es muy importante para los propietarios de negocios que desean convertir el tr\u00e1fico. Al igual que la p\u00e1gina de destino, la p\u00e1gina de inicio de sesi\u00f3n debe ser sofisticada para que los visitantes solo proporcionen sus datos sin muchas molestias. La mayor\u00eda de las mejores p\u00e1ginas de inicio de sesi\u00f3n son sencillas, han empleado un estilo minimalista sin anuncios ni trucos de marketing; solo el inicio de sesi\u00f3n en el formulario con una imagen de fondo o dos. Hay algunas formas diferentes de crear p\u00e1ginas de inicio de sesi\u00f3n que atraigan a los visitantes y los alienten a regresar. Si eres bueno programando,…<\/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":[203,60],"tags":[],"class_list":["post-263311","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/comments?post=263311"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263311\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/159941"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=263311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=263311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=263311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}