Formulario emergente de inicio de sesión en WordPress y Elementor

Leer en:

Formularios emergentes en WordPress para iniciar sesión
Aprende cómo crear un formulario emergente de inicio de sesión con la función de popups de Elementor optimizados para móviles.

Tabla de contenidos

Comparte este post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Si queremos facilitar la navegación de nuestros usuarios y agilizar los procesos de creación de cuentas e inicio de sesión, podemos evitar llevarlos a una página diferente para llevar a cabo estas acciones mediante la creación de un formulario emergente.

Formulario emergente de inicio de sesión en WordPress
Ejemplo de un formulario de inicio de sesión emergente en WordPress creado con Elementor

En este artículo te enseñaré cómo utilizar la función de pop-ups de Elementor para crear este tipo de formularios optimizados para dispositivos móviles.

Para poder crear este tipo de formulario emergente necesitas Elementor Pro, ya que la función de crear popups no está disponible en la versión gratuita. La creación de formularios de inicio de sesión con Elementor es muy fácil y puedes crear formularios muy personalizados.

Creación de un formulario emergente de inicio de sesión con Elementor

Si quieres puedes crear un diseño un poco más sencillo que el que voy a crear yo pero allá vamos.
Crea un popup nuevo y dale cualquier nombre.

Ajustes generales del pop-up

En el panel de edición de Elementor haz clic en el icono de la rueda situado en la parte inferior izquierda para acceder a los ajustes generales del pop-up. He utilizado los siguientes ajustes en cada una de las secciones.

Ajustes de formulario emergente de inicio de sesión

Creación del formulario de inicio de sesión

Yo he creado una sección con dos columnas. Una de ellas contendrá el formulario de acceso mientras la otra tendrá un texto y un botón enlazado para los usuarios que no tengan una cuenta (Este botón se podría enlazar a otro pop-up con un formulario de registro).

He cambiado el color de fondo de la columna de la izquierda a un color azul y he añadido Texto y un botón. Para separar la cabecera del texto he utilizado un separador con una anchura de 30px y 4px de grosor.

La columna de la derecha contiene el formulario de inicio de sesión y una cabecera con el texto Iniciar sesión un texto explicativo.

Crear los estilos del formulario emergente

Para el diseño del elemento emergente he alineado todo el contenido al medio de las columnas y he dejado un poco de espacios por los lados y he cambiado un poco los estilos del propio formulario para hacerlo más bonito y he redondeado los bordes.

Formulario de inicio de sesión popup para wordpress

Activar el popup de inicio de sesión

Elementor ofrece varias opciones para activar pop-ups y una de ellas es a través de selectores CSS. La implementación es muy sencilla. Buscamos el elemento del menú que queremos que active el pop-up con nuestro formulario emergente y le añadimos una clase CSS desde la pantalla de gestión de menús de WordPress.

Nota: Para ver el campo de Clases CSS debes activar la opción desde Opciones de Pantalla.

Seguidamente, desde los Ajustes avanzados del pop-up usamos la misma clase que pusimos al menú y guardamos sin antes aplicar la Condición de Mostrar en todo el sitio o nuestro pop-up no aparecerá nunca.

Guardamos y probamos nuestro menú emergente con formulario de inicio de sesión.

Formulario emergente de inicio de sesión en WordPress

Suscríbete a nuestro boletín

Recibe más artículos como este en tu correo electrónico

Más artículos

Incremente tus leads y ventas

Crea notificaciones gratis y popups en tu web