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

¬ŅDesea agregar una ventana 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 el compromiso 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.

 Cómo crear un inicio de sesión modal en WordPress

¬ŅPor qu√© crear un modo 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 la 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, 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 usted puede elegir el 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.

Tras la activación, debe ir a Inicio de sesión modal página en su á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 para el formulario. Tambi√©n puede permitir que los usuarios generen sus propias contrase√Īas.

Redirigir tipo de inicio de sesión

A continuaci√≥n, debe desplazarse hacia abajo hasta Estilos secci√≥n y seleccionar dise√Īo, mostrar etiquetas, color de fondo, color de bot√≥n, color de enlace y m√°s.

Dise√Īe su 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, Twittery Google.

Agregar formulario de inicio de sesión social

Aseg√ļrese de guardar los cambios y copiar el shortcode ubicado en la parte superior de esta p√°gina. Deber√° crear una nueva p√°gina en WordPress o editar una existente para agregar el shortcode en el editor de contenido.

Copiar shortcode para el complemento de inicio de sesión CSH

Tambi√©n puede agregar el inicio de sesi√≥n modal en su barra lateral de WordPress. Simplemente ve a Apariencia ¬ĽWidgets arrastrar y soltar el Inicio de sesi√≥n CSH widget en la barra lateral de su sitio.

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

El inicio de sesió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 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, 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 complemento emergente de WordPress y software de generación de leads en el 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

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.

Tras la activaci√≥n, debe ir a WPForms ¬ĽComplementos p√°gina para instalar y activar el Complemento de registro de usuario.

P√°gina de complementos de 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

Una vez que se inicia el generador de WPForms, debe elegir el 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 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.

Plantilla de formulario de inicio de sesión

A continuaci√≥n, 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 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.

Can't remember your password? Click here. Don't have an account? Register here.

Agregar opciones de contrase√Īa

Después de eso, debe hacer clic en el Salvar 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 usarlo más tarde.

Copie el código insertado

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 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.

Crear nueva campa√Īa

Su panel de control de OptinMonster se abrir√° en una nueva p√°gina web.

Una vez dentro, debes seleccionar Ventana emergente de caja de luz como tipo de campa√Īa, para que pueda agregar su formulario de inicio de sesi√≥n en la ventana emergente.

Seleccionar tipo de campa√Īa

A continuaci√≥n, debe seleccionar el Lona plantilla de campa√Īa que es una plantilla en blanco y le permite agregar c√≥digos personalizados y c√≥digos cortos.

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 nombre de campa√Īa y sitio

Una vez que haga clic en el Comience a construir bot√≥n, ser√° redirigido a la p√°gina de configuraci√≥n de la campa√Īa OptinMonster.

A partir de aqu√≠, debes 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 HTML de lienzo personalizado campo, administre la pantalla y los efectos de sonido para ventanas emergentes modales, 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.

Agregar código de incrustación de formulario de inicio de sesión en ventana emergente modal

Como 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.

Establecer el valor de duración de la cookie

A continuaci√≥n, debe 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 bot√≥n en la esquina superior derecha e ir 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 en 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 recientemente creada para el inicio de sesi√≥n modal, simplemente haga clic en el Actualizar campa√Īas bot√≥n.

Editar configuración de salida

A continuaci√≥n, debe editar la configuraci√≥n de salida de la campa√Īa para habilitar optin en su sitio y seleccionar qui√©n deber√≠a 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 las campa√Īas y copiar la babosa que est√° visible debajo de la opci√≥n en vivo de la campa√Īa. Esta babosa √ļnica se puede usar en c√≥digos cortos y c√≥digo para mostrar el inicio de sesi√≥n modal en WordPress.

Copiar babosa de campa√Īa

A continuaci√≥n, puede crear una nueva p√°gina de WordPress o editar una existente y agregar este c√≥digo con su babosa de campa√Īa √ļnica.

Login / Register

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.

Inicio de sesión modal en 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 dise√Īar su propia p√°gina de inicio de sesi√≥n f√°cilmente.

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