La creación de un formulario El 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 permiten a los usuarios iniciar sesión en cualquier momento y en cualquier página del sitio.
En este tutorial, le mostraremos cómo diseñar un formulario en línea usando un encabezado personalizado en Divi Theme Builder. Para hacer esto, crearemos un encabezado global responsivo simple y luego diseñaremos un formulario inicio de sesión compacto en línea 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 código 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 de los servicios integrados de Divi.
Resumen de resultados
Aquí hay una descripción general rápida del 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 de cierre de sesión y el enlace que se mostrará cuando los usuarios inicien sesión.
Lo que necesitas para empezar
Si aún no lo ha hecho, instalar y activar el tema Divi . Eso es prácticamente todo lo que necesita para comenzar. Vamos a crear un nuevo diseño de plantilla de encabezado desde cero con Divi Theme Builder.
Agregar un nuevo encabezado global
Para que todo funcione, necesitamos crear un nuevo encabezado global para nuestro Sitio web. Para hacer esto, navegue al tablero de WordPress y navegue a Divi> Theme Builder.
Sobre el plantilla de sitio web de forma predeterminada, haga clic en "Agregar encabezado global" y luego en "Crear encabezado global".
Luego seleccione la opción Construir desde cero.
Diseñe el encabezado global Divi con un formulario de inicio de sesión en línea
Sección de personalización
Desde el Editor de diseño de encabezado global, podrá crear completamente el encabezado personalizado de su sitio. Para comenzar, abra la configuración de la sección normal y actualice lo siguiente:
- Gradiente de fondo de color izquierdo:
- Gradiente de fondo derecho:
- Dirección gradiente: 48 grados
- Relleno: 10 píxeles en la parte superior, 10 píxeles en la parte inferior, 20 píxeles a la izquierda, 20 píxeles 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 línea
Ahora que la sección está lista, podemos agregar la primera línea.
Agregar una fila
Agregue una fila a una columna en la sección.
Agregar un módulo de imagen con una imagen de logotipo
En la fila de una sola columna, agregue un módulo de imagen. Aquí será donde agregaremos 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 píxeles por 64 píxeles)]
- Margen: 20 píxeles a la derecha
Actualizar parámetros de línea
Antes de continuar, abra la configuración de la fila y actualice lo siguiente:
- Use un ancho de canal personalizado: SÍ
- Ancho de canal: 1
- Ancho: 25%
- Alineación de fila: izquierda
- Relleno: 0px alto, 0px bajo
Agregar el formulario de inicio de sesión en línea a la segunda línea
Agregar una fila
Ahora que la primera fila está lista, notará en el editor que la primera fila ocupará el 25% de la sección izquierda. Esta será básicamente la línea designada para nuestro logotipo de encabezado. Necesitamos crear una línea de sección para el formulario y el menú de inicio de sesión en línea en el lado derecho.
Agregue una segunda fila con estructura a una columna en la sección.
Agregar un formulario de inicio de sesión
En 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 falso y el contenido del cuerpo.
Agregue un formulario de inicio de sesión y una clase CSS personalizada
Antes de profundizar demasiado en el diseño del formulario de inicio de sesión en línea, primero agreguemos las clases CSS y CSS personalizadas al módulo de inicio de sesión. Esto nos permitirá configurar la estructura básica en línea del formulario antes de darle el toque de diseño final al formulario con las opciones integradas de Divi.
En la pestaña Avanzado, agregue la siguiente clase CSS:
- Clase CSS: encabezado-inicio de sesión-formulario
Agregue el siguiente CSS personalizado en el área CSS de la descripción de la conexión:
margin-bottom: 0px !important
Luego agregue el siguiente CSS personalizado en el área CSS del formulario de inicio de sesión:
width: 100%;
Agregue el siguiente CSS personalizado al cuadro CSS de Campos de conexión:
padding: 5px 4% !important
Agregar CSS personalizado a la configuración del diseño del encabezado
Como tenemos nuestra clase CSS personalizada agregada al módulo del formulario de inicio de sesión, podemos agregar nuestro CSS personalizado que solo se dirigirá 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 aparezcan en línea (horizontalmente), oculten el enlace "¿Olvidó su contraseña?". »Y agregue un pequeño margen entre los campos.
Configuraciones de línea
Antes de dar los últimos toques al formulario de inicio de sesión en línea, actualice los parámetros de línea de la siguiente manera:
- Use un ancho de canal personalizado: SÍ
- Ancho de canal: 1
- Alineación de línea: recta
- Relleno: 0px alto, 0px bajo
Configuración de diseño para el 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 del campo: Color: rgba (255,255,255,0.2)
- Color del texto del campo: #ffffff
- Policía de campo: Lato
- Tamaño del texto del campo: 14 px
- Alineación de texto: derecha
- Fuente del 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 de boton: Lato
- Relleno de botones: 2px en la parte superior, 2px en la parte inferior
- Margen: 15px bajo
- Relleno: 0px en la parte superior, 0px en la parte inferior, 0px a la izquierda, 0px a la derecha
Agregar el menú a la segunda línea
Módulo de menú
Con nuestro formulario de inicio de sesión en línea, podemos agregar el menú directamente debajo.
Agregue un módulo de menú debajo del módulo de formulario de inicio de sesión.
Configuraciones 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 en el 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: #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
Asegúrese de guardar el diseño antes de salir del Editor de diseño de encabezado.
Luego también guarde la configuración del generador de temas.
Resultados finales
¡Eso es!
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. También tenga en cuenta el menú móvil.
Y esto es lo que verá el usuario cuando inicie sesión.
Consideraciones 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 quedaría bien en el encabezado de cualquier Sitio web. Espero que esto sea útil para su próximo proyecto.
Espero tener noticias tuyas en los comentarios.
¡A vuestra salud!
