Cómo diseñar un formulario de inicio de sesión emergente creativo en Divi

Un buen formulario de inicio de sesión ayuda a aumentar la experiencia del usuario de su sitio web. La idea de nuestro tutorial de hoy es crear un formulario de inicio de sesión utilizando Divi Builder, que aparecerá cuando haga clic en el botón de inicio de sesión en la página de inicio. La mayoría de las veces, cuando hacemos clic en el botón de inicio de sesión, se nos redirige a la página de inicio de sesión, cuando un formulario emergente simple es mucho más conveniente y refrescante. Así que hoy aprenderemos a diseñar un formulario de inicio de sesión emergente creativo. Esto lo crearemos con la ayuda del módulo de inicio de sesión de Divi y algunos módulos de botones. Así que comencemos el tutorial de hoy sin demora.

Nota: Solo trabajaremos con diseño de front-end. Si alguien tiene problemas para iniciar sesión, por ejemplo, alguien necesita restablecer su contraseña, debemos pasar a la página de inicio de sesión tradicional. Para las personas que están enamoradas de las páginas de inicio de sesión personalizadas, este tutorial es perfecto.

Avance

Aquí está la vista previa del diseño de hoy. Podemos ver que, al hacer clic en el botón de inicio de sesión, aparecen los formularios de inicio de sesión, y cuando hacemos clic en cerrar sesión, aparece una ventana emergente de advertencia antes del cierre de sesión.

Formulario de inicio de sesión emergente con botones de inicio / cierre de sesión

Para comenzar con el diseño, primero debe ir a Divi

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Ahora tenemos que descargar el encabezado y pie de página de los paquetes de diseño de Crowdfunding de Divi desde esta página . Ingrese su ID de correo electrónico y haga clic en descargar.

Luego, verá una opción para descargar nuevamente y haga clic en ella. Ahora, descomprima el archivo una vez finalizada la descarga, vuelva al generador Divi y haga clic en la opción de portabilidad.

Ahora siga el procedimiento adicional que se describe a continuación.

• Seleccione la pestaña de importación en la ventana emergente de portabilidad.
• Sube el archivo Json descargado de la carpeta descomprimida.
• Haga clic en el botón Importar.
• Luego haga clic en editar para realizar ajustes en el encabezado.

Parte 1: Creación de un botón de inicio de sesión / cierre de sesión

Primero, abra las capas para que podamos ver todos los elementos fácilmente. En la fila superior de la sección del encabezado, elimine los módulos de redes sociales.

Crear botón de inicio de sesión

Ya hay un botón de inicio de sesión en la cuarta columna de las filas superiores. Lo modificaremos.

Actualice lo siguiente en la pestaña de diseño:

• Icono de botón: icono de candado (ver captura de pantalla)
• Ubicación del icono del botón: Izquierda
• Mostrar solo el icono al pasar el mouse para el botón: NO
• Acolchado: 0.5em superior, 0.5em inferior, 2em izquierdo, 0.7em derecho

Agregue dos clases CSS personalizadas al botón desde la pestaña avanzada de la siguiente manera:

• Clase CSS: et-toggle-popup et-popup-login-button

Botón Cerrar sesión

Para crear nuestro botón de cierre de sesión, clone el botón de inicio de sesión existente en la columna 4. Además, etiquételos para una mayor identificación.

Cambie el texto del botón clonado por "Cerrar sesión".

Cambie el icono del botón de la pestaña de diseño como se indica a continuación.

Por último, cambie la Clase CSS de la pestaña avanzada.

• Clase CSS: et-toggle-popup et-popup-logout-button

Parte 2: Creación de una página emergente

Hemos creado los botones con éxito. No, diseñaremos la sección emergente que actuará como un formulario. Para crear eso, agregue una sección regular debajo de la sección del encabezado.

Configuración y adición de secciones

Démosle a la sección un fondo blanco.

• Color de fondo: #ffffff

Realice los siguientes ajustes en la pestaña de diseño de la sección.

• Ancho: 100%
• Ancho máximo: 800px (escritorio), 80% (tableta), 100% (teléfono)
• Alineación de la sección: centro
• Altura: automático (escritorio y tableta), 100% (teléfono)
• Altura máxima: 100%
• Relleno: 0px arriba, 0px abajo

• Esquinas redondeadas: 10px
• Box Shadow: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 100px
• Fuerza de propagación de la sombra de caja: 50px

Agreguemos una clase CSS desde la pestaña avanzada.

• Clase CSS: et-popup-login

Luego agregue el siguiente código CSS en el elemento principal.

overscroll-behavior: contain;

Luego, realice algunos ajustes en Visibilidad y posición.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: automático
• Posición: fija
• Ubicación: Center Center
• Índice Z: 999999

Configuración y adición de filas

Agreguemos una fila de una columna a la nueva sección.

Abra la configuración de la fila y realice los siguientes ajustes.

• Usar ancho de canalón personalizado: SÍ
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 5vh abajo

Parte 3: Creación del icono Cerrar ventana emergente

Usaremos un módulo de propaganda para crear un icono de cierre emergente.

Elimine los textos del módulo de la configuración y agregue el siguiente icono.

• Usar icono: SÍ
• Icono: icono "x" (ver captura de pantalla)

Aplique la siguiente configuración desde la pestaña de diseño.

• Color del icono: # 004e43
• Alineación de imagen / icono: centrado
• Usar tamaño de fuente de icono: SÍ
• Tamaño de fuente del icono: 50px

• Ancho: 50px
• Alineación del módulo: derecha
• Alto: 50px

Agregue una clase CSS al módulo de propaganda desde la pestaña avanzada.

• Clase CSS: et-toggle-popup

Parte 4: Creando el formulario

Nuestro formulario de inicio de sesión tiene dos diseños, uno para iniciar sesión y otro para cerrar sesión. Entonces, habrá dos módulos de formulario de inicio de sesión diferentes. El primero aparecerá cuando un usuario se desconecta y necesita iniciar sesión, y otro es cuando el usuario está conectado y quiere desconectarse. Concepto fácil, volvamos al trabajo.

Crear formulario de desconectado

Agreguemos un módulo de inicio de sesión para crear nuestro formulario de desconexión.

Ahora abra la configuración del módulo de formulario y modifique en la pestaña de contenido.

• Redirigir a la página actual: SÍ
• Usar color de fondo: NO

Ficha Diseño

• Color de fondo de los campos: rgba (0,78,67,0.05)
• Color de fondo de enfoque de campos: rgba (0,78,67,0.15)
• Alineación de texto: centro
• Color del texto: oscuro

• Fuente del título: Poppins
• Peso de la fuente del título: Semi negrita
• Color del texto del título: # 000000
• Altura de la línea de título: 1.3em
• Fuente del cuerpo: Work Sans

Ahora volvamos a la sección de encabezado de las capas. Luego, abra la configuración del botón para de la cuarta columna de la primera fila. Vaya a la pestaña de diseño y abra la opción de botón. Luego, haga clic en la opción de tres puntos y seleccione "estilo de botón de copia".

Ahora péguelo en el formulario de inicio de sesión que acabamos de crear.

Actualizaremos el estilo del botón para nuestro formulario de inicio de sesión.

• Usar estilos personalizados para el botón: SÍ
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 004e43
• Color de fondo del botón (desplazamiento): # 00683c
• Ancho del borde del botón: 0px
• Relleno de botones: 15 píxeles en la parte superior, 15 píxeles en la parte inferior

Carguemos la configuración de tamaño también.

• Ancho: 100%
• Ancho máximo: 80% (escritorio), 90% (tableta), 95% (teléfono)
• Alineación del módulo: centro

Ahora vaya a la pestaña avanzada y agregue la clase CSS y CSS personalizado como se escribe a continuación.

• Clase CSS: formulario et-log-out-form

Agregue el siguiente código al cuadro de descripción de inicio de sesión.

width: 100% !important;
float: none !important;

Luego agregue este código al cuadro Formulario de inicio de sesión.

width: 100% !important;
padding: 0px !important;

Esto hace que el formulario de inicio de sesión sea algo como esto.

Creación del formulario de "inicio de sesión"

Hemos terminado con el formulario "Desconectado" y ahora creemos el formulario "Conectado" con contenido diferente para ampliar la experiencia del usuario. Para hacer eso, clonemos el formulario de inicio de sesión existente.

Ahora, actualice los nombres de cada formulario. A continuación, abra el formulario "Conectado" desde la pestaña de contenido para abrir la configuración de texto. Luego, desde el cuadro de título, tendrá un menú desplegable en el lado derecho. Ábrelo y selecciona "Título del sitio".

Abra la configuración dinámica del título del sitio y actualícela de la siguiente manera.

• Antes: "Está intentando cerrar la sesión de"
• Después: â € œ. â € œ

Ahora edite la configuración de la descripción de acuerdo con su elección, pero coloque la descripción como Encabezado 3.

En muchos formularios de inicio de sesión de sitios web, hemos visto un mensaje personalizado adjunto al enlace "cerrar sesión". Personalizaremos la opción de texto del cuerpo de la pestaña avanzada para crearla.

• Seleccione la pestaña de enlace debajo de las opciones de texto del cuerpo.
• Fuente de enlace: Work Sans
• Peso de la fuente del enlace: Semi negrita
• Estilo de fuente de enlace: TT
• Alineación del texto del enlace: centro
• Color del texto del enlace: #ffffff

Vaya a la pestaña avanzada y agregue una clase CSS y CSS personalizado.

• Clase CSS: et-log-in-form

CSS personalizado para el formulario de inicio de sesión:

display:none;

Parte 5: Códigos personalizados

Necesitamos agregar un módulo de código para agregar códigos personalizados. Agreguemos un módulo de código debajo del último módulo de inicio de sesión.

Código CSS

Agregue el código CSS proporcionado en el módulo dentro de Etiquetas de estilo .

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Código JQuery

Ahora ejecute el siguiente código JQuery en el módulo dentro de Script Tags.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Resultado del diseño

Entonces, aquí está el resultado de nuestro diseño. Todo está en su lugar y funciona perfectamente.

Ultimas palabras

Hoy vio cómo diseñar un formulario de inicio de sesión personalizado creativo con el módulo de inicio de sesión de Divi . De esta manera, puede hacer coincidir la estética del sitio web en un panel de inicio de sesión personalizado. Espero que este tutorial le resulte útil y, si es así, ¡compartirlo será espléndido!