Crear un formulario de inicio de sesión en línea para su encabezado puede ser un gran impulso para la experiencia del usuario. Son perfectos para sitios de membresía y tiendas en línea porque hace que sea muy fácil para los usuarios iniciar sesión en cualquier momento o en cualquier página del sitio. En este tutorial, le mostraremos cómo diseñar un formulario de inicio de sesión en línea para un usuario de encabezado personalizado Divi Theme Builder . Para hacer esto, crearemos un encabezado global receptivo simple y luego diseñaremos un formulario de inicio de sesión en línea compacto en la parte superior derecha del encabezado usando Divi y su módulo de inicio de sesión. La compilación requiere un poco de CSS personalizado, pero una vez que todo esté en su lugar, será fácil personalizar el formulario de inicio de sesión en línea para que coincida con cualquier diseño de encabezado fácilmente utilizando las opciones de diseño integradas de Divi.
¡Empecemos!
Aquí hay un vistazo rápido al encabezado personalizado con el formulario de inicio de sesión en línea que construiremos en este tutorial.
Y aquí está el formulario de inicio de sesión en línea en la pantalla de la tableta y el teléfono.
Aquí está el mensaje y el enlace «cerrar sesión» que se mostrará cuando los usuarios inicien sesión.
Descargue el diseño del encabezado del formulario de inicio de sesión en línea GRATIS
Para poner sus manos en el diseño de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño a su página, simplemente extraiga el archivo zip y agregue uno de los archivos json en Divi Theme Builder usando la opción de portabilidad de Theme Builder .
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Si aún no lo has hecho, instala y activa el tema Divi . Eso es prácticamente todo lo que necesitas para empezar. Crearemos un nuevo diseño de plantilla de encabezado desde cero con Divi Theme Builder.
Adición de un nuevo encabezado global
Para que todo funcione, debemos crear un nuevo encabezado global para nuestro sitio web. Para hacer esto, vaya al Panel de WordPress y navegue a Divi> Theme Builder.
En la Plantilla de sitio web predeterminada, haga clic en «Agregar encabezado global» y luego en «Crear encabezado global».
Luego seleccione la opción Construir desde cero.
Diseño del encabezado global de Divi con un formulario de inicio de sesión en línea
Personalizando la Sección
Desde el editor de diseño de encabezado global, podrá crear el encabezado personalizado para su sitio completamente desde cero. Para comenzar, abra la configuración de la sección regular y actualice lo siguiente:
- Degradado de fondo Color izquierdo:
- Gradiente de fondo Color derecho:
- Dirección del gradiente: 48 grados
- Relleno: 10px arriba, 10px abajo, 20px a la izquierda, 20px a la derecha
Para que nuestro encabezado personalizado responda mejor, agregaremos el siguiente CSS personalizado al elemento principal de la sección.
|
01
02
03
|
display:flex;justify-content:center;align-items:center; |
Agregar el logotipo del encabezado a la primera fila
Ahora que la sección está lista, podemos agregar la primera fila.
Añadir fila
Agregue una fila de una columna a la sección.
Agregar módulo de imagen con imagen de logotipo
En la fila de una columna, agregue un módulo de imagen. Aquí será donde agregaremos el logotipo para el encabezado.
Actualizar imagen y margen del módulo de imagen
Actualice la configuración de la imagen de la siguiente manera:
- Imagen: [agregar logotipo (alrededor de 64 px por 64 px)]
- Margen: 20px derecho
Actualizar configuración de fila
Antes de continuar, abra la configuración de la fila y actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 25%
- Alineación de filas: izquierda
- Relleno: 0px arriba, 0px abajo
Adición del formulario de inicio de sesión en línea a la segunda fila
Añadir fila
Ahora que la primera fila está lista, notará en el editor que la primera fila ocupará el 25% de la sección de la izquierda. Esta será esencialmente la fila designada para el logotipo de nuestro encabezado. Necesitamos crear una fila de sección para el formulario de inicio de sesión en línea y el menú en el lado derecho.
Agregue una segunda fila con una estructura de una columna a la sección.
Agregar formulario de inicio de sesión
Dentro de la fila de una columna, agregue un módulo de inicio de sesión.
Eliminar contenido predeterminado
En la configuración de inicio de sesión, elimine el título simulado y el contenido del cuerpo.
Agregar clase personalizada de formulario de inicio de sesión y CSS
Antes de avanzar demasiado en el diseño del formulario de inicio de sesión en línea, primero agreguemos el CSS personalizado y la clase CSS al módulo de inicio de sesión. Esto nos permitirá obtener la estructura básica en línea del formulario antes de dar los toques finales de diseño al formulario con las opciones integradas de Divi.
En la pestaña Avanzado, agregue la siguiente clase CSS:
- Clase CSS: formulario de inicio de sesión de encabezado
Agregue el siguiente CSS personalizado al cuadro CSS de descripción de inicio de sesión:
|
01
|
margin-bottom: 0px !important |
A continuación, agregue el siguiente CSS personalizado al cuadro CSS del formulario de inicio de sesión:
|
01
|
width: 100%; |
A continuación, agregue el siguiente CSS personalizado al cuadro CSS de los campos de inicio de sesión:
|
01
|
padding: 5px 4% !important |
Agregue CSS personalizado a la configuración de diseño de encabezado
Dado que hemos agregado nuestra Clase de CSS personalizada al módulo de formulario de inicio de sesión, podemos agregar nuestro CSS personalizado que solo apuntará a este formulario de inicio de sesión en particular.
Abra la configuración de diseño del encabezado y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
.header-login-form .et_pb_login_form form {display: flex;justify-content: flex-end;align-items: center;}.header-login-form .et_pb_login_form .et_pb_contact_form_field {padding-bottom: 0px;margin-right: 5px;}.header-login-form .et_pb_forgot_password {display:none;} |
Este CSS hará que los campos de inicio de sesión y el botón se muestren en línea (horizontalmente), ocultará el mensaje «¿olvidó su contraseña?» enlace, y agregue un pequeño margen entre los campos.
Configuración de fila
Antes de dar los toques finales al formulario de inicio de sesión en línea, actualicemos la configuración de la fila de la siguiente manera:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Alineación de filas: derecha
- Relleno: 0px arriba, 0px abajo
Configuración del diseño del formulario de inicio de sesión
Ahora estamos listos para actualizar la configuración del formulario de inicio de sesión. Abra la configuración del módulo del formulario de inicio de sesión y actualice lo siguiente:
- Usar color de fondo: NO
Texto de campo y enlace
- Fondo de campos: Color: rgba(255,255,255,0.2)
- Color del texto de los campos: #ffffff
- Fuente de los campos: Lato
- Tamaño del texto de los campos: 14px
- Alineación de texto: derecha
- Fuente del enlace: Lato
- Estilo de fuente del enlace: Subrayado
- Color del texto del enlace: #ff3190
Diseño de botones
- Tamaño del texto del botón: 15px
- Color de fondo del botón: #ff3190
- Ancho del borde del botón: 0px
- Fuente del botón: Lato
- Relleno de botones: 2px arriba, 2px abajo
- Margen: 15px inferior
- Relleno: 0px arriba, 0px abajo, 0px izquierda, 0px derecha
Módulo de menú
Con nuestro formulario de inicio de sesión en línea en su lugar, podemos agregar el menú directamente debajo de él.
Agregue un módulo de menú debajo del módulo de formulario de inicio de sesión.
Configuración del módulo de menú
Actualice la configuración del menú de la siguiente manera:
- Color de fondo: rgba(0,0,0,0)
- Fuente del menú: Lato
- Peso de la fuente del menú: Negrita
- Color del texto del menú: #ffffff
- Tamaño del texto del menú: 16px
- Alineación de texto: derecha
- Color de fondo del menú desplegable: #ffffff
- Color de la línea del menú desplegable: rgba(0,0,0,0)
- Color del texto del menú desplegable: #000000
- Color de fondo del menú móvil: #ffffff
- Color del texto del menú móvil: #000000
- Color del icono del carrito de compras: #ffffff
- Color del icono de búsqueda: #ffffff
- Color del icono del menú de hamburguesas: #ffffff
Guardar el encabezado del formulario de inicio de sesión en línea
Asegúrese de guardar el diseño antes de salir del editor de diseño de encabezado.
A continuación, guarde también la configuración del generador de temas.
Resultados finales
¡Eso es todo!
Ahora veamos el resultado final. Para ver el resultado final, simplemente visite una página en su sitio web.
Aquí está el encabezado en la pantalla del escritorio.
Aquí está el encabezado del formulario de inicio de sesión en línea en la pantalla de la tableta.
Y aquí está el formulario de inicio de sesión en línea en la pantalla del teléfono. Observe también el menú móvil.
Y esto es lo que el usuario verá una vez que haya iniciado sesión.
Pensamientos finales
Este encabezado global personalizado con un formulario de inicio de sesión en línea definitivamente será útil para cualquier sitio de membresía o tienda en línea. Con solo un poco de CSS personalizado, pudimos convertir el módulo de inicio de sesión de Divi en un elegante formulario de inicio de sesión en línea que encajará perfectamente en el encabezado de cualquier sitio web. Esperemos que esto sea útil para su próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!