Crear un formulario de inicio de sesión en línea para su encabezado puede ser un maravilloso 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, construiremos 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.

formulario de inicio de sesión en línea

Y aquí está el formulario de inicio de sesión en línea en la pantalla de la tableta y el teléfono.

formulario de inicio de sesión en línea

Aquí está el mensaje y el enlace «cerrar sesión» que se mostrará cuando los usuarios inicien sesión.

formulario de inicio de sesión en línea

Agregar 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> Generador de temas.

En la Plantilla de sitio web predeterminada, haga clic en «Agregar encabezado global» y luego en «Crear encabezado global».

formulario de inicio de sesión en línea

Luego seleccione la opción para Construir desde cero.

formulario de inicio de sesión en línea

Diseño del encabezado global Divi con un formulario de inicio de sesión en línea

Personalizando la Sección

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

  • Gradiente de fondo Color izquierdo:
  • Gradiente de fondo Color correcto:
  • Dirección de degradado: 48 grados
  • Relleno: 10 píxeles superior, 10 píxeles inferior, 20 píxeles izquierda, 20 píxeles derecha

formulario de inicio de sesión en línea

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

01
02
03
display:flex;
justify-content:center;
align-items:center;

formulario de inicio de sesión en línea

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.

formulario de inicio de sesión en línea

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

formulario de inicio de sesión en línea

Actualizar imagen del módulo de imagen y margen

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

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

formulario de inicio de sesión en línea

  • Margen: 20 píxeles a la derecha

formulario de inicio de sesión en línea

Actualizar configuración de fila

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

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

formulario de inicio de sesión en línea

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

formulario de inicio de sesión en línea

Añadir formulario de inicio de sesión

Dentro de la fila de una columna, agregue un módulo de inicio de sesión.

formulario de inicio de sesión en línea

Eliminar contenido predeterminado

En la configuración de inicio de sesión, elimine el título falso y el contenido del cuerpo.

formulario de inicio de sesión en línea

Agregar formulario de inicio de sesión Clase personalizada y CSS

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

Agregue el siguiente CSS personalizado al cuadro CSS 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%;

Agregue el siguiente CSS personalizado al cuadro CSS de Campos de inicio de sesión:

01
padding: 5px 4% !important

formulario de inicio de sesión en línea

Agregue CSS personalizado a la configuración de 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 ese 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á «¿olvidó su contraseña?» enlace y agregue un pequeño margen entre los campos.

formulario de inicio de sesión en línea

Configuración de fila

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

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

formulario de inicio de sesión en línea

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

formulario de inicio de sesión en línea

Texto de campo y enlace
  • Fondo de campos: Color: rgba (255,255,255,0.2)
  • Color del texto de los campos: #ffffff
  • Fuente de campos: Lato
  • Tamaño del texto de los campos: 14 px
  • Alineación de texto: derecha
  • Fuente de enlace: Lato
  • Estilo de fuente de enlace: subrayado
  • Color del texto del enlace: # ff3190

formulario de inicio de sesión en línea

Diseño de botones
  • Tamaño del texto del botón: 15 px
  • 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: fondo 15px
  • Relleno: 0px arriba, 0px abajo, 0px izquierda, 0px derecha

formulario de inicio de sesión en línea

Agregar el menú a la segunda fila

Módulo de menú

Con nuestro formulario de inicio de sesión en línea, 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.

formulario de inicio de sesión en línea

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

formulario de inicio de sesión en línea

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 la configuración del generador de temas también.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!