Cómo crear un modo emergente de inicio de sesión de WordPress (paso a paso)

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

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

Si ejecuta una tienda en línea, un sitio web de membresía o vende cursos en línea, es probable que permita a los usuarios registrarse e iniciar sesión en su sitio web..

Normalmente, cuando los usuarios hacen clic en el enlace de inicio de sesión, pasan a la página de inicio de sesión de WordPress predeterminada u otra página de inicio de sesión personalizada en su sitio web. Una vez que los usuarios inician sesión, se redirigen 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, 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 pulida puede aumentar sus ventas y conversiones.

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

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

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

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

Tras la activación, debe ir a Inicio de sesión modal página en el á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 / cierre de sesión para el formulario. También puede permitir a los usuarios generar sus propias contraseñas.

A continuación, debe desplazarse hacia abajo hasta la Estilos Sección y selección de diseño, etiquetas de visualización, color de fondo, color de botón, color de 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 complemento 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 abreviado ubicado en la parte superior de esta página. Tendrá que crear una nueva página en WordPress o editar una existente para agregar el shortcode en el editor de contenido.

También puede agregar el inicio de sesión modal en la barra lateral de WordPress. Simplemente ir a Apariencia »Widgets para arrastrar y soltar el Inicio de sesión CSH Widget en la barra lateral de tu sitio..

El inicio de sesión modal de CSH también se puede agregar en los archivos de plantillas de sus sitios 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 inicio de sesión modal con WPForms y OptinMonster

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

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

OptinMonster es el mejor software de generación de leads en el mercado. Le ayuda a convertir 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

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

Tras la activación, debe ir a WPForms »Complementos página para instalar y activar la Complemento de registro de usuario.

Después de activar el complemento, debes ir a WPForms »Añadir Nuevo página para crear el formulario de inicio de sesión del usuario.

Una vez que se inicie el constructor WPForms, debe elegir el prefabricado Formulario de inicio de sesión del usuario modelo.

Esta plantilla de formulario de inicio de sesión tiene los campos de correo electrónico y contraseña que funcionarán de manera similar al formulario de inicio de sesión de WordPress predeterminado. 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 Contraseña en la sección de vista previa, y mostrará las opciones de campo en el lado izquierdo. Puede agregar el código que figura 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 tienes que hacer clic en el Salvar botón y luego haga clic en el Empotrar botón.

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

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

Usando OptinMonster para crear una ventana emergente modal

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

Tras 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 control OptinMonster se abrirá en una nueva página web.

Una vez dentro, debes seleccionar Popup Lightbox como tipo de campaña, para que pueda agregar su formulario de inicio de sesión en la ventana emergente.

A continuación, debe seleccionar la Lona Plantilla de campaña que es una plantilla en blanco y le permite agregar códigos personalizados 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.

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

Desde aquí, tienes que ir a Optar en y seleccione el ancho y alto del lienzo, agregue el código de inserción del formulario de inicio de sesión Lienzo personalizado HTML campo, administre la pantalla y los efectos de sonido para la ventana emergente modal, 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.

Ya 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 la cookie y Duración de la cookie de éxito. Mostrará el formulario a todos los visitantes cuando hagan clic en su enlace..

A continuación, tienes que visitar el Reglas de visualización tab y expandir MonsterLink para cambiar el estado a activo.

Asegúrese de hacer clic en el Salvar botón en la esquina superior derecha e ir a Publicar sección para hacer el estado activo.

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

Agregar Modal Login 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 recientemente creada para el inicio de sesión modal, simplemente haga clic en Campañas de actualización botón.

A continuación, debe editar la configuración de salida de la campaña para habilitar la opción de 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 información general de las campañas y copiar la barra visible debajo de la opción en vivo de la campaña. Este slug único se puede usar en códigos cortos 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 única barra de campaña.

 Iniciar sesión / Registrarse 

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

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

Esperamos que este artículo te haya ayudado a aprender cómo crear un inicio de sesión modal en WordPress. También puede ver nuestra lista completa de los mejores complementos de la página de inicio de sesión de WordPress y diseñar su propia página de inicio de sesión fácilmente.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..