¿Desea agregar un modal contextual de inicio de sesión de WordPress a 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. 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 un modal contextual de inicio de sesión de WordPress?
Contents
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 otra página. Una vez que haya iniciado sesión, puede redirigir a los usuarios a la página de su elección. 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 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. 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 conexión modal usando la conexió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 plugin de inicio de sesión de CSH. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Al activar, debes ir a Conexión modal en su área de administración de WordPress y seleccione un tipo de 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 formulario. También puede permitir que los usuarios generen sus propias contraseñas.
Entonces tienes que desplazarte hacia abajo modas y seleccione el diseño, las etiquetas de visualización, el color de fondo, el color del botón, el color del enlace, etc.
Además, puede agregar el correo electrónico de registro, el asunto del correo electrónico, usar Google reCaptcha, etc. Este plugin también le permite agregar inicio de sesión social como Facebook, Twitter y Google.
Asegúrese de guardar los cambios y copiar el código corto 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 la conexión modal en su barra lateral de WordPress. Solo ve a Apariencia »Widgets para arrastrar y soltar el Conexión CSH widget en la barra lateral de su sitio.
La conexión modal CSH también se puede agregar en los archivos de plantilla de su sitio web. Una vez que lo haya agregado 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 conexión modal con WPForms y OptinMonster
Para este método, necesitará el plugin WPForms 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? Empecemos.
Uso de WPForms para crear un formulario de inicio de sesión de usuario
En primer lugar, debe instalar y activar el plugin WPForms. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Al activar, debes ir a WPForms »Complementos página para instalar y activar el Complemento 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 del usuario.
Una vez que se inicia el generador de WPForms, debe elegir el Formulario de inicio de sesión de usuario modelo.
Esta plantilla de formulario de inicio de sesión contiene los campos de dirección de correo electrónico y contraseña que funcionarán igual que el 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 Contraseña campo en la sección de vista previa, y mostrará las opciones de campo en el lado izquierdo. Puede agregar el código a continuación en el cuadro de descripción de Contraseña campo para mostrar opciones como olvidar contraseña y registro de usuario. ¿No recuerdas tu contraseña? Haga clic aquí. ¿No tienes una cuenta? Registrar aquí.
Después de eso, debe hacer clic en el Salvar luego haga clic en el botón Incorporar botón.
Se abre una ventana emergente con el código de inserción. Debe copiar este código y guardarlo para usarlo más adelante.
Su formulario de inicio de sesión está listo. Ahora puede crear la ventana emergente modal.
Usando OptinMonster para crear una ventana emergente modal
Primero deberá instalar y activar el plugin OptinMonster. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Al activar, debes ir a OptinMonster en el área de administración de WordPress y haga clic en Crea una nueva campaña botón.
Su panel de OptinMonster se abrirá en una nueva página web. Una vez dentro, debes seleccionar Lightbox emergente como tipo de campaña, para que pueda agregar su formulario de inicio de sesión en la ventana emergente.
Entonces necesitas seleccionar el 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 en el que desea cargar esta ventana emergente.
Una vez que haga clic en el Empiece a construir , será redirigido a la página de configuración de la campaña de OptinMonster. De ahí tienes que ir a Optar en pestaña y establezca el ancho y la altura del lienzo, agregue el código de inserción del formulario de inicio de sesión en HTML de lienzo personalizado campo, administrar la pantalla y los efectos de sonido para la ventana emergente modal, y más.
Notar: 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 conexión modal, debe ir a la pestaña de configuración y establecer el valor « 0 » para Duración de la cookie y Duración de la cookie de éxito. Mostrará el formulario a todos los visitantes cada vez que hagan clic en su enlace.
Entonces tienes que visitar el Reglas de visualización pestaña y expandir MonsterLink para cambiar el estado a activo.
Asegúrese de hacer clic en el Salvar 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.
Agregar conexión modal 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 el botón 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úrese de hacer clic en el Guardar ajustes botón.
Después de eso, debe volver a la página de descripción general de la campaña y copiar la barra que está visible en la opción en vivo de la campaña. Esta babosa única se puede usar en códigos cortos y código para mostrar la conexión modal en WordPress.
Luego, puede crear una nueva página de WordPress o editar una página existente y agregar este código con su slug de campaña única. Iniciar sesión / Registrarse También puede agregar el código anterior en los menús, la barra lateral o cualquier otra área de su sitio de WordPress. Asegúrese de guardar los cambios en la página de WordPress y visite su sitio para ver la conexión modal en acción.
Esperamos que este artículo le haya ayudado a aprender a crear una conexión modal en WordPress. También puede consultar nuestra lista completa de los mejores plugins de la página de inicio de sesión de WordPress y diseñar fácilmente su propia página de inicio de sesión. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
){kind=link}