Cómo crear una ventana emergente de inicio de sesión de WordPress Modal (Paso a Paso)

¿Desea añadir una ventana emergente de inicio de sesión de WordPress en su sitio? Una ventana emergente de inicio de sesión modal permite a sus usuarios iniciar sesión rápidamente en su sitio web sin salir de la página que están viendo. Esto mejora la experiencia y el compromiso del usuario en su sitio web. En este artículo, le mostraremos cómo crear fácilmente una ventana emergente de inicio de sesión de WordPress – paso a paso.

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

Si usted administra una tienda en línea, un sitio web de membresía o vende cursos en línea, es probable que permita que los usuarios se registren e inicien sesión en su 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 en su sitio web. Una vez que los usuarios han iniciado sesión, se les redirige de nuevo a otra página.

Una ventana emergente de inicio de sesión modal le permite mostrar el formulario de inicio de sesión sin enviar a los usuarios a una página diferente. Una vez que haya iniciado sesión, podrá redirigir a los usuarios a la página que desee.

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

Dicho esto, echemos un vistazo a cómo crear fácilmente una ventana emergente de inicio de sesión modal en WordPress. Le mostraremos dos métodos para hacerlo, y usted puede elegir el que mejor se adapte a sus necesidades.

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

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

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

Tras la activación, debe ir a la página Modal Login en su área de administración de WordPress y seleccionar un tipo de formulario de inicio de sesión modal.

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

A continuación, debe desplazarse hacia abajo hasta la sección Estilos y seleccionar 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.

Además, puede agregar correo electrónico de registro, asunto del correo electrónico, utilizar Google reCaptcha y mucho más. Este plugin también le permite añadir acceso social como Facebook, Twitter y Google.

Asegúrese de guardar los cambios y copiar el código abreviado que se encuentra en la parte superior de esta página. Tendrás que crear una nueva página en WordPress o editar una ya existente para añadir el código abreviado en el editor de contenido.

También puede agregar el inicio de sesión modal en su barra lateral de WordPress. Simplemente vaya a Apariencia » Widgets para arrastrar y soltar el widget CSH login en la barra lateral de su sitio.

El inicio de sesión modal CSH también se puede añadir a los archivos de plantillas de sus sitios web. Una vez que lo haya agregado en su sitio, simplemente visite su sitio de WordPress para ver el enlace de inicio de sesión modal en acción.

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

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

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

OptinMonster es el mejor plugin de WordPress y el mejor software de generación de prospectos del mercado. Le 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.

¿Listo? Vamos a empezar.

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

Primero, necesita instalar y activar el plugin WPForms. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debe ir a la página WPForms » Addons para instalar y activar el User Registration Addon .

Después de activar el complemento, debe ir a la página WPForms » Add New para crear el formulario de inicio de sesión de usuario.

Una vez que se lanza el generador de WPForms, debe elegir la plantilla Formulario de inicio de sesión de usuario preconstruido .

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. Puede arrastrar y soltar cualquier campo adicional desde el lado izquierdo de la pantalla según sea necesario.

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

1¿No recuerda su contraseña? Haga clic aquí. ¿No tiene una cuenta? Regístrese aquí.

Después debe hacer clic en el botón Guardar y luego en el botón Insertar .

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

Su formulario de acceso está listo. Ahora puedes seguir adelante y crear el popup modal.

Uso de OptinMonster para crear un Popup Modal

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

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

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

Una vez dentro, debe seleccionar Lightbox Popup como tipo de campaña, para poder añadir su formulario de inicio de sesión en la ventana emergente.

A continuación, debe seleccionar la plantilla de campaña Canvas , que es una plantilla en blanco y le permite añadir código personalizado y códigos abreviados.

Le pedirá que añada un nombre a su lightbox y seleccione el sitio web en el que desea cargar esta ventana emergente.

Una vez que haga clic en el botón Iniciar construcción , será redirigido a la página de configuración de la campaña de OptinMonster.

Desde aquí, debe ir a la pestaña Optin y establecer la anchura y la altura del lienzo, añadir código de incrustación del formulario de inicio de sesión en el campo Custom Canvas HTML , gestionar la visualización y los efectos de sonido para el popup modal, y mucho más.

Nota: El código de incrustación del formulario de inicio de sesión debe ser el código que usted copió después de crear su formulario de inicio de sesión en el paso anterior.

Dado que está creando una ventana emergente de inicio de sesión modal, debe ir a la pestaña de configuración y establecer el valor0 para Duración de las cookies y Duración de las cookies de éxito . Mostrará el formulario a todos los visitantes cada vez que hagan clic en su enlace.

A continuación, debe visitar la pestaña Mostrar reglas y expandir MonsterLink para cambiar el estado a activo.

Asegúrese de hacer clic en el botón Guardar en la esquina superior derecha y vaya a la sección Publicar para activar el estado.

Ahora puedes añadir esta ventana emergente de inicio de sesión modal en tus páginas o mensajes de WordPress.

Adición de Modal Login en WordPress

Debe volver a OptinMonster en su área de administración de WordPress, y le mostrará la lista de campañas. Si no ve su campaña creada recientemente para el inicio de sesión modal, simplemente haga clic en el botón Actualizar campañas .

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

Después de eso, debe 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 puede ser utilizado en códigos abreviados y código para mostrar el inicio de sesión modal en WordPress.

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

1″#»data-optin-slug=»mw7pzo63ch6wpfzi»>Inicio de sesión / Registro

También puede agregar el código anterior en los menús de WordPress, en la barra lateral o en cualquier otra área de su sitio.

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

Esperamos que este artículo le haya ayudado a aprender a crear un inicio de sesión modal en WordPress. También puedes ver nuestra lista completa de los mejores plugins de la página 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 nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario