Necesidad de crear un encabezado global con formulario conexión en DIVI?
La creación de un formulario iniciar sesión en su encabezado puede ser un gran impulso para la experiencia del usuario.
Son ideales para sitios web de suscripción y tiendas en línea, ya que permiten a los usuarios iniciar sesión en cualquier momento en cualquier página del sitio web.
En este tutorial, le mostraremos cómo diseñar un formulario inicio de sesión en línea para usuarios en un encabezado personalizado. ¡Empecemos!
vista
Aquí está la vista previa rápida del encabezado personalizado con el formulario de inicio de sesión que vamos a crear en este tutorial.
Aquí está el mensaje de "cerrar sesión" y el enlace que se mostrará cuando los usuarios inicien sesión.
Agregar un nuevo encabezado global
Para que todo funcione, necesitamos crear un nuevo encabezado global para nuestro Sitio web. Para hacer esto, vaya 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", luego haga clic en "Crear encabezado global".
Diseño de encabezado global Divi con un formulario de inicio de sesión horizontal
Personaliza la sección
Desde el editor de diseño de encabezado global, puede crear el encabezado personalizado de su sitio web Empezando de la nada. Para comenzar, abra la configuración en la sección normal y actualice lo siguiente:
- Color degradado de fondo izquierdo:
- Color degradado de fondo derecho:
- Dirección del gradiente: 48 grados
- Margen interior: 10 px arriba, 10 px abajo, 20 px a la izquierda, 20 px a la derecha
Para que nuestro encabezado responda mejor, agregaremos el siguiente CSS personalizado al elemento de la sección principal.
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.
Añadir línea
Agregue una fila a una columna en la sección.
Agregue un módulo de imagen con una imagen de logotipo
En la fila de una columna, agregue un módulo Imagen. Aquí será donde agregaremos el logotipo del 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 logo (aprox. 64 x 64 px)]
- Margen: 20px derecho
Actualiza los parámetros de la línea
Antes de continuar, abra la configuración de línea y actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Espacio entre columnas: 1
- Ancho máximo: 25%
- Alineación: izquierda
- Margen interno: 0px superior, 0px inferior
Se agregó un formulario de inicio de sesión horizontal a la segunda fila
Añadir línea
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 fila de sección para el formulario de inicio de sesión y el menú 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
Dentro de la fila de una columna, agregue un módulo 'Conectar'.
Eliminar contenido predeterminado
En la configuración del módulo de inicio de sesión, elimine el título falso y el contenido del cuerpo.
Agregue una clase personalizada para el formulario de inicio de sesión y CSS
Antes de ir demasiado lejos en el diseño del formulario de inicio de sesión, primero agreguemos la clase CSS y el CSS personalizado al módulo de inicio de sesión. Esto configurará la estructura básica en línea del formulario antes de dar los toques finales al diseño del formulario con las opciones integradas de Divi.
Consulte también nuestra guía sobre Cómo crear un menú lateral deslizante y receptivo en 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 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 área CSS de los campos de inicio de sesión:
padding: 5px 4% !important
Agregue CSS personalizado a la configuración de diseño del encabezado
Dado que agregamos nuestra clase CSS personalizada al módulo de formulario de inicio de sesión, podemos agregar nuestro CSS personalizado que solo se dirigirá a ese formulario de inicio de sesión en particular.
Lea también nuestro tutorial sobre Cómo crear la página del blog con el módulo Blog con DIVI
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 muestren en línea (horizontalmente), el mensaje "¿Olvidó su contraseña?" se ocultará y se agregará un pequeño margen entre los campos.
Configuraciones de línea
Antes de dar los toques finales al formulario de inicio de sesión, actualicemos los parámetros de la línea de la siguiente manera:
- Usar ancho de canalón personalizado: SÍ
- Espacio entre columnas: 1
- Alineación: Derecha
- Margen interno: 0px superior, 0px inferior
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 Connect y actualice lo siguiente:
- Usar color de fondo: NO
Texto de campo y enlace
- Campos de color de fondo: rgba(255,255,255,0.2)
- Campos de color de texto: #ffffff
- Fuente de los campos: Lato
- Campos de tamaño de texto: 14px
- Alineación del texto: derecha
Diseño de botones
- Usar estilos personalizados para Botón: NO
- Tamaño del texto del botón: 15px
- Botón de fondo: #ff3190
- Botón de ancho de borde: 0 píxeles
- Fuente del botón: Lato
- Botón de margen: 2px arriba, 2px abajo
- Botón de relleno: 15px inferior
- Margen interior: 0 px arriba, 0 px abajo, 0 px a la izquierda, 0 px a la derecha
Agregar el menú a la segunda línea
Módulo de menú
Con nuestro formulario de inicio de sesión en su lugar, podemos agregar el menú directamente debajo.
Agregue un módulo de menú debajo del módulo de inicio de sesión.
Configuraciones del módulo de menú
Actualice la configuración del menú de la siguiente manera:
- Fondo: rgba(0,0,0,0)
- Menú de fuentes: Lato
- Menú de luz suave: Negrita
- Color del texto del menú: #ffffff
- Tamaño del texto del menú: 16px
- Alineación del texto: derecha
- Color de fondo del menú desplegable: #ffffff
- Color de fila 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 encabezado.
A continuación, guarde también la configuración de Theme Builder.
Resultados finales
Está hecho !
Ahora veamos el resultado final. Para ver el resultado final, todo lo que tiene que hacer es visitar una página en su sitio web.
Y esto es lo que verá el usuario cuando inicie sesión.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Este encabezado global personalizado con un formulario de inicio de sesión definitivamente será útil para cualquier sitio web de suscripción 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 que encajará perfectamente en el encabezado de cualquier sitio web.
Espero que esto sea útil para su próximo proyecto. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
