Cómo hacer un Sitio Web o Blog en 2024 - Guía fácil y Gratuita para Crear un Sitio Web

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

¿Desea agregar una ventana emergente de inicio de sesión de WordPress a su sitio? Una ventana emergente de inicio de sesión modal permite a sus 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 el compromiso en su sitio. En este artículo, le mostraremos cómo crear fácilmente un modo de inicio de sesión emergente de WordPress, paso a paso.

¿Por qué crear un modo emergente de inicio de sesión de WordPress?

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

Por lo general, 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 oa otra página de inicio de sesión personalizada en su sitio web. Después de que los usuarios inician sesión, son redirigidos a otra página nuevamente.

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. Después de iniciar sesión, puede redirigir a los usuarios a la página deseada.

Una ventana emergente de inicio de sesión modal es más rápida y mejora la experiencia del usuario en su sitio. Una experiencia de usuario más rápida y fluida 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 formas de hacerlo y puede elegir la que mejor se adapte a sus 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 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 CSH. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

🔥 Leer:  Cómo obtener un descuento para estudiantes de Tidal

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

Seleccione el tipo 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 del formulario. También puede permitir que los usuarios generen sus propias contraseñas.

Redirigir tipo de inicio de sesión

Entonces debes desplazarte hacia abajo hasta Estilos sección y seleccione el diseño, mostrar etiquetas, color de fondo, color de botón, color de enlace y más.

Crea tu formulario de inicio de sesión modal

Además, puede agregar correo electrónico de registro, 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

Agregar formulario de inicio de sesión social

Guarde sus cambios y copie el código corto ubicado en la parte superior de esta página. Deberá crear una nueva página de WordPress o editar una existente para agregar el código corto en el editor de contenido.

Copie el código de acceso al complemento de inicio de sesión CSH

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

Arrastre y suelte el widget de inicio de sesión CSH

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

Formulario emergente de inicio de sesión modal

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, 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 complemento emergente de WordPress y software de generación de leads del mercado. 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.

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

Primero, debe 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.

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

🔥 Leer:  Cómo rastrear AirTag: una guía paso a paso

Página del complemento WPForms

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

Agregar nuevo formulario

Después de que se inicie el generador de WPForms, deberá elegir el generador preconstruido Formulario de inicio de sesión del usuario modelo.

Seleccionar formulario de inicio de sesión de usuario

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 estándar de WordPress. Puede arrastrar y soltar cualquier campo adicional en el lado izquierdo de la pantalla, según sea necesario.

Plantilla de formulario de inicio de sesión

Luego haga clic en 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 la contraseña y el registro del usuario.

¿No recuerdas tu contraseña? Haga clic aquí. ¿No tienes una cuenta? Registrarse aquí.

Agregar opciones de contraseña

Después de eso, debes hacer clic en Guardar  botón y luego haga clic en el Empotrar botón.

Guardar e incrustar

Se abrirá una ventana emergente con el código de inserción. Debe copiar este código y guardarlo para su uso posterior.

Copie el código ingresado

Su formulario de inicio de sesión está listo. Ahora puede continuar 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.

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

Crear nueva campaña

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

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

Seleccione su tipo de campaña

Entonces debes seleccionar el Lienzo plantilla de campaña, que es una plantilla en blanco y le permite agregar códigos personalizados y códigos de acceso.

Seleccionar plantilla de campaña

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

Agregar campaña y nombre del sitio

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

Desde aquí, debes ir a Activar pestaña y establecer el ancho y alto de la pantalla, agregar el código de inserción en el formulario de inicio de sesión Pantalla html personalizada administre la pantalla y los efectos de sonido para ventanas emergentes modales y más.

🔥 Leer:  Las 12 mejores fundas hermosas para iPhone 11 Pro que puedes comprar

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 el formulario de inicio de sesión en el paso anterior.

Agregue código incrustado al formulario de inicio de sesión en la ventana emergente modal

Como está creando una ventana emergente de inicio de sesión modal, debe acceder a la pestaña Configuración y establecer el valor “0” en Duración de la cookie y Duración correcta de la cookie. Mostrará el formulario a todos los visitantes cada vez que hagan clic en su enlace.

Establecer el valor de la duración de la cookie

Entonces debes visitar el Mostrar reglas guiar y expandir MonsterLink para cambiar el estado a activo.

Estado de MonsterLink activo

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

Guardar y publicar campaña

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

Agregar inicio de sesión modal en WordPress

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

Editar configuración de salida

A continuación, debe editar la configuración de salida de la campaña para activar 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.

Comprar campaña para visitantes

Después de eso, debe volver a la página de descripción general de la campaña y copiar la babosa que está visible debajo de la opción en vivo de la campaña. Este slug exclusivo se puede usar en códigos de acceso y código para mostrar el inicio de sesión modal en WordPress.

Copiar babosa de campaña

Puede crear una nueva página de WordPress o editar una existente y agregar este código con su campaña de campaña exclusiva.

Iniciar sesión / Registrarse

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

Guarde sus cambios en la página de WordPress y visite su sitio web para ver el inicio de sesión modal en acción.

Inicio de sesión modal de WordPress

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 crear fácilmente su propia página de inicio de sesión.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.