Cómo diseñar un formulario de inicio de sesión en línea para un encabezado global personalizado en Divi

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 realmente 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 utilizando el Módulo de inicio de sesión de Divi. 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 fácilmente con cualquier diseño de encabezado utilizando las opciones de diseño integradas de Divi.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al encabezado personalizado con el formulario de inicio de sesión en línea que crearemos 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 GRATIS el diseño del encabezado del formulario de inicio de sesión en línea

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 nuestra lista de correo electrónico Divi Daily mediante 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.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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 ha hecho, instale y active Divi Theme. 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.

Agregar un nuevo encabezado global

Para que todo funcione, debemos crear un nuevo encabezado global para nuestro sitio web. Para hacer esto, vaya al Tablero 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

Personalización de la sección

Con 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 normal y actualice lo siguiente:

• Color de degradado de fondo a la izquierda:
• Gradiente de fondo Color derecho:
• Dirección del gradiente: 48 grados
• Relleno: 10 px arriba, 10 px abajo, 20 px a la izquierda, 20 px a la derecha

Para que nuestro encabezado personalizado sea más receptivo, agregaremos el siguiente CSS personalizado al elemento principal de la sección.

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 agreguemos el logo para el encabezado.

Actualizar la imagen y el margen del módulo de imagen

Actualice la configuración de la imagen de la siguiente manera:

• Imagen: [agregar logotipo (aproximadamente 64 px por 64 px)]

• Margen: 20px a la derecha

Actualizar la configuración de la fila

Antes de continuar, abra la configuración de la fila y actualice lo siguiente:

• Usar ancho de canalón personalizado: SÍ
• Ancho de la canaleta: 1
• Ancho: 25%
• Alineación de filas: izquierda
• Relleno: 0px arriba, 0px abajo

Agregar el formulario de inicio de sesión en línea a la segunda fila

Añadir fila

Ahora que la primera fila está lista para funcionar, 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 y CSS del formulario de inicio de sesión

Antes de avanzar demasiado en el diseño del formulario de inicio de sesión en línea, primero agreguemos la clase CSS y CSS personalizada al módulo de inicio de sesión. Esto nos permitirá tener la estructura en línea básica del formulario en su lugar antes de poner los toques finales de diseño en el 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:

margin-bottom: 0px !important

A continuación, agregue el siguiente CSS personalizado al cuadro CSS del formulario de inicio de sesión:

width: 100%;

A continuación, agregue el siguiente CSS personalizado al cuadro CSS de campos de inicio de sesión:

padding: 5px 4% !important

Agregar CSS personalizado a la configuración de diseño del encabezado

Dado que tenemos nuestra clase CSS personalizada agregada 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:

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

Antes de dar los toques finales al formulario de inicio de sesión en línea, actualice la configuración de la fila de la siguiente manera:

• Usar ancho de canalón personalizado: SÍ
• Ancho de la canaleta: 1
• Alineación de filas: derecha
• Relleno: 0px arriba, 0px abajo

Configuración de diseño de 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 de 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 Fields: Lato
• Tamaño del texto de los campos: 14px
• Alineación de texto: derecha
• Fuente de enlace: Lato
• Estilo de fuente de 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: 2 píxeles en la parte superior, 2 píxeles en la parte inferior
• Margen: 15px inferior
• Relleno: 0px arriba, 0px abajo, 0px izquierda, 0px derecha

Agregar el menú a la segunda fila

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.

Luego, 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 de 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 verá el usuario 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 se ubicará muy bien dentro del encabezado de cualquier sitio web. Con suerte, esto será útil para su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!