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

Once you’ve found it, you can click the ‘Use Template’ button.

This login form template has email and password fields that will work similarly to the default WordPress login form.

You can drag and drop any additional fields from the left side of the screen as needed.

Next up, you can click on the ‘Password’ field, and it will show the field options on the left side.

You can add the code given below to the description box of the ‘Password’ field to display options like ‘forget password’ and ‘user registration.’

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

After that, you need to click on the ‘Save’ button to store your changes, and you’re ready to publish the form.

To get started, you can simply click the ‘Embed’ button.

A popup window will open with options to add your login form.

Go ahead and select the ‘use a shortcode’ option. It will appear as a link in the window, not a button.

You should now see an embed code for your form.

Here, you’ll want to copy the shortcode and save it for use later.

Cómo usar OptinMonster para crear una ventana emergente modal

At this point, your login form is ready. The next step is to create the modal popup using OptinMonster.

First, you’ll need to visit the OptinMonster website and sign up for an account.

Next, you will need to install and activate the OptinMonster plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

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.

Once you are in the content editor, you can click the ‘+’ button and add a ‘Custom HTML’ block.

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>

By default, the link text in your MonsterLink code will say ‘Subscribe Now,’ because it is often used for email optins.

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.

Knowing what encourages users to complete forms lets you recreate that process to get more leads and grow your business. While Google Analytics can show some user activity, it doesn’t link the behavior directly to the specific user who submitted the form.

That’s where WPForms comes in. It’s a popular form builder plugin that includes a ‘User Journey’ addon (available with the Elite plan), letting you see where users came from, what path they took, and how much time they spent on each page before submitting a form.

If you’re interested to learn more, feel free to refer to our guide on how to track user journey on WordPress lead forms.

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?

When you use well-coded and optimized plugins like WPForms and OptinMonster, there should be no noticeable impact on your site’s performance. These tools are designed to be lightweight and load efficiently.

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

We hope this article helped you learn how to create a login popup modal in WordPress. You can also check out our complete list of the best WordPress login page plugins and our guide on how to redirect users after successful login in 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.