¿Te gustaría crear un formulario inicio de sesión emergente en Divi con botones de inicio de sesión / cierre de sesión?
La creación de un formulario ventana emergente de inicio de sesión en Divi puede ser una forma eficaz de mejorar el diseño de su sitio y la experiencia de inicio/cierre de sesión del usuario.
La idea es crear un formulario inicio de sesión que se muestra en una ventana 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.
En este tutorial, crearemos 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 algunos módulos de botones, crearemos una experiencia de inicio de sesión emergente perfecta en el front-end al permitir que los usuarios inicien sesión y cierren sesión sin ser redirigidos a otra página.
Vamos a empezar!
vista
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 contenido de "advertencia" diferente cada vez que el usuario intenta cerrar sesión.
Lo que necesitas para empezar
Si bien puede agregar este formulario de inicio de sesión emergente y botones de inicio/cierre de sesión personalizados a cualquier encabezado personalizado, usaremos un encabezado prefabricado para acelerar el proceso y hacer que el diseño comience rápidamente.
Importe la plantilla de encabezado "Paquete de diseño de crowdfunding" en el constructor Divi
Para comenzar, descargue Divi Crowdfunding Layout Pack Encabezado y pie de página gratis . 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 editor de temas, siga estos pasos:
- Ve 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 importar.
- Haga clic en Importar generador de temas Divi Plantillas.
- Haga clic en el icono de edición para editar el encabezado importado.
Crear el formulario de inicio de sesión emergente en Divi
Parte 1: Creación de botones de inicio y cierre de sesión
Una vez en el Editor de diseño de encabezado global, abra el vista de capa para que puedas ver fácilmente todos los elementos.
En la fila superior de la sección del encabezado, elimine el módulo Seguir en las redes sociales junto al botón Iniciar sesión en la columna 3.
Lea también: Divi: Comparación de los diferentes tipos de gradientes
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 Botón en la columna 3 de la fila superior.
Actualice los siguientes elementos 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: Derecha
- Mostrar solo el ícono al pasar el mouse sobre el botón: NO
- Relleno: 0,5 em (superior e inferior), 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. A continuación, abra la configuración del módulo Duplicar botón en la columna 3.
Cambie el texto del botón para que diga "Cerrar sesión".
Actualice los siguientes elementos 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 listos, estamos listos para crear la sección emergente que servirá como nuestra ventana emergente que contiene el formas conexión.
Debajo de la sección del encabezado, agregue una nueva sección regular.
Luego inserte una fila de una columna dentro de la sección.
Configuraciones de sección
Antes de actualizar la fila, abra la configuración de la sección.
En la pestaña Contenido, dale a la sección un color de fondo blanco:
- Fondo: #ffffff
En la pestaña 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 (superior e inferior)
- Esquinas redondeadas: 10px
- Sombra de caja: ver captura de pantalla
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque: 100 píxeles
- Fuerza de propagación: 50px
En la pestaña Avanzado, actualice lo siguiente:
Agrega 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: Centro Centro
- Índice Z: 999999
Configuraciones de línea
Con la configuración de la sección en su lugar, abra la configuración de la línea 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 (superior), 5vh (inferior)
Parte 3: Crear el icono emergente de cierre
Para crear el icono de cierre de la ventana emergente que cerrará/ocultará la ventana emergente al hacer clic, vamos a utilizar un módulo de Blurb.
Agregue un nuevo módulo de Blurb a la fila.
Abra la configuración del módulo 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 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
- Módulo de alineación: derecho
- Altura: 50px
En la pestaña Avanzado, agregue una clase CSS al módulo de Blurb de la siguiente manera:
- Clase CSS: et-toggle-popup
Parte 4: Creación de los formularios de inicio de sesión "Iniciar sesión" y "Cerrar 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, crearemos 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 “se desconecte”. 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 de “Cierre de sesión”
Para crear el formulario de inicio de sesión "Cerrar sesión", agregue un nuevo módulo de inicio de sesión debajo del ícono del módulo Blurb dentro de la fila.
Abra la configuración del módulo y cambie las siguientes configuraciones:
Pestaña de contenido
- Redirigir a la página actual: SÍ
- Usar color de fondo: NO
Pestaña de diseño
- Color de fondo de los campos: rgba(0,78,67,0.05)
- Color de fondo del foco de campo: rgba (0,78,67,0,15)
- Alineación de texto: centrado
- Color del texto: oscuro
- Fuente del título: Poppins
- Peso de la fuente del título: semi-negrita
- Color del texto: #000000
- Altura de la línea del título: 1,3 cm
- 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 de la sección Encabezado.
Luego pegue los estilos de botón en el grupo de opciones de botón en la configuración de conexión en la pestaña Diseño.
A continuación, actualice los estilos de botón para el formulario de inicio de sesión de la siguiente manera:
- Botón
- Color del texto: #ffffff
- Fondo: #004e43
- Fondo (pasar el cursor): #00683c
- Ancho del borde: 0 píxeles
- Relleno: 15px (superior e inferior)
A continuación, actualice las opciones de tamaño de la siguiente manera:
- Ancho: 100%
- Ancho máximo: 80 % (escritorio), 90 % (tableta), 95 % (teléfono)
- Módulo de alineación: 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 la conexión:
width: 100% !important;
float: none !important;CSS personalizado para el formulario de inicio de sesión:
width: 100% !important;
padding: 0px !important;Esto garantizará que el módulo de inicio de sesión abarque todo el ancho de 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.
A continuación, actualice la etiqueta de cada uno de los formas conexión respectivamente.
Abra la configuración duplicada (el formulario "Iniciar 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.
Luego abra la configuración de 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 Elegant Themes"
- 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 de inicio de sesión al iniciar sesión, sabe que hay un mensaje personalizado que incluye un enlace personalizado para "cerrar sesión". Para hacer que este enlace parezca un botón, debemos personalizar la configuración de fuente/texto del enlace del cuerpo de la siguiente manera:
- Seleccione la pestaña Enlace bajo opción Cuerpo de texto.
- Fuente del enlace: Work Sans
- Peso de la fuente del enlace: semi negrita
- Estilo de fuente: TT
- Alineación del texto del enlace: centrado
- 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 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 inicio de sesión.
CSS
Abra la configuración del módulo 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 CSS utiliza la clase "conectada" que está integrada en WordPress para ocultar/mostrar los botones de inicio/cierre de sesión correspondientes y el formas Mensaje de inicio de sesión “Iniciado sesión”/”Desconectado” cada vez que el usuario inicia o cierra sesión.
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 uno de los tres elementos con la clase " y-alternar-ventana emergente (los botones de inicio y cierre de sesión más el icono de presentación "x").
Ver también: Divi: cómo usar la configuración de máscara de fondo y las opciones de transformación de patrón
Está hecho !
No olvide guardar los cambios que realizó en la plantilla en el generador de temas. Una vez guardado, puede ver los resultados en una página en vivo.
Resultado final
Aquí están los resultados finales en computadora, tableta y teléfono.
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 contenido de "advertencia" diferente cada vez que el usuario intenta cerrar sesión.
Descarga DIVI ahora!!!
Conclusión.
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 forma 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.
También esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la 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.
...
