Cómo crear una ventana emergente de acceso en WordPress (paso a paso)

Si añade un mensaje / ventana emergente de acceso a su sitio de WordPress, facilitará el acceso a sus usuarios.

Con una ventana emergente de acceso modal, los visitantes pueden acceder sin salir de su página actual, lo que mejora su experiencia de usuario en general.

En nuestros más de 16 años de experiencia, hemos visto cómo esta característica mantiene la participación de los usuarios y puede ayudar a mejorar la interacción en el sitio. Es una forma sencilla pero eficaz de agilizar el proceso de acceder / acceso.

En este artículo, le guiaremos a través de los pasos para crear una ventana emergente de acceso a WordPress.

¿Por qué crear una ventana emergente de acceso a WordPress?

Si gestiona una tienda online, vende cursos online o tiene un sitio web de membresía, es probable que permita a los usuarios registrarse y acceder a su sitio web.

Normalmente, cuando los usuarios hacen clic en el enlazar de acceso, son llevados a la página de acceso por defecto de WordPress o a otra página de acceso personalizada de su sitio web. Una vez que los usuarios han accedido, se les redirige de nuevo a otra página.

Por desgracia, esto puede ser un inconveniente para los usuarios.

Una ventana emergente modal de acceso le permite mostrar el formulario sin enviar a los usuarios a una página diferente. Una vez conectados, puede redirigir a los usuarios a la página que desee. Como el proceso es más rápido y más pulido, puede ayudar a mejorar la experiencia del usuario y aumentar sus conversiones.

Con esto en mente, le mostraremos cómo crear fácilmente una ventana emergente modal de acceso en WordPress usando un plugin gratuito y plugins premium. Usted puede simplemente hacer clic en los enlaces de abajo para saltar a su método preferido:

¿Preparados? Vamos allá.

Método 1: Crear una ventana emergente modal de acceso utilizando el mensaje / ventana emergente de registro

Para el primer método, utilizaremos el plugin Login/Signup Popup, un plugin gratuito que permite a sus usuarios acceder / registrarse fácilmente en su sitio.

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

Una vez activado, puede ir a Login/Signup Popup ” Ajustes desde el panel de administrador de WordPress.

En los ajustes “Generales”, puede activar el registro, acceder / acceder automáticamente y restablecer las contraseñas.

Además, el plugin también permite seleccionar el perfil de usuario de WordPress que se asignará a los nuevos usuarios registrados. Por defecto, se asignará el perfil ‘Suscriptor’.

Si se desplaza hacia abajo, verá más ajustes. Por ejemplo, puedes añadir una URL de redirección cuando un usuario accede o se registra.

No olvides hacer clic en el botón “Guardar” si has realizado algún cambio.

A continuación, puedes cambiar a la pestaña “Estilo” y editar tu mensaje / ventana emergente de acceso / registro. El plugin te permite cambiar la posición del mensaje / ventana emergente, anchura, altura, color de fondo, color del texto, y mucho más.

Después, también puede personalizar los campos del formulario en el mensaje / ventana emergente.

Simplemente vaya a Login/Signup Popup ” Campos desde su escritorio de WordPress. Aquí puede activar diferentes campos de formulario, editar sus etiquetas, hacerlos obligatorios y mucho más.

Además, también hay una opción para añadir más campos a su mensaje / ventana emergente de acceso / registro.

Simplemente haga clic en el botón “+ Añadir campo” en la parte superior y seleccione campos de formulario adicionales para añadir a su ventana emergente modal de acceso.

Después de personalizar los campos del formulario, ya puedes añadir la ventana emergente de acceso modal a tu sitio web. El plugin ofrece diferentes maneras de añadir el mensaje / ventana emergente a su sitio.

1. Añadir ventana emergente de acceso a los menús

En primer lugar, puede dirigirse a Apariencia ” Menús desde su escritorio de WordPress.

A continuación, podrá ver los elementos del menú ‘Acceder / ventana emergente’. Simplemente seleccione los elementos que desea mostrar y haga clic en el botón ‘Añadir al menú’.

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

2. Añadir ventana emergente de acceso como enlaces de anclaje

A continuación, puede añadir #login o #register al final de la URL de su sitio web y colocar la ventana emergente de acceso como un enlace interno.

Por ejemplo, su URL podría tener este aspecto:

<a href="www.mywebsite.com#login">Login</a>

Para ello, puede editar una entrada o una página.

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

A continuación, puede añadir el enlace interno al texto de anclaje de acceso.

Puede obtener más información siguiendo nuestra guía sobre cómo añadir enlaces de anclaje en WordPress.

3. Utilice shortcodes para añadir un mensaje / ventana emergente de acceso

Otra forma de añadir el mensaje / ventana emergente de acceso / registro es mediante el uso de shortcodes.

Puede simplemente introducir el shortcode [xoo_el_action] en cualquier lugar de su sitio para crear un enlazar / botón para abrir la ventana emergente.

Por ejemplo, puedes ir a Apariencia ” Widgets y añadir un bloque de widget shortcode para mostrar el mensaje / ventana emergente de acceso en la barra lateral de tu sitio web.

Cuando haya terminado, simplemente haga clic en el botón “Actualizar”.

Ahora, puede visitar su sitio web para ver la ventana emergente de acceso en acción.

Método 2: Crear un mensaje / ventana emergente de acceso modal usando WPForms & OptinMonster

Para este método, necesitará los plugins WPForms y OptinMonster.

WPForms es el mejor plugin de WordPress para formularios de contacto, y necesitarás al menos su plan Pro para acceder a la extensión “Registro de usuarios”.

OptinMonster es el mejor plugin para WordPress de mensajes / ventana emergente y software de generación de clientes potenciales del mercado. Le ayuda a convertir los visitantes de su sitio web en suscriptores y clientes. Necesitarás al menos el plan Pro para acceder a la característica MonsterLinks utilizada en este artículo.

Para más detalles, puede ver nuestra reseña / valoración completa de OptinMonster.

Uso de WPForms para crear un formulario de acceso de usuario

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

Tras la activación, tendrá que dirigirse a WPForms ” Ajustes desde su escritorio de WordPress e introducir la licencia.

Puede encontrar la clave en su área de cuenta de WPForms.

A continuación, vamos a WPForms ” Addons para instalar y activar ‘User Registration Addon.’

Después de activar la extensión, usted querrá ir a WPForms ” Añadir Nuevo y crear un nuevo formulario.

En la pantalla siguiente, primero tendrá que dar un nombre a su formulario.

A continuación, elegirá una plantilla de formulario prediseñada de la galería de plantillas. Puedes utilizar la barra de búsqueda para encontrar fácilmente la plantilla ‘Formulario de acceso de usuario’.

Una vez que la hayas encontrado, puedes hacer clic en el botón “Usar plantilla”.

Esta plantilla de formulario de acceso tiene campos de correo electrónico y contraseña que funcionarán de forma similar al formulario de acceso por defecto de WordPress.

Puede arrastrar y soltar cualquier campo adicional de la parte izquierda de la pantalla según sea necesario.

A continuación, puede hacer clic en el campo “Contraseña”, y se mostrarán las opciones del campo en el lado izquierdo.

Puede añadir el código que se indica a continuación al cuadro de descripción del campo “Contraseña” para mostrar opciones como “olvidar 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, tienes que hacer clic en el botón “Guardar” para guardar los cambios, y ya estás listo para publicar el formulario.

Para empezar, basta con hacer clic en el botón “Incrustar”.

Se abrirá una ventana emergente con opciones para añadir su formulario de acceso.

Seleccione la opción “utilizar un shortcode”. Aparecerá como un enlace en la ventana, no como un botón.

Ahora debería ver un código incrustado para su formulario.

Aquí, usted querrá copiar el shortcode y guardarlo para su uso posterior.

Uso de OptinMonster para crear una ventana emergente modal

En este punto, su formulario de acceso está listo. El siguiente paso es crear el mensaje / ventana emergente utilizando OptinMonster.

En primer lugar, deberá visitar el sitio web de OptinMonster y acceder a una cuenta.

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

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

Una vez activado, debería ver la pantalla de bienvenida. Continúe y haga clic en el botón “Conectar su cuenta actual”.

Se abrirá una nueva ventana.

Basta con hacer clic en el botón “Conectar con WordPress”.

Una vez conectado, estará listo para crear su mensaje / ventana emergente modal.

Simplemente vaya a OptinMonster en el área de administrador de WordPress y haga clic en el botón “Crear su primera campaña”.

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

Ya que estamos creando un mensaje / ventana emergente, seleccionemos ‘Popup’ como tipo de campaña.

En cuanto a la plantilla, OptinMonster ofrece un montón de plantillas pre-construidas para que pueda ajustar rápidamente uno si es necesario.

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

Después de introducir un nombre, puede hacer clic en el botón “Empezar a construir”.

Una vez hecho esto, se le redirigirá al maquetador de campañas de OptinMonster.

Puedes añadir diferentes bloques a tu plantilla desde el menú de la izquierda. Así que, adelante, añade el bloque WPForms.

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

Puede seleccionar el formulario de acceso que acaba de crear en el menú desplegable “Selección de formulario”.

Si no ve su formulario, simplemente seleccione la opción ‘Añadir shortcode manualmente’ e introduzca el shortcode que copió anteriormente al crear el formulario en WPForms.

No se preocupe si no puede obtener una vista previa de su formulario en el maquetador de campañas; el formulario aparecerá cuando publique la campaña.

A continuación, puede dirigirse a la pestaña “Reglas de visualización”. OptinMonster ofrece potentes opciones de segmentación.

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

Después de seleccionar la opción, debería ver MonsterLink como 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 adelante.

Ahora puede dirigirse a la pestaña “Publicar” situada en la parte superior.

Sólo tiene que cambiar el “Estado de publicación” de “Borrador” a “Publicar”.

No olvides hacer clic en el botón “Guardar” de la parte superior y salir del maquetador de campañas.

A continuación, asegúrese de que el “Estado” está establecido en “Publicado” en la sección “Visibilidad y estado”.

Para activar el estado, haga clic en el botón “Guardar” de la esquina superior derecha y vaya a la sección “Publicar”.

Añadir acceso / acceso emergente en WordPress

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

Una vez en el editor de contenidos, puede hacer clic en el botón “+” y añadir un bloque “HTML personalizado”.

Después, tendrás que pegar el MonsterLink en el bloque HTML personalizado. Debe ser algo como esto:

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

Dado que se trata de un formulario de acceso y no de una suscripción por correo electrónico, deberá cambiar el texto del enlace en el código que dice “Suscríbase ahora” por el que desee. Para este tutorial, lo hemos cambiado a “accede o regístrate”, como puedes ver en el fragmento de código anterior.

También puedes añadir el código anterior a los menús de WordPress, a la barra lateral o a 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 acceso / acceso emergente en acción.

Consejo adicional: Seguimiento del recorrido del usuario en formularios de clientes potenciales de WordPress

Ahora que ha aprendido a crear una ventana emergente de acceso en WordPress, vamos a aprender a realizar un seguimiento de los recorridos de los usuarios en sus formularios de WordPress.

El seguimiento del recorrido del usuario puede ayudarle a entender por qué algunos usuarios rellenan formularios y otros no. Revela los pasos que dan los usuarios en tu sitio antes de enviar un formulario, lo que te permite conocer su comportamiento y actividad.

Saber qué anima a los usuarios a rellenar los formularios le permite recrear ese proceso para conseguir más clientes potenciales y hacer crecer su negocio. Aunque Google Analytics puede mostrar cierta actividad de los usuarios, no enlaza el comportamiento directamente con el usuario específico que envió el formulario.

Ahí es donde entra WPForms. Se trata de un popular plugin maquetador de formularios que incluye la extensión “User Journey”, que permite ver de dónde vienen los usuarios, qué ruta han seguido y cuánto tiempo han pasado en cada página antes de enviar un formulario.

Si está interesado en saber más, no dude en consultar nuestra guía sobre cómo realizar un seguimiento del recorrido del usuario en los formularios de clientes potenciales de WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear una ventana emergente de acceso en WordPress. También puedes marcar / comprobar nuestra lista completa de los mejores plugins de WordPress para páginas de acceso y nuestra guía sobre cómo crear una página de destino con WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.