Cómo crear una hermosa página de inicio de sesión personalizada para su sitio web

Publicado: 2017-08-10

La página de inicio de sesión, al igual que la página de destino de un sitio web, es muy importante para los propietarios de negocios que desean convertir el tráfico. Al igual que la página de destino, la página de inicio de sesión debe ser sofisticada para que los visitantes solo proporcionen sus datos sin muchas molestias.

La mayoría de las mejores páginas de inicio de sesión son sencillas, han empleado un estilo minimalista sin anuncios ni trucos de marketing; solo el inicio de sesión en el formulario con una imagen de fondo o dos.

Hay algunas formas diferentes de crear páginas de inicio de sesión que atraigan a los visitantes y los alienten a regresar.

Si eres bueno codificando (HTML simple y CSS), deberías poder crear una página de inicio de sesión simple pero atractiva con algunos códigos básicos.
Para los novatos, es más fácil personalizar la página de inicio de sesión que viene con la plantilla del creador de sitios web. La mayoría de los creadores de sitios web y plantillas ( WordPress , Weebly , Shopify , Joomla y otros) vienen con plantillas listas, y todo lo que necesita hacer es editarlas para satisfacer sus necesidades.
También puede usar complementos y temas simples para crear una página de inicio de sesión. Los complementos son buenos porque le permiten personalizar su página de inicio de sesión con solo hacer clic en un botón. Pueden ser utilizados tanto por novatos como por diseñadores web experimentados.

El método que elija para personalizar la página de inicio de sesión de su sitio web estará determinado por su nivel de habilidad. Si bien la codificación puede ser un buen método para una persona, es posible que otra no sepa dónde colocar qué código. Los complementos son buenos, pero algunos son premium.

Siga leyendo para saber cómo puede crear y personalizar una hermosa página de inicio de sesión.

Usa HTML/CSS simple

La creación y personalización de un formulario de inicio de sesión en HTML y CSS se realiza en tres sencillos pasos: tratar con el marcado HTML, colocar los diferentes elementos del formulario de inicio de sesión y, por último, diseñar los diferentes elementos para que se vean atractivos.

Marcado HTML

Aquí, agregará etiquetas HTML simples para crear el formulario real. La parte HTML consta de un contenedor, el formulario en sí y un par de entradas más. Al ingresar el código correctamente, podrá crear un formulario de inicio de sesión simple con una parte de nombre de usuario, una parte de contraseña, una casilla de verificación y un botón de inicio de sesión. Los componentes, sin embargo, no están bien dispuestos.

<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>

Posicionamiento de los elementos

Luego puede diseñar las diferentes partes del formulario agregando un código simple como el que se muestra a continuación. Esto colocará los diferentes componentes en diferentes posiciones.

html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}

Después de esto, puede colocar los diferentes elementos de su página de inicio de sesión según sus especificaciones. En primer lugar, deberá especificar los elementos básicos, como el color de la fuente y luego colocar el formulario en el centro de su página para mantener el equilibrio. Aquí, 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.

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}

En este punto, es posible que el formulario aún 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ón no estén aplastados y sean fácilmente legibles. Puede agregar el siguiente código para garantizar la limpieza en su formulario.

form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}

Su formulario de inicio de sesión ahora se verá simple y casi completo con los diferentes elementos bien posicionados. Sin embargo, debe diseñar las diversas áreas de entrada de su formulario de inicio de sesión para que se vean aún mejor. Aquí, especificará el color, el tamaño de fuente, agregará algo de relleno, márgenes, el ancho de los diferentes elementos y otros elementos básicos, como el color que aparece cuando pasa el mouse por encima o hace clic en un elemento. Agregue el código a continuación.

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 desea que su página de inicio de sesión se vea aún más hermosa, puede agregar un poco más de personalizaciones para que el botón de inicio de sesión y la casilla de verificación se vean un poco elegantes. Agrega el siguiente 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;
}

Aplicar estilo a los elementos del formulario

En este punto, los elementos están bien posicionados y se ven lo suficientemente sofisticados. El formulario de inicio de sesión está listo, pero aún puede hacerlo un poco más hermoso agregando códigos de estilo CSS. Puede comenzar el proceso redondeando las esquinas del contenedor y luego dándole una sombra para mejorar su apariencia y resaltar una sensación de profundidad. Para hacer eso, ingrese este código a continuación en el área del contenedor.

background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );

Agregar el código anterior al área del contenedor hará que el código del contenedor se vea como el siguiente:

#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 );

Una vez que haya diseñado el contenedor, ahora puede diseñar las diferentes áreas de entrada con un código similar. Agregue el código a continuación y sus áreas de entrada se verán mucho mejor de lo que eran al principio.

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;
}

Ahora todo el código de entrada de la contraseña se verá como el siguiente. El formulario de inicio de sesión se verá increíble, pero aún hay más estilos que puede hacer para mejorar aún más el aspecto de su formulario.

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;
}

Ahora necesita hacer que el botón de inicio de sesión se vea mejor y distinto. Para hacer esto, ingrese el código a continuación en la sección de envío de su 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;
}

El código completo de su sección de envío se verá como el que se muestra a continuación y habrá cambiado el color de su botón de inicio de sesión y otros aspectos, y tendrá un formulario de inicio de sesión simple como el que se muestra a continuación.

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;
}

El formulario de inicio de sesión ahora se ve bien. Es recomendable dejar el formulario así de simple. En lugar de agregar otros elementos y abarrotar la página, puede agregar el logotipo de su empresa y una sola imagen. Los visitantes tienden a distraerse con tantos detalles. Ergo, querrás tener una página de inicio de sesión del sitio web que sea lo más simple posible pero aún así hermosa y atractiva que haga que los visitantes regresen nuevamente. Puede tomar ejemplos de formularios de inicio de sesión de algunos sitios web populares como Snoggle News , Dropbox , Freshbooks , MailChimp y Theidealist , entre otros. Los sitios web como Google y Facebook también han empleado el estilo minimalista, y sus páginas de inicio de sesión se ven muy bien con solo un formulario de inicio de sesión, el logotipo de la empresa y algunos otros detalles.

Cuadros de inicio de sesión de jQuery

Los cuadros de inicio de sesión 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ños de formularios de inicio de sesión de sitios web de la nueva era. Se ven simples pero elegantes. A diferencia del pasado, el inicio de sesión en la actualidad se realiza en una página simple y no tiene que preocuparse por los contratiempos de jQuery.

Con jQuery, puede crear un botón de inicio de sesión en la página de inicio de su sitio web, que dirige a sus visitantes a la página de inicio de sesión que funciona con jQuery. El formulario contiene una llamada Ajax y utiliza un script PHP externo para verificar las credenciales del inicio de sesión para otorgar o denegar el acceso. Con jQuery, es fácil agregar un enlace de registro justo debajo del cuadro de inicio de sesión. Esto hace que el proceso sea más fluido y permite que el usuario tenga una experiencia fluida. A sus visitantes les resultará fácil ubicar la página de registro/registro en su sitio web. También puede usar el mismo cuadro de inicio de sesión para acceder a su cuenta.

Al igual que cuando usa HTML y CSS para crear y diseñar su página de inicio de sesión, debe tener el cuadro de inicio de sesión aquí que hable un poco sobre su negocio de una manera que no abarrote la página. El formulario de inicio de sesión que crea con jQuery es simple y se ve hermoso. Sin embargo, deberá agregar una imagen o solo el logotipo de su empresa para que sea más atractivo. Las páginas de inicio de sesión deben ser fáciles de usar.

Plantillas de formulario de inicio de sesión del creador de sitios web

La mejor manera para principiantes de crear un formulario de inicio de sesión atractivo es a través de las plantillas de formulario de inicio de sesión del creador de sitios web. Aquí, no necesita saber codificación, y ni siquiera necesita haber creado ningún otro sitio web; los formularios de inicio de sesión se crean con el clic de un botón. Los creadores de sitios web como Weebly y WordPress ofrecen formularios premium y freemium.

Para crear la página de inicio de sesión, instale los complementos de formulario y luego visite la página de configuración de la plantilla/complemento para personalizarlo a su gusto. En WordPress, deberá instalar WPForms y luego ingresar su código de compra para verificar. Visite la página de configuración y haga clic en Complementos. Aquí, puede agregar cualquier elemento que desee. Haga clic en Complemento de registro de usuario y estará listo para comenzar.

Haga clic en "Crear nueva página" y luego seleccione el formulario de "inicio de sesión de usuario". Aparecerá una plantilla con todos los campos creados previamente, y todo lo que necesita hacer es hacer clic en un campo para editarlo. Después de editar cada campo, haga clic en la pestaña de configuración y decida qué debe suceder después de que un visitante haya iniciado sesión; puede dirigirlos a una determinada URL.

Una vez que haya creado el formulario, cree una nueva página para el formulario de inicio de sesión. Aparecerá un editor y, en la parte superior, haga clic en "agregar formulario". Aparecerá una ventana emergente y podrá seleccionar el formulario que acaba de crear. Puede continuar editando la página para satisfacer mejor sus necesidades, o puede guardarla y publicarla. Puede agregar el inicio de sesión personalizado que acaba de crear como un widget en la barra lateral de su sitio web.

Cuando se trata de plantillas de inicio de sesión proporcionadas por el creador del sitio web, el proceso es más o menos el mismo; instale la plantilla, edítela a su gusto, cree una nueva página e inserte su formulario creado. Esto se recomienda para aquellos que son nuevos en el diseño de sitios web.

Temas y complementos de terceros

Temas

Es posible que el creador de su sitio web haya proporcionado una plantilla o un tema de inicio de sesión, de forma gratuita o premium, pero es posible que no satisfaga sus necesidades. Afortunadamente, existen numerosos temas y complementos de terceros, especialmente para WordPress. Los temas son como plantillas para todo el sitio web que incorporan diferentes estilos y, con la mayoría de ellos, podrá obtener una página de inicio de sesión elegante y atractiva; El tema no solo afecta la página de inicio de sesión, sino también otros aspectos de su sitio web.

Deberá elegir un tema con una página de inicio de sesión que le guste. Lo bueno es que con la mayoría de los temas, puede hacer un recorrido por las funciones antes de instalar. Los temas cuestan entre $2 y más de $100. Los temas, al igual que las plantillas del creador web, son fáciles de editar. Puedes cambiar los colores, fuentes y tamaños del diseño a tu gusto y gusto.

Los temas pueden ser del creador de su sitio web, temas premium o pueden ser de desarrolladores externos como Themeforest .

Complementos

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ón o un formulario de registro. Los complementos están disponibles de forma gratuita y algunos son premium; elige uno en función de tu presupuesto y tus necesidades.

Todos los creadores de sitios web tendrán complementos para que elijas; ya sea que esté utilizando Weebly , Joomla o WordPress , existen numerosos temas. Para crear una página de inicio de sesión 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á a una página de pago donde pagará por el complemento.

Después de instalar el complemento, se le pedirá que edite los diferentes elementos; haga clic en cada elemento para editar y luego haga clic en guardar cambios. Cree una nueva página y agregue el formulario que ha creado usando el complemento.

Conclusión

Una página de inicio de sesión debe ser simple tanto como atractiva. En el pasado reciente se han visto diferentes diseños de páginas de inicio de sesión. Elija solo el método de creación de la página de inicio de sesión con el que se sienta cómodo; no elija codificar si no está bien versado en códigos. Puede obtener asistencia de diseño de un profesional, pero aún mejor, puede obtener ayuda para diseñar su página de inicio de sesión.

Las personas también han utilizado inicios de sesión sociales. Aquí, permite que los visitantes inicien sesión con los detalles de su cuenta de redes sociales, como Facebook o Twitter. Esta también es una buena opción, ya que es lo suficientemente simple y también mejora la presencia y el rendimiento de las redes sociales de su empresa. Puede consultar las páginas de inicio de sesión de sitios web populares para obtener información sobre cómo diseñar la página de inicio de sesión de su sitio web; sin abarrotarlo y sin omitir detalles.