¿Desea agregar un modal emergente de inicio de sesión de WordPress en 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. 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 un modal emergente de inicio de sesión de WordPress, paso a paso.
¿Por qué crear un modal emergente 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, son llevados 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, son redirigidos nuevamente 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 impulsar 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 métodos para hacerlo, y puede elegir el que mejor se adapte a sus necesidades.
Método 1. Cree una ventana emergente de inicio de sesión modal usando CSH Login
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 Inicio de sesión CSH enchufar. 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 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 los redireccionamientos de inicio/cierre de sesión para el formulario. También puede permitir que los usuarios generen sus propias contraseñas.
A continuación, debe desplazarse hacia abajo hasta la Estilos sección y seleccione 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 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 abreviado en el editor de contenido.
También puede agregar el inicio de sesión modal en su barra lateral de WordPress. Simplemente ve a Apariencia » Widgets para arrastrar y soltar el inicio de sesión CSH widget en la barra lateral de su sitio.
El inicio de sesión modal de CSH también se puede agregar en los archivos de plantilla de su sitio web. Una vez que lo haya agregado en 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 complemento 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 el software de generación de prospectos 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 WPForms enchufar. 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 el Complemento de registro de usuario.
Después de activar el complemento, debe ir a WPForms » Agregar nuevo página para crear el formulario de inicio de sesión de usuario.
Una vez que se inicia el generador de WPForms, debe elegir el preconstruido Formulario de inicio de sesión de 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 predeterminado de WordPress. 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 Clave campo 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 Clave 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 botón Ahorrar y luego haga clic en el botón Empotrar botón.
Se abrirá una ventana emergente con el código de inserción. Debe copiar este código y guardarlo para usarlo más tarde.
Su formulario de inicio de sesión está listo. Ahora puede continuar y crear la ventana emergente modal.
Uso de OptinMonster para crear una ventana emergente modal
Primero deberá instalar y activar el OptinMonster enchufar. 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 OptinMonster se abrirá en una nueva página web.
Una vez dentro, debe seleccionar Caja de luz emergente 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 el Lienzo plantilla de campaña que es una plantilla en blanco y le permite agregar código personalizado y códigos abreviados.
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í, debes ir a Optar en pestaña y establezca el ancho y la altura del lienzo, agregue el código de incrustación del formulario de inicio de sesión en HTML de lienzo personalizado campo, administre la visualización 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.
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 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.
A continuación, debe visitar el Reglas de visualización pestaña y expandir MonsterLink para cambiar el estado a activo.
Asegúrese de hacer clic en el Ahorrar botón 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 inicio de sesió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 Actualizar campañas botón.
A continuación, debe editar 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 resumen de campañas y copiar el slug que está 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 slug de campaña único.
<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">Login / Register</a>
También puede agregar el código anterior en sus menús de WordPress, barra lateral o cualquier otra área de su sitio.
Asegúrese de guardar los cambios en la 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 cómo crear un inicio de sesión modal en WordPress. Es posible que también desee 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.
.