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

La creación de un formulario de inicio de sesión emergente en Divi puede ser una forma eficaz 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 hace 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, crearemos un formulario de inicio de sesión emergente con botones personalizados de inicio de sesión y cierre de sesión en Divi. Usando el módulo de inicio de sesión Divi y un par de módulos de botones, crearemos una experiencia de inicio de sesión emergente sin problemas en la interfaz al permitir que los usuarios inicien 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 la interfaz 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 crearemos 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 un contenido de "advertencia" diferente cada vez que el usuario intenta cerrar la sesión.

Descarga la plantilla GRATIS

Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

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

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Cómo cargar la plantilla GRATUITA

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á un ícono con dos flechas. Haga clic en el icono.

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

Una vez que haya cargado el archivo, notará un nuevo encabezado y pie de página global en la 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 por abrir 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 de inicio de sesión / cierre de sesión personalizados a cualquier encabezado personalizado, usaremos un encabezado prefabricado para acelerar el proceso y comenzar con el diseño.

Si aún no lo ha hecho, instale y active Divi Theme.

Importar plantilla de encabezado de crowdfunding a Theme Builder

Para comenzar, descargue el encabezado y pie de página gratuitos del paquete de diseño de financiamiento colectivo de Divi. Para hacer esto, vaya a la publicación 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 la importación.

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

1. Vaya a Divi> Creador de temas.
2. Haga clic en el icono de portabilidad.
3. En la ventana emergente Portabilidad, seleccione la pestaña de importación.
4. Elija el archivo descomprimido descargado previamente para ser importado.
5. Haga clic en el botón Importar.
6. 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 de sesión / 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 para el botón: NO
• Acolchado: 0.5em superior, 0.5em inferior, 2em izquierdo, 0.7em derecho

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 Cerrar 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 del módulo de botón duplicado en la columna 3.

Cambie el texto del botón para que lea "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.

Configuración de la sección

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

Debajo de 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: 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

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;

Actualice las opciones de Visibilidad y Posición.

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

Configuración de filas

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 de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 5vh abajo

Parte 3: Creación del icono Cerrar ventana emergente

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

Agregue un nuevo módulo de propaganda a la fila.

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

Luego agregue el ícono de la siguiente manera:

• Usar icono: 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 de icono: SÍ
• Tamaño de fuente del icono: 50px
• Ancho: 50px
• Alineación del módulo: derecha
• Alto: 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 "Desconectado" y "Conectado"

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 "inicie sesión".

Creación del formulario "Desconectado"

Para crear el formulario de inicio de sesión "Desconectado", agregue un nuevo módulo de formulario de inicio de sesión debajo del icono del módulo de propaganda 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 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

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 los botones en el grupo de opciones de botones en la Configuración de inicio de sesión en la pestaña de diseño.

Luego actualice los estilos de los botones 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 píxeles en la parte superior, 15 píxeles en la parte inferior

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: formulario et-log-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 de formulario de inicio de sesión abarque todo el ancho de la fila / columna incluso en el escritorio.

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

Ahora que la versión "Logged Out" del formulario está completa, necesitamos crear la versión "Logged In", que tendrá un contenido y estilo diferente para maximizar la experiencia del usuario.

Para crear el formulario de inicio de sesión "Desconectado", 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 de "Inicio de 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 antes y después de la siguiente manera:

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

Esto creará una bonita notificación dinámica para los usuarios que intenten salir del sitio.

Luego agregue el siguiente encabezado H3 al cuerpo:

<h3>Are you sure?</h3>

Si alguna vez ha visto el contenido del módulo de formulario de inicio de sesión cuando inició sesión, sabrá que hay un mensaje personalizado que incluye un enlace de "cierre de sesión" personalizado. Para diseñar este enlace para que se vea como un botón, necesitamos 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 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

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

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

• Clase CSS: et-log-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 de "inicio de 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 "inicio de sesión" / "cierre de 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 secuencia de comandos necesarias.

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

Este fragmento simplemente cambia 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 de sesión y cierre de sesión más el icono de propaganda "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, el usuario permanece en la página actual. Además, el formulario de inicio de sesión emergente muestra un contenido de "advertencia" diferente cada vez que el usuario intenta cerrar la sesión.

Pensamientos finales

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

Espero tener noticias tuyas en los comentarios.

¡Salud!