Cómo Crear una Ventana Emergente de Inicio de Sesión en WordPress (Paso a Paso)

Agregar una ventana emergente de inicio de sesión de WordPress a tu sitio puede hacer que el inicio de sesión sea más fluido para tus usuarios. Permite a los visitantes iniciar sesión sin salir de su página actual, lo que mejora su experiencia general.

Hemos visto varios sitios web exitosos utilizar esta función para mantener a los usuarios interesados y mejorar la interacción del sitio. Es una forma sencilla pero eficaz de optimizar el proceso de inicio de sesión.

En este artículo, te guiaremos a través de los pasos para crear una ventana emergente de inicio de sesión de WordPress.

¿Por qué crear una ventana emergente de inicio de sesión de WordPress?

Deberías crear una ventana emergente de inicio de sesión porque hace que el inicio de sesión sea más rápido y fluido para tus usuarios sin enviarlos a una página separada.

En la mayoría de los sitios web, cuando alguien hace clic en el enlace de inicio de sesión, se le redirige a la página de inicio de sesión predeterminada de WordPress o a una página de inicio de sesión personalizada. Después de iniciar sesión, se le redirige de nuevo.

Este ir y venir puede sentirse lento e interrumpir la experiencia del usuario. Una ventana emergente de inicio de sesión modal resuelve este problema. Abre el formulario de inicio de sesión en una pequeña ventana en la misma página.

Los usuarios pueden iniciar sesión al instante y tú puedes redirigirlos a donde quieras después del inicio de sesión. El proceso se siente más rápido y profesional, lo que puede mejorar la experiencia del usuario e incluso aumentar las conversiones.

Con esto en mente, te mostraremos cómo crear fácilmente una ventana emergente de inicio de sesión modal en WordPress utilizando tanto un plugin gratuito como herramientas premium. Puedes saltar al método que mejor te funcione:

¿Listo? ¡Vamos a empezar!

Método 1: Crear una ventana emergente de inicio de sesión modal usando Login/Signup Popup

Para el primer método, utilizaremos el plugin Login/Signup Popup, un plugin gratuito que permite a tus usuarios iniciar o registrarse fácilmente en tu sitio.

Primero, deberás instalar y activar el plugin Login/Signup Popup. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Después de la activación, puedes ir a Login/Signup Popup » Ajustes desde el panel de administración de WordPress.

En la configuración 'General', puedes habilitar el registro, iniciar sesión automáticamente a los usuarios después de que se registren y gestionar restablecimientos de contraseña.

Además de eso, el plugin también te permite seleccionar el rol de usuario de WordPress que se asignará a los usuarios recién registrados. Por defecto, asignará el rol de 'Suscriptor'.

Si te desplazas hacia abajo, verás más configuraciones. Por ejemplo, puedes agregar una URL de redirección cuando un usuario inicia sesión o se registra.

No olvides hacer clic en el botón 'Guardar' si realizaste algún cambio.

A continuación, puedes cambiar a la pestaña 'Estilo' y editar tu ventana emergente modal de inicio de sesión/registro. El plugin te permite cambiar la posición de la ventana emergente, el ancho, la altura, el color de fondo, el color del texto y más.

Después de eso, también puedes personalizar los campos del formulario en la ventana emergente.

Simplemente ve a Inicio de sesión/Registro emergente » Campos desde tu panel de WordPress. Aquí, puedes activar diferentes campos del formulario, editar sus etiquetas, hacer que sean campos obligatorios y más.

Además de eso, también hay una opción para agregar más campos a tu ventana emergente de inicio de sesión/registro.

Simplemente haz clic en el botón ‘+ Agregar Campo’ en la parte superior y selecciona campos de formulario adicionales para agregar a tu ventana emergente de inicio de sesión.

Después de personalizar los campos del formulario, ahora puedes agregar la ventana emergente de inicio de sesión a tu sitio web. El plugin ofrece diferentes formas de agregar la ventana emergente a tu sitio.

Añadir ventana emergente de inicio de sesión a los menús

Primero, puedes ir a Apariencia » Menús desde tu panel de WordPress.

Después de eso, puedes ver los elementos del menú ‘Ventana emergente de inicio de sesión/registro’. Simplemente selecciona los elementos que deseas mostrar y haz clic en el botón ‘Agregar al menú’.

Para más detalles, consulta nuestra guía sobre cómo agregar un menú de navegación en WordPress.

Añadir ventana emergente de inicio de sesión como enlaces de anclaje

A continuación, puedes agregar #login o #register al final de la URL de tu sitio web y colocar la ventana emergente de inicio de sesión como un enlace interno.

Por ejemplo, para crear un enlace de inicio de sesión, usarías HTML como este:

<a href="https://www.myawesomesite.com/#login">Login</a>

Para hacer esto, puedes editar una publicación o una página.

Una vez que estés en el editor de contenido, querrás hacer clic en los 3 puntos y seleccionar la opción 'Editar como HTML'.

Después de eso, puedes agregar el enlace interno al texto de anclaje de inicio de sesión.

Puedes aprender más siguiendo nuestra guía sobre cómo agregar enlaces de anclaje en WordPress.

Usa códigos cortos para agregar un modal de inicio de sesión emergente

Otra forma de agregar la ventana emergente de inicio de sesión/registro es usando shortcodes.

Simplemente puedes ingresar el shortcode [xoo_el_action] en cualquier lugar de tu sitio para crear un enlace/botón que abra el popup.

Por ejemplo, puedes ir a Apariencia » Widgets y agregar un bloque de 'Código corto' para mostrar la ventana emergente de inicio de sesión en la barra lateral de tu sitio web.

Cuando hayas terminado, simplemente haz clic en el botón ‘Actualizar’.

Ahora, puedes visitar tu sitio web para ver el popup de inicio de sesión en acción.

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

Este método es ideal para aquellos que desean un mayor control sobre el diseño y el comportamiento de su popup de inicio de sesión.

Usar WPForms y OptinMonster juntos te brinda potentes opciones de diseño, reglas de visualización avanzadas (como mostrar la ventana emergente después de que un usuario haga clic en un enlace específico) y una mejor integración con los servicios de marketing por correo electrónico.

WPForms es el mejor plugin de formularios de contacto de WordPress, y necesitarás al menos su plan Pro para acceder al complemento 'Registro de usuarios'.

OptinMonster es el mejor plugin de ventanas emergentes de WordPress del mercado. Te ayuda a convertir visitantes del sitio web en suscriptores y clientes. En WPBeginner, lo hemos utilizado varias veces para crear ventanas emergentes interactivas y hemos tenido una excelente experiencia. Para más detalles, consulta nuestra reseña completa de OptinMonster.

Ten en cuenta que necesitarás al menos el plan Plus para acceder a la función MonsterLinks de la herramienta que mostramos en este artículo.

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

Primero, instalemos y activemos el plugin WPForms. Para más detalles, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, deberás ir a WPForms » Ajustes desde tu panel de WordPress e introducir la licencia.

Puedes encontrar la clave en el área de tu cuenta de WPForms.

A continuación, vamos a WPForms » Complementos para instalar y activar el 'Complemento de Registro de Usuarios'.

Después de activar el complemento, deberás ir a WPForms » Agregar Nuevo y crear un nuevo formulario.

En la siguiente pantalla, primero deberás nombrar tu formulario.

Luego, elegirás una plantilla de formulario preconstruida de la galería de plantillas. Puedes usar la barra de búsqueda para encontrar fácilmente la plantilla 'Formulario de inicio de sesión de usuario'.

Una vez que lo hayas encontrado, puedes hacer clic en el botón ‘Usar plantilla’.

Esta plantilla de formulario de inicio de sesión tiene campos de correo electrónico y contraseña que funcionarán de manera 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.

A continuación, puedes hacer clic en el campo ‘Contraseña’, y se mostrarán las opciones del campo en el lado izquierdo.

Puedes agregar el código que se muestra a continuación en el cuadro de descripción del campo ‘Contraseña’ para mostrar opciones como ‘olvidé mi contraseña’ y ‘registro de 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>.

Después de eso, deberás hacer clic en el botón ‘Guardar’ para almacenar tus cambios, y estarás listo para publicar el formulario.

Para comenzar, simplemente puedes hacer clic en el botón ‘Incrustar’.

Se abrirá una ventana emergente con opciones para agregar tu formulario de inicio de sesión.

Selecciona la opción ‘usar un shortcode’. Aparecerá como un enlace en la ventana, no como un botón.

Ahora deberías ver un código de inserción para tu formulario.

Aquí, querrás copiar el shortcode y guardarlo para usarlo más tarde.

Cómo usar OptinMonster para crear una ventana emergente modal

En este punto, tu formulario de inicio de sesión está listo. El siguiente paso es crear la ventana emergente modal usando OptinMonster.

Primero, deberás visitar el sitio web de OptinMonster y registrarte para obtener una cuenta.

A continuación, deberás instalar y activar el plugin OptinMonster. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

El plugin actúa como un conector entre tu sitio de WordPress y OptinMonster.

Al activarlo, deberías ver la pantalla de bienvenida. Haz clic en el botón ‘Conectar tu cuenta existente’.

Ahora se abrirá una nueva ventana.

Simplemente haz clic en el botón ‘Conectar a WordPress’.

Una vez conectado, estarás listo para crear tu ventana emergente modal.

Simplemente ve a OptinMonster en el área de administración de WordPress y haz clic en el botón ‘Crear tu primera campaña’.

En la siguiente pantalla, elegirás una campaña y una plantilla.

Dado que estamos creando una ventana emergente modal, seleccionemos ‘Popup’ como tipo de campaña.

En cuanto a la plantilla, OptinMonster ofrece muchas plantillas preconstruidas para que puedas ajustar una rápidamente si es necesario.

Una vez que hayas seleccionado una plantilla, se abrirá una ventana emergente. Te pedirá que agregues un nombre a tu campaña.

Después de ingresar un nombre, puedes hacer clic en el botón ‘Empezar a construir’.

Hecho esto, serás redirigido al constructor de campañas de OptinMonster.

Puedes agregar diferentes bloques a tu plantilla desde el menú de tu izquierda. Así que, adelante y agrega el bloque de WPForms.

Después de eso, deberías ver las opciones del bloque de WPForms en el menú de tu izquierda.

Puedes seleccionar el formulario de inicio de sesión que acabas de crear en el menú desplegable ‘Selección de formulario’.

Si no ves tu formulario, simplemente selecciona la opción ‘Agregar Shortcode manualmente’ e ingresa el shortcode que copiaste anteriormente al crear el formulario en WPForms.

No te preocupes si no puedes previsualizar tu formulario en el constructor de campañas; el formulario aparecerá cuando publiques la campaña.

A continuación, puedes dirigirte a la pestaña ‘Reglas de visualización’. OptinMonster ofrece potentes opciones de segmentación.

Desde aquí, querrás seleccionar la regla de visualización ‘MonsterLink™’ (Al hacer clic).

Después de seleccionar la opción, deberías ver MonsterLink como la regla de visualización.

Haz clic en el botón ‘Copiar código de MonsterLink’ y guarda el enlace en un lugar seguro. Lo necesitarás más tarde.

Ahora, estás listo para publicar la campaña.

Simplemente ve a la pestaña ‘Publicar’ en la parte superior del constructor de campañas. Desde aquí, puedes establecer el ‘Estado de publicación’ en ‘Publicar’.

Una vez que hagas eso, no olvides hacer clic en el botón ‘Guardar’ en la esquina superior derecha para almacenar tus cambios.

Agregar inicio de sesión modal en WordPress

Ahora, puedes crear una nueva página de WordPress o editar una existente.

Una vez que estés en el editor de contenido, puedes hacer clic en el botón ‘+’ y agregar un bloque de ‘HTML personalizado’.

Después de eso, necesitarás pegar el MonsterLink en el bloque HTML personalizado. Debería verse algo así:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Por defecto, el texto del enlace en tu código MonsterLink dirá ‘Suscríbete ahora’, ya que a menudo se usa para captación de correos electrónicos.

Aquí tienes un ejemplo del código predeterminado:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

Dado que este es un formulario de inicio de sesión, querrás cambiar ese texto. Para este tutorial, lo cambiamos a ‘iniciar sesión o registrarse’, como puedes ver en el fragmento de código a continuación.

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

También puedes agregar el código anterior a tus menús de WordPress, barra lateral o cualquier otra área de tu sitio.

Solo 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.

Consejo adicional: Rastrea el recorrido del usuario en los formularios de clientes potenciales de WordPress

Ahora que has aprendido a crear una ventana emergente de inicio de sesión en WordPress, veamos cómo rastrear los recorridos de los usuarios para tus formularios de WordPress.

Esto puede ser especialmente útil para tu formulario de inicio de sesión, ya que puede revelar qué contenido miran los usuarios justo antes de decidir iniciar sesión o registrarse. Esa información puede ayudarte a mejorar la navegación y la experiencia de usuario de tu sitio.

Saber qué motiva a los usuarios a completar formularios te permite recrear ese proceso para obtener más leads y hacer crecer tu negocio. Si bien Google Analytics puede mostrar parte de la actividad del usuario, no vincula el comportamiento directamente con el usuario específico que envió el formulario.

Ahí es donde entra WPForms. Es un popular plugin constructor de formularios que incluye un addon ‘Recorrido del usuario’ (disponible con el plan Elite), que te permite ver de dónde vinieron los usuarios, qué camino tomaron y cuánto tiempo pasaron en cada página antes de enviar un formulario.

Si estás interesado en aprender más, no dudes en consultar nuestra guía sobre cómo rastrear el recorrido del usuario en formularios de leads de WordPress.

Preguntas frecuentes sobre cómo crear un modal de inicio de sesión emergente en WordPress

Aquí hay algunas preguntas frecuentes de nuestros lectores sobre cómo agregar una ventana emergente de inicio de sesión en WordPress:

¿Puedo personalizar el diseño de mi ventana emergente de inicio de sesión de WordPress?

Sí, absolutamente. Ambos métodos que cubrimos ofrecen opciones de personalización para que coincidan con la marca de su sitio web. Por lo general, puede cambiar colores, fuentes, tamaños y agregar su propio logotipo para crear una apariencia uniforme.

¿Funcionará una ventana emergente de inicio de sesión en dispositivos móviles?

Sí. Los complementos modernos de ventanas emergentes como OptinMonster están diseñados para ser totalmente responsivos. Esto significa que su ventana emergente de inicio de sesión se ajustará automáticamente para verse bien en computadoras de escritorio, tabletas y teléfonos inteligentes.

¿Los popups de inicio de sesión ralentizan un sitio web?

Cuando utilizas plugins bien codificados y optimizados como WPForms y OptinMonster, no debería haber un impacto notable en el rendimiento de tu sitio. Estas herramientas están diseñadas para ser ligeras y cargar eficientemente.

¿Puedo agregar botones de inicio de sesión social a mi popup?

Algunos plugins ofrecen la funcionalidad de inicio de sesión social como una característica integrada o premium. Por ejemplo, la versión pro del plugin Login/Signup Popup soporta inicios de sesión sociales. Esto puede hacer que sea aún más fácil para los usuarios iniciar sesión.

Esperamos que este artículo te haya ayudado a aprender cómo crear una ventana emergente modal de inicio de sesión en WordPress. También puedes consultar nuestra lista completa de los mejores plugins de página de inicio de sesión de WordPress y nuestra guía sobre cómo redirigir a los usuarios después de un inicio de sesión exitoso en WordPress.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.