Cómo crear un módulo emergente de inicio de sesión en WordPress (paso a paso)

¿Quieres añadir un modal de inicio de sesión de WordPress en tu sitio? Un modal de inicio de sesión permite a tus usuarios iniciar rápidamente la sesión en tu sitio web sin salir de la página que están viendo. Esto mejora la experiencia del usuario y el compromiso en tu sitio web. En este artículo, te mostraremos cómo crear fácilmente un modal de inicio de sesión en WordPress, paso a paso.

Cómo crear un inicio de sesión modal en WordPress

¿Por qué crear un modal de inicio de sesión en WordPress?

Si tienes una tienda online, un sitio web de socios o vendes cursos online, es probable que permitas a los usuarios registrarse e iniciar sesión en tu sitio web.

Normalmente, cuando los usuarios hacen clic en el enlace de inicio de sesión, se les lleva a la página de inicio de sesión predeterminada de WordPress o a otra página de inicio de sesión personalizada de tu sitio web. Una vez que los usuarios han iniciado la sesión, son redirigidos de nuevo a otra página.

Una ventana emergente de inicio de sesión modal te permite mostrar el formulario de inicio de sesión sin enviar a los usuarios a una página diferente. Una vez iniciada la sesión, puedes redirigir a los usuarios a la página que quieras

Una ventana emergente de inicio de sesión modal es más rápida y mejora la experiencia del usuario en tu sitio web. Una experiencia de usuario más rápida y más pulida puede aumentar tus ventas y conversiones

Dicho esto, vamos a ver cómo crear fácilmente una ventana emergente de inicio de sesión modal en WordPress. Te mostraremos dos métodos para hacerlo, y podrás elegir el que mejor se adapte a tus necesidades

Método 1. Crear una ventana emergente de inicio de sesión modal con CSH Login

Este método es más fácil y se recomienda para la mayoría de los usuarios.

Lo primero que tienes que hacer es instalar y activar el Inicio de sesión en CSH plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, tienes que ir a Inicio de sesión modal en tu área de administración de WordPress y selecciona un tipo de formulario de inicio de sesión modal

Selecciona el tipo de inicio de sesión modal

Después de seleccionar el tipo de caja de inicio de sesión modal, puedes desplazarte hacia abajo y gestionar los redireccionamientos de inicio de sesión/cierre de sesión para el formulario. También puedes permitir que los usuarios generen sus propias contraseñas.

Redirigir el tipo de inicio de sesión

A continuación, tienes que desplazarte hacia abajo hasta el Estilos sección y selecciona el diseño, las etiquetas de visualización, el color de fondo, el color de los botones, el color de los enlaces y mucho más.

Estiliza tu formulario de acceso modal

Además, puedes añadir el correo electrónico de registro, el asunto del correo electrónico, utilizar Google reCaptcha, y mucho más. Este plugin también te permite añadir el inicio de sesión social como Facebook, Twitter y Google.

Añadir formulario de inicio de sesión social

Asegúrate de guardar los cambios y de copiar el shortcode situado en la parte superior de esta página. Tendrás que crear una nueva página en WordPress o editar una existente para añadir el shortcode en el editor de contenido.

Copiar el código corto para el plugin de inicio de sesión CSH

También puedes añadir el inicio de sesión modal en tu barra lateral de WordPress. Simplemente ve a Apariencia " Widgets para arrastrar y soltar el Inicio de sesión en CSH widget en la barra lateral de tu sitio.

Arrastrar y soltar el widget de inicio de sesión CSH

El inicio de sesión modal de CSH también se puede añadir en los archivos de plantilla de tus sitios web. Una vez que lo hayas añadido en tu sitio, simplemente visita tu sitio de WordPress para ver el enlace de inicio de sesión modal en acción.

Formulario emergente de inicio de sesión modal

Método 2. Crear una ventana emergente de inicio de sesión modal con WPForms y OptinMonster

Para este método necesitarás el WPForms plugin y OptinMontser. Si ya tienes estos dos plugins, entonces este método es la mejor solución para ti.

WPForms es el mejor plugin de formularios de contacto para WordPress. Necesitarás al menos su plan Pro para acceder al complemento de registro de usuarios

OptinMonster es el mejor plugin de ventanas emergentes para WordPress y el mejor software de generación de contactos del mercado. Te ayuda a convertir a los visitantes del sitio web en suscriptores y clientes. Necesitarás al menos el plan Pro para acceder a la función MonsterLinks utilizada en este artículo

¿Preparado? Empecemos

Uso de WPForms para crear un formulario de inicio de sesión de usuario

En primer lugar, tienes que instalar y activar el WPForms plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, tienes que ir a WPForms " Complementos página para instalar y activar el Complemento de registro de usuarios.

Página de complementos de WPForms

Después de activar el addon, tienes que ir a WPForms " Añadir nuevo página para crear el formulario de inicio de sesión del usuario.

Añadir nuevo formulario

Una vez lanzado el constructor de WPForms, tienes que elegir el formulario preconstruido Formulario de inicio de sesión de usuario plantilla.

Selecciona el formulario de acceso del usuario

Esta plantilla de formulario de inicio de sesión tiene los campos de correo electrónico y contraseña que funcionarán de forma similar al formulario de inicio de sesión predeterminado de WordPress. Puedes arrastrar y soltar cualquier campo adicional desde el lado izquierdo de la pantalla según sea necesario.

Plantilla de formulario de inicio de sesión

A continuación, haz clic en el botón Contraseña en la sección de vista previa, y mostrará las opciones del campo en el lado izquierdo. Puedes añadir el código que se indica a continuación en el cuadro de descripción de Contraseña para mostrar opciones como olvidar la contraseña y el registro del usuario.


Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

Añadir opciones de contraseña

Después de eso tienes que hacer clic en el botón Guardar y luego haz clic en el botón Incrustar botón.

Guardar e incrustar

Se abrirá una ventana emergente con el código de incrustación. Tienes que copiar este código y guardarlo para utilizarlo más tarde.

Copiar código de inserción

Tu formulario de acceso está listo. Ahora puedes seguir adelante y crear la ventana emergente modal.

Uso de OptinMonster para crear una ventana emergente modal

Primero tendrás que instalar y activar el OptinMonster plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, tienes que ir a OptinMonster en el área de administración de WordPress y haz clic en Crear nueva campaña botón.

Crear nueva campaña

Tu panel de OptinMonster se abrirá en una nueva página web.

Una vez dentro, tienes que seleccionar Caja de luz emergente como tipo de campaña, para que puedas añadir tu formulario de acceso en la ventana emergente.

Selecciona el tipo de campaña

A continuación, tienes que seleccionar el Lienzo plantilla de campaña que es una plantilla en blanco y te permite añadir código personalizado y shortcodes.

Añadir opciones de contraseña

Te pedirá que añadas un nombre a tu lightbox y que selecciones el sitio web donde quieres cargar esta ventana emergente.

Plantilla de formulario de inicio de sesión

Una vez que hagas clic en el botón Empezar a construir serás redirigido a la página de configuración de la campaña de OptinMonster.

Desde aquí, tienes que ir a Optin y establece la anchura y la altura del lienzo, añade el código de incrustación del formulario de acceso en Lienzo personalizado HTML campo, gestionar la visualización y los efectos de sonido para la ventana emergente modal, y mucho más.

Nota: El código de incrustación del formulario de acceso debe ser el código que has copiado después de crear tu formulario de acceso en el paso anterior.

Añadir el código de incrustación del formulario de inicio de sesión en la ventana emergente modal

Como estás creando una ventana emergente de inicio de sesión modal, debes ir a la pestaña de configuración y establecer el valor '0' para Duración de la cookie y Duración de la cookie de éxito. Mostrará el formulario a todos los visitantes cada vez que hagan clic en tu enlace.

Establecer el valor de la duración de la cookie

A continuación, tienes que visitar el Reglas de visualización pestaña y expandir MonsterLink para cambiar el estado a activo.

Selecciona el formulario de acceso del usuario

Asegúrate de hacer clic en el Guardar en la esquina superior derecha y ve a Publicar para activar el estado.

Guarda y publica la campaña

Ahora puedes añadir esta ventana emergente de acceso modal en tus páginas o entradas de WordPress.

Añadir un inicio de sesión modal en WordPress

Tienes que volver a OptinMonster en tu área de administración de WordPress, y te mostrará la lista de campañas. Si no ves tu campaña recientemente creada para el inicio de sesión modal, entonces simplemente haz clic en el botón Actualizar campañas botón.

Editar los ajustes de salida

A continuación, tienes que editar los ajustes de salida de la campaña para habilitar el optin en tu sitio y seleccionar quién debe ver la ventana emergente de inicio de sesión modal. Asegúrate de hacer clic en el botón Guardar configuración botón.

Campaña de la tienda a los visitantes

Después tienes que volver a la página de resumen de las campañas y copiar el slug que está visible debajo de la opción en vivo de la campaña. Este slug único se puede utilizar en los shortcodes y en el código para mostrar el inicio de sesión modal en WordPress.

Copiar el slug de la campaña

A continuación, puedes crear una nueva página de WordPress o editar una ya existente y añadir este código con tu slug de campaña único.


<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">Login / Register</a>

También puedes añadir el código anterior en tus menús de WordPress, en la barra lateral o en cualquier otra zona de tu sitio.

Asegúrate de guardar los cambios en la página de WordPress y visita tu sitio para ver el inicio de sesión modal en acción.

Inicio de sesión modal en WordPress

Esperamos que este artículo te haya ayudado a saber cómo crear un inicio de sesión modal en WordPress. Quizá también quieras ver nuestra lista completa de los mejores plugins de páginas de inicio de sesión de WordPress y diseñar tu propia página de inicio de sesión fácilmente

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo crear un módulo emergente de inicio de sesión en WordPress (paso a paso) puedes visitar la categoría Plugins.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up