Cómo crear una ventana emergente modal de inicio de sesión de WordPress (paso a paso)

¿Desea agregar una ventana emergente de inicio de sesión de WordPress modal en su sitio? Una ventana emergente de inicio de sesión modal permite a los usuarios acceder rápidamente a su sitio web sin salir de la página que están viendo. Esto mejora la experiencia del usuario y la participación 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 modal, paso a paso.

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

Si tiene 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 dirige a la página de inicio de sesión predeterminada de WordPress u otra página de inicio de sesión personalizada en su sitio web. Una vez que los usuarios inician sesión, se les redirige a otra página.

Una ventana emergente de inicio de sesión modal le permite ver el formulario de inicio de sesión sin enviar a los usuarios a una página diferente. Una vez que haya iniciado sesión, puede redirigir a los usuarios a cualquier 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 refinada puede aumentar las ventas y las conversiones.

Dicho esto, echemos un vistazo a 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. Cree una ventana emergente de inicio de sesión modal utilizando el inicio de sesión CSH

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

Lo primero que debe hacer es instalar y activar el archivo. Acceso CSH conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, debe ir a Acceso modal en su área de administración de WordPress y seleccione un tipo para el formulario de inicio de sesión modal.

Después de seleccionar el tipo de cuadro de inicio de sesión modal, puede desplazarse hacia abajo y administrar las redirecciones de inicio de sesión / cierre de sesión para el módulo. También puede permitir que los usuarios generen sus propias contraseñas.

A continuación, debe desplazarse hacia abajo hasta el archivo. Estilos sección y seleccione el diseño, ver etiquetas, color de fondo, color del botón, color del enlace y más.

Además, puede agregar el correo electrónico de registro, el asunto del correo electrónico, usar Google reCaptcha y más. Este plugin también le permite agregar inicios de sesión sociales como Facebook, Twitter y Google.

Asegúrese de guardar sus cambios y copiar el código corto que se encuentra en la parte superior de esta página. Deberá crear una nueva página en WordPress o editar una existente para agregar el código corto en el editor de contenido.

También puede agregar inicio de sesión modal en la barra lateral de WordPress. Solo ve a Apariencia »Widget para arrastrar y soltar el archivo Acceso CSH widget en la barra lateral de su sitio.

El acceso modal CSH también se puede agregar en los archivos de plantilla de su sitio web. Después de agregarlo a su sitio, simplemente visite su sitio de WordPress para ver el enlace de inicio de sesión modal en acción.

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

Para este método necesitará el WPForms plugin y OptinMontser. Si ya tiene estos dos plugins, 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 plugin de registro de usuario.

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

¿Listo? Vamos a empezar.

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

Primero, necesitas instalar y activar el archivo. WPForms conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, debe ir a WPForms »Plugins página para instalar y activar el archivo Plugin de registro de usuario.

Después de activar el plugin, debe ir a WPForms »Agregar nuevo página para crear el formulario de inicio de sesión de usuario.

Una vez que se haya iniciado el generador de WPForms, debe elegir el archivo prediseñado Formulario de inicio de sesión de usuario 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. Puede arrastrar y soltar cualquier campo adicional desde el lado izquierdo de la pantalla según sea necesario.

Luego haga clic en el archivo Contraseña campo en la sección de vista previa y mostrará las opciones del campo en el lado izquierdo. Puede agregar el siguiente código en el cuadro de descripción de Contraseña campo 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 de eso, debe hacer clic en el archivo Ahorrar y luego haga clic en el botón Incorporar botón.

Se abrirá una ventana emergente con el código para incrustar. Debe copiar este código y guardarlo para usarlo más adelante.

Su formulario de inicio de sesión está listo. Ahora puede seguir adelante y crear la ventana emergente modal.

Usando OptinMonster para crear una ventana emergente modal

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

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

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

Una vez dentro, debe seleccionar Ventana emergente de Lightbox como tipo de campaña, puede agregar su formulario de inicio de sesión en la ventana emergente.

A continuación, debe seleccionar el archivo Lienzo plantilla de campaña que es una plantilla en blanco y le permite agregar código personalizado y códigos cortos.

Le pedirá que agregue un nombre a su caja de luz y seleccione el sitio web donde desea cargar esta ventana emergente.

Después de hacer clic en el archivo Empiece a construir , será redirigido a la página de configuración de la campaña de OptinMonster.

Desde aquí, tienes que ir a Optar en pestaña y establezca el ancho y alto del lienzo, agregue el código de inserción del módulo de inicio de sesión en Lienzo HTML personalizado campo, administrar la pantalla y los efectos de sonido para ventanas emergentes modales y más.

Nota: El código de inserción del formulario de inicio de sesión debe ser el código que 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 valor «0» para Duración de las cookies es Duración de la cookie exitosa. Mostrará el formulario a todos los visitantes cada vez que hagan clic en su enlace.

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

Asegúrate de hacer clic en el archivo. Ahorrar en la esquina superior derecha y vaya a Publicar sección para activar el estado.

Ahora puede agregar esta ventana emergente de inicio de sesión modal en sus páginas o publicaciones de WordPress.

Acceso modal agregado en WordPress

Tienes que 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 Actualizar campañas botón.

A continuación, debe cambiar la configuración de salida de la campaña para habilitar la suscripción en su sitio y seleccionar quién debe ver la ventana emergente de inicio de sesión modal. Asegúrate de hacer clic en el archivo. Guarde su configuración botón.

Después de eso, debe volver a la página de descripción general de la campaña y copiar la barra visible en la opción en vivo de la campaña. Esta babosa única se puede usar en shortcode y código para mostrar el inicio de sesión modal en WordPress.

A continuación, puede crear una nueva página de WordPress o editar una existente y agregar este código con su slug de campaña única.

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

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

Asegúrese de guardar los cambios de su 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. Es posible que también desee ver nuestra lista completa de los mejores plugins de la página de inicio de sesión de WordPress y diseñar fácilmente su página de inicio de sesión.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *