Cómo crear un módulo emergente de inicio de sesión en WordPress (paso a paso)
¿Quieres añadir un modal de inicio de sesión de WordPress en tu sitio? Un modal de inicio de sesión permite a tus usuarios iniciar rápidamente la sesión en tu sitio web sin salir de la página que están viendo. Esto mejora la experiencia del usuario y el compromiso en tu sitio web. En este artículo, te mostraremos cómo crear fácilmente un modal de inicio de sesión en WordPress, paso a paso.
¿Por qué crear un modal de inicio de sesión en WordPress?
Si tienes una tienda online, un sitio web de socios o vendes cursos online, es probable que permitas a los usuarios registrarse e iniciar sesión en tu sitio web.
Normalmente, cuando los usuarios hacen clic en el enlace de inicio de sesión, se les lleva a la página de inicio de sesión predeterminada de WordPress o a otra página de inicio de sesión personalizada de tu sitio web. Una vez que los usuarios han iniciado la sesión, son redirigidos de nuevo a otra página.
Una ventana emergente de inicio de sesión modal te permite mostrar el formulario de inicio de sesión sin enviar a los usuarios a una página diferente. Una vez iniciada la sesión, puedes redirigir a los usuarios a la página que quieras
Una ventana emergente de inicio de sesión modal es más rápida y mejora la experiencia del usuario en tu sitio web. Una experiencia de usuario más rápida y más pulida puede aumentar tus ventas y conversiones
Dicho esto, vamos a ver 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. Crear una ventana emergente de inicio de sesión modal con CSH Login
Este método es más fácil y se recomienda para la mayoría de los usuarios.
Lo primero que tienes que hacer es instalar y activar el Inicio de sesión en CSH plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, tienes que ir a Inicio de sesión modal en tu área de administración de WordPress y selecciona un tipo de formulario de inicio de sesión modal
Después de seleccionar el tipo de caja de inicio de sesión modal, puedes desplazarte hacia abajo y gestionar los redireccionamientos de inicio de sesión/cierre de sesión para el formulario. También puedes permitir que los usuarios generen sus propias contraseñas.
A continuación, tienes que desplazarte hacia abajo hasta el Estilos sección y selecciona el diseño, las etiquetas de visualización, el color de fondo, el color de los botones, el color de los enlaces y mucho más.
Además, puedes añadir el correo electrónico de registro, el asunto del correo electrónico, utilizar Google reCaptcha, y mucho más. Este plugin también te permite añadir el inicio de sesión social como Facebook, Twitter y Google.
Asegúrate de guardar los cambios y de copiar el shortcode situado en la parte superior de esta página. Tendrás que crear una nueva página en WordPress o editar una existente para añadir el shortcode en el editor de contenido.
También puedes añadir el inicio de sesión modal en tu barra lateral de WordPress. Simplemente ve a Apariencia " Widgets para arrastrar y soltar el Inicio de sesión en CSH widget en la barra lateral de tu sitio.
El inicio de sesión modal de CSH también se puede añadir en los archivos de plantilla de tus sitios web. Una vez que lo hayas añadido en tu sitio, simplemente visita tu sitio de WordPress para ver el enlace de inicio de sesión modal en acción.
Método 2. Crear una ventana emergente de inicio de sesión modal con WPForms y OptinMonster
Para este método necesitarás el WPForms plugin y OptinMontser. Si ya tienes estos dos plugins, entonces este método es la mejor solución para ti.
WPForms es el mejor plugin de formularios de contacto para WordPress. Necesitarás al menos su plan Pro para acceder al complemento de registro de usuarios
OptinMonster es el mejor plugin de ventanas emergentes para WordPress y el mejor software de generación de contactos del mercado. Te ayuda a convertir a los visitantes del sitio web en suscriptores y clientes. Necesitarás al menos el plan Pro para acceder a la función MonsterLinks utilizada en este artículo
¿Preparado? Empecemos
Uso de WPForms para crear un formulario de inicio de sesión de usuario
En primer lugar, tienes que instalar y activar el WPForms plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, tienes que ir a WPForms " Complementos página para instalar y activar el Complemento de registro de usuarios.
Después de activar el addon, tienes que ir a WPForms " Añadir nuevo página para crear el formulario de inicio de sesión del usuario.
Una vez lanzado el constructor de WPForms, tienes que elegir el formulario preconstruido Formulario de inicio de sesión de usuario plantilla.
Esta plantilla de formulario de inicio de sesión tiene los campos de correo electrónico y contraseña que funcionarán de forma similar al formulario de inicio de sesión predeterminado de WordPress. Puedes arrastrar y soltar cualquier campo adicional desde el lado izquierdo de la pantalla según sea necesario.
A continuación, haz clic en el botón Contraseña en la sección de vista previa, y mostrará las opciones del campo en el lado izquierdo. Puedes añadir el código que se indica a continuación en el cuadro de descripción de Contraseña para mostrar opciones como olvidar la contraseña y el registro del 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 tienes que hacer clic en el botón Guardar y luego haz clic en el botón Incrustar botón.
Se abrirá una ventana emergente con el código de incrustación. Tienes que copiar este código y guardarlo para utilizarlo más tarde.
Tu formulario de acceso está listo. Ahora puedes seguir adelante y crear la ventana emergente modal.
Uso de OptinMonster para crear una ventana emergente modal
Primero tendrás que instalar y activar el OptinMonster plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, tienes que ir a OptinMonster en el área de administración de WordPress y haz clic en Crear nueva campaña botón.
Tu panel de OptinMonster se abrirá en una nueva página web.
Una vez dentro, tienes que seleccionar Caja de luz emergente como tipo de campaña, para que puedas añadir tu formulario de acceso en la ventana emergente.
A continuación, tienes que seleccionar el Lienzo plantilla de campaña que es una plantilla en blanco y te permite añadir código personalizado y shortcodes.
Te pedirá que añadas un nombre a tu lightbox y que selecciones el sitio web donde quieres cargar esta ventana emergente.
Una vez que hagas clic en el botón Empezar a construir serás redirigido a la página de configuración de la campaña de OptinMonster.
Desde aquí, tienes que ir a Optin y establece la anchura y la altura del lienzo, añade el código de incrustación del formulario de acceso en Lienzo personalizado HTML campo, gestionar la visualización y los efectos de sonido para la ventana emergente modal, y mucho más.
Nota: El código de incrustación del formulario de acceso debe ser el código que has copiado después de crear tu formulario de acceso en el paso anterior.
Como estás creando una ventana emergente de inicio de sesión modal, debes 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 tu enlace.
A continuación, tienes que visitar el Reglas de visualización pestaña y expandir MonsterLink para cambiar el estado a activo.
Asegúrate de hacer clic en el Guardar en la esquina superior derecha y ve a Publicar para activar el estado.
Ahora puedes añadir esta ventana emergente de acceso modal en tus páginas o entradas de WordPress.
Añadir un inicio de sesión modal en WordPress
Tienes que volver a OptinMonster en tu área de administración de WordPress, y te mostrará la lista de campañas. Si no ves tu campaña recientemente creada para el inicio de sesión modal, entonces simplemente haz clic en el botón Actualizar campañas botón.
A continuación, tienes que editar los ajustes de salida de la campaña para habilitar el optin en tu sitio y seleccionar quién debe ver la ventana emergente de inicio de sesión modal. Asegúrate de hacer clic en el botón Guardar configuración botón.
Después tienes que volver a la página de resumen de las 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 utilizar en los shortcodes y en el código para mostrar el inicio de sesión modal en WordPress.
A continuación, puedes crear una nueva página de WordPress o editar una ya existente y añadir este código con tu slug de campaña único.
<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">Login / Register</a>
También puedes añadir el código anterior en tus menús de WordPress, en la barra lateral o en cualquier otra zona de tu sitio.
Asegúrate de guardar los cambios en la página de WordPress y visita tu sitio para ver el inicio de sesión modal en acción.
Esperamos que este artículo te haya ayudado a saber cómo crear un inicio de sesión modal en WordPress. Quizá también quieras ver nuestra lista completa de los mejores plugins de páginas de inicio de sesión de WordPress y diseñar tu propia página de inicio de sesión fácilmente
Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.
Si quieres conocer otros artículos parecidos a Cómo crear un módulo emergente de inicio de sesión en WordPress (paso a paso) puedes visitar la categoría Plugins.
Deja un comentario
¡Más Contenido!