Cómo crear un formulario de inicio de sesión emergente con botones de inicio/cierre de sesión en Divi

Crear un formulario de inicio de sesión emergente en Divi puede ser una forma efectiva de mejorar el diseño y la experiencia del usuario al iniciar y cerrar sesión en su sitio. La idea es crear un formulario de inicio de sesión que se muestre en un cuadro emergente cada vez que el usuario haga clic en un botón de inicio de sesión en el encabezado de la página. Esto es más conveniente que redirigir al usuario a una página de inicio de sesión personalizada. Además, permite a los desarrolladores web crear un diseño personalizado del formulario de inicio de sesión (al menos en la interfaz inicial) que puede ser una alternativa refrescante a la experiencia de inicio de sesión tradicional de WordPress.

En este tutorial, vamos a crear un formulario de inicio de sesión emergente con botones de inicio y cierre de sesión personalizados en Divi. Con el módulo de inicio de sesión de Divi y un par de módulos de botones, crearemos una experiencia de inicio de sesión emergente fluida en la parte frontal al permitir que los usuarios inicien sesión y cierren sesión sin ser redirigidos a una página diferente.

Por supuesto, esta solución se limita al diseño del formulario de inicio de sesión de front-end, lo que significa que cualquier error que ocurra (o si el usuario necesita restablecer una contraseña) se redirigirá al diseño de página/formulario de inicio de sesión tradicional de WordPress que se encuentra en “wp-login .php”. Sin embargo, para aquellos que buscan un diseño de inicio de sesión personalizado en el front-end sin tener que usar un complemento, esta puede ser la solución para usted.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Observe cómo el botón de inicio de sesión y los botones de cierre de sesión cambian respectivamente. Y, una vez que el usuario inicia sesión, permanece en la página actual. Además, el formulario de inicio de sesión emergente muestra diferentes contenidos de «advertencia» cada vez que el usuario intenta cerrar sesión.

Descarga la Plantilla GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargar el archivo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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.

Descárgalo gratis

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

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Cómo cargar la plantilla GRATIS

Para cargar la plantilla, navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.

Luego, en la esquina superior derecha, verás un ícono con dos flechas. Haga clic en el icono.

Vaya a la pestaña de importación, cargue el archivo JSON que pudo descargar en esta publicación y haga clic en ‘ Importar plantillas de Divi Theme Builder ‘.

Una vez que haya cargado el archivo, notará un nuevo encabezado y pie de página global en su plantilla de sitio web predeterminada. Guarde los cambios de Divi Theme Builder tan pronto como desee que se active la plantilla.

Para modificar los elementos de la plantilla de encabezado, comience abriendo la plantilla.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Aunque puede agregar este formulario de inicio de sesión emergente y botones personalizados de inicio/cierre de sesión a cualquier encabezado personalizado, vamos a utilizar un encabezado prefabricado para acelerar el proceso y comenzar con el diseño.

Si aún no lo has hecho, instala y activa el tema Divi .

Importar plantilla de encabezado de crowdfunding a Theme Builder

Para comenzar, descargue el encabezado y el pie de página gratuitos para el paquete de diseño de crowdfunding de Divi . Para hacer esto, vaya a la entrada del blog .

Luego ingrese su correo electrónico para descargar el archivo zip.

Después de eso, descomprima el archivo para que esté listo para importar.

Para importar el archivo al generador de temas, siga estos pasos:

Vaya a Divi > Generador de temas.
Haga clic en el icono de portabilidad.
En la ventana emergente Portabilidad, seleccione la pestaña de importación.
Elija el archivo descomprimido previamente descargado para importarlo.
Haga clic en el botón Importar.
Haga clic en el icono de edición para editar el encabezado importado.

Creación del formulario de inicio de sesión emergente con botones personalizados de inicio/cierre de sesión en Divi

Parte 1: Creación de los botones de inicio y cierre de sesión

Una vez en el editor de diseño de encabezado global, abra la vista de capas para que pueda ver todos los elementos fácilmente.

En la fila superior de la sección del encabezado, elimine el módulo de seguimiento de redes sociales junto al botón Iniciar sesión en la columna 3.

Creación del botón de inicio de sesión

Para crear nuestro botón de inicio de sesión, abra la configuración del módulo de botones en la columna 3 de la fila superior.

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 sobre el botón: NO
Acolchado: 0,5 em arriba, 0,5 em abajo, 2 em izquierda, 0,7 em derecha

En la pestaña Avanzado, asigne al botón dos Clases CSS personalizadas de la siguiente manera:

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

Creación del botón de cierre de sesión

Para crear nuestro botón de cierre de sesión, duplique el botón de inicio de sesión existente en la columna 3.

Para ayudar a distinguir los dos botones, puede actualizar la etiqueta de cada uno respectivamente. Luego, abra la configuración para el módulo de botón duplicado en la columna 3.

Cambie el texto del botón para que diga «Cerrar sesión».

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

Icono de botón: icono de desbloqueo (ver captura de pantalla)

En la pestaña Avanzado, actualice el botón Clases CSS de la siguiente manera:

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

La primera clase seguirá siendo la misma, pero la segunda clase será diferente.

Parte 2: Creación de la sección emergente

Una vez que los botones estén terminados, estamos listos para crear la sección emergente que servirá como nuestra ventana emergente que contiene los formularios de inicio de sesión.

Debajo de la sección de encabezado, agregue una nueva sección regular.

Luego inserte una fila de una columna dentro de la sección.

Ajustes de sección

Antes de actualizar la fila, abra la configuración de la sección.

En la pestaña de contenido, dale a la sección un color de fondo blanco:

Color de fondo: #ffffff

En la pestaña de diseño, actualice lo siguiente:

Ancho: 100%
Ancho máximo: 800 px (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
Sombra de caja: ver captura de pantalla
Posición vertical de la sombra del cuadro: 0px
Fuerza de desenfoque de sombra de cuadro: 100px
Fuerza de propagación de la sombra del cuadro: 50px

En la pestaña Avanzado, actualice lo siguiente:

Agregue una clase CSS personalizada.

Clase CSS: et-popup-login

Agregue un fragmento de CSS personalizado al elemento principal:

overscroll-behavior: contain;

Actualiza las opciones de Visibilidad y Posición .

Desbordamiento horizontal: oculto
Desbordamiento vertical: automático
Posición: Fija
Ubicación: Centro Centro
Índice Z: 999999

Configuración de fila

Una vez que la configuración de la sección esté en su lugar, abra la configuración de la fila y actualice la siguiente configuración de diseño:

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

Parte 3: Creando el icono Cerrar ventana emergente

Para crear el ícono Cerrar ventana emergente que cerrará/ocultará la ventana emergente al hacer clic, vamos a usar un módulo de publicidad.

Agregue un nuevo módulo publicitario a la fila.

Abra la configuración del módulo de publicidad y elimine el título y el texto del cuerpo.

Luego agregue el icono de la siguiente manera:

Icono de uso: SÍ
Icono: icono “x” (ver captura de pantalla)

En la pestaña de diseño, actualice lo siguiente:

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

En la pestaña Avanzado, agregue una clase CSS a la propaganda de la siguiente manera:

Clase CSS: et-toggle-popup

Parte 4: Creación de los formularios de inicio de sesión «Cerrar sesión» y «Iniciar sesión»

Para tener un contenido y un diseño diferentes para el formulario de inicio de sesión al iniciar y cerrar sesión, vamos a crear dos módulos de formulario de inicio de sesión diferentes. El primero será el formulario de inicio de sesión que se mostrará cada vez que el usuario «cierre sesión». El segundo será el formulario de inicio de sesión que se mostrará cada vez que el usuario esté «iniciado sesión».

Creación del formulario «Cerrar sesión»

Para crear el formulario de inicio de sesión «Cerrar sesión», agregue un nuevo módulo de formulario de inicio de sesión debajo del ícono del módulo de publicidad dentro de la fila.

Abra la configuración del módulo de inicio de sesión y actualice lo siguiente:

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 del foco de los 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 del título: 1,3 em
Fuente del cuerpo: Work Sans

Para actualizar los estilos de los botones, copie los estilos de los botones del Botón de inicio de sesión que creamos en la tercera columna de la fila en la sección Encabezado.

Luego pegue los estilos de botón en el grupo de opciones de botón en Configuración de inicio de sesión en la pestaña de diseño.

Luego actualice los estilos de botón para el formulario de inicio de sesión de la siguiente manera:

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 px arriba, 15 px abajo

Luego actualice las opciones de tamaño de la siguiente manera:

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

Lengüeta avanzada

En la pestaña Avanzado, actualice la Clase CSS y el CSS personalizado de la siguiente manera:

Clase CSS: et-logged-out-form

CSS personalizado para la descripción de inicio de sesión:

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

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

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

Esto asegurará que el módulo del formulario de inicio de sesión abarque todo el ancho de la fila/columna incluso en el escritorio.

Creación del formulario «Iniciar sesión»

Ahora que la versión «Cerrar sesión» del formulario está completa, debemos crear la versión «Iniciar sesión», que tendrá un contenido y un estilo diferentes para maximizar la experiencia del usuario.

Para crear el formulario de inicio de sesión «Cerrar sesión», duplique el formulario de inicio de sesión existente.

Luego actualice la etiqueta para cada uno de los formularios de inicio de sesión respectivamente.

Abra la configuración para el duplicado (el formulario «Iniciado sesión») y agregue el Título del sitio como contenido dinámico al Título del módulo del formulario de inicio de sesión.

A continuación, abra la configuración del contenido dinámico del título del sitio y actualice el contenido anterior y posterior de la siguiente manera:

Antes: «Está intentando cerrar sesión en «
Después: «. “

Esto creará una buena notificación dinámica para los usuarios que intenten cerrar sesión en el sitio.

Luego agregue el siguiente encabezado H3 al cuerpo:

<h3>Are you sure?</h3>

Si alguna vez ha visto el contenido del módulo del formulario de inicio de sesión cuando inició sesión, sabe que hay un mensaje personalizado que incluye un enlace personalizado para «cerrar sesión». Para diseñar este enlace para que parezca un botón, debemos personalizar la configuración de fuente/texto del enlace del cuerpo de la siguiente manera:

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

NOTA: No podrá obtener una vista previa de estos resultados hasta que vea el formulario en una página activa.

En la pestaña Avanzado, actualice la Clase CSS y el CSS personalizado de la siguiente manera:

Clase CSS: et-logged-in-form

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

display:none;

Parte 5: agregar el código personalizado

Para agregar el CSS personalizado y JQuery necesarios para la funcionalidad del formulario de inicio de sesión emergente, cree un nuevo módulo de código debajo del último módulo de formulario de inicio de sesión.

el css

Abra la configuración del módulo de código y pegue el siguiente CSS en el cuadro de código, asegurándose de envolver el CSS en las etiquetas de estilo necesarias.

/* 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;
}

Tenga en cuenta que el CSS utiliza la clase «iniciar sesión» que está integrada en WordPress para ocultar/mostrar los botones de inicio de sesión/cierre de sesión correspondientes y los formularios de inicio de sesión de «iniciar sesión»/»cerrar sesión» cada vez que el usuario inicia sesión o desconectado.

El JQuery

Debajo de la etiqueta de estilo final, pegue el siguiente JQuery asegurándose de envolver el código en las etiquetas de script necesarias .

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

Este fragmento simplemente alterna la sección emergente cada vez que el usuario hace clic en cualquiera de los tres elementos con la clase «et-toggle-popup» (los botones de inicio y cierre de sesión más el ícono de publicidad «x»).

¡Eso es todo!

No olvide guardar los cambios que realizó en la plantilla en Theme Builder. Una vez guardado, puede ver los resultados en una página en vivo.

Resultado final

Estos son los resultados finales en computadoras de escritorio, tabletas y teléfonos.

Observe cómo cambian el botón de inicio de sesión y el botón de cierre de sesión. Y, una vez que el usuario inicia sesión, permanece en la página actual. Además, el formulario de inicio de sesión emergente muestra diferentes contenidos de «advertencia» cada vez que el usuario intenta cerrar sesión.

Pensamientos finales

Con suerte, la creación de este formulario de inicio de sesión emergente y los botones de inicio/cierre de sesión personalizados le darán una idea de cómo usar el formulario de inicio de sesión de Divi de manera creativa. Siéntase libre de ajustar el diseño y el contenido de cada formulario de inicio de sesión (o botones) para crear una experiencia de inicio de sesión única en su propio sitio web.

Espero escuchar de usted en los comentarios.

¡Salud!