How To Create A Modal Login In Wordpress

Cómo crear un modal contextual de inicio de sesión de WordPress (paso a paso)

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

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.

Seleccione El Tipo De Conexió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.
Tipo De Conexión De Redireccionamiento
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.
Personaliza Tu Formulario De Inicio De Sesión Modal
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.
Agregar Un Formulario De Inicio De Sesión Social
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.
Copie El Código Corto Para El Plugin De Inicio De Sesión De Csh
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.
Arrastre Y Suelte El Widget De Inicio De Sesión De Csh
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.
Formulario Emergente De Conexión Modal

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.
Página De Plugins De Wpforms
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.
Agregar Un Formulario Nuevo
Una vez que se inicia el generador de WPForms, debe elegir el Formulario de inicio de sesión de usuario modelo.
Seleccione El Formulario De Inicio De Sesión De Usuario
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.
Plantilla De Formulario De Inicio De Sesión
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í.

Agregar Opciones De Contraseña
Después de eso, debe hacer clic en el Salvar luego haga clic en el botón Incorporar botón.
Guardar E Integrar
Se abre una ventana emergente con el código de inserción. Debe copiar este código y guardarlo para usarlo más adelante.
Copie El Código Insertado
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.
Crea Una Nueva Campaña
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.
Seleccione El Tipo De Campaña
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.
Seleccione Una Plantilla De Campaña
Le pedirá que agregue un nombre a su caja de luz y seleccione el sitio web en el que desea cargar esta ventana emergente.
Agregar El Nombre Y El Sitio De La Campaña
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.
Agregue El Código De Inserción Del Formulario De Inicio De Sesión En La Ventana Emergente Modal
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.
Establecer El Valor De Duración De La Cookie
Entonces tienes que visitar el Reglas de visualización pestaña y expandir MonsterLink para cambiar el estado a activo.
Estado De Monsterlink Activo
Asegúrese de hacer clic en el Salvar en la esquina superior derecha y vaya a Publicar sección para activar el estado.
Guarda Y Publica La Campaña
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.
Cambiar La Configuración De Salida
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.
Campaña De Compra Con Visitantes
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.
Copia La Babosa De La Campaña
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.
Conexión Modal En Wordpress
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.

Leave a Reply