Cómo crear popups de cuenta atrás a pantalla completa activados por inactividad con Elementor para aumentar las conversiones de los usuarios

ventana emergente a pantalla completaSe utiliza para atraer la atención del usuario de forma muy eficaz, especialmente en laPromocionesyllamada a la accióny otros escenarios que requieren una respuesta oportuna del usuario. En este artículo se detalla cómo utilizar elElementor crea una ventana emergente a pantalla completaEsta ventana emergente se mostrará cuando el usuario esté inactivo.30 segundos.Se activa automáticamente con unWidget de cuenta atrásEl objetivo esDespertar la atención del usuarioy provoca una acción inmediata.

I. ¿Por qué utilizar ventanas emergentes a pantalla completa?

Las ventanas emergentes a pantalla completa tienen varias ventajas significativas:

1. llamar la atención sobre algoEl diseño a pantalla completa hace que los usuarios no puedan ignorar las ventanas emergentes, lo que aumenta las tasas de clics y de conversión.
2. Promover la acción del usuarioLas ventanas emergentes, combinadas con una función de cuenta atrás, pueden crear una sensación de urgencia, incitando a los usuarios a realizar una acción lo antes posible, como completar una compra, suscribirse o participar en un evento.
3. activador de inactividadEl sistema de ventanas emergentes: detectando la actividad del ratón y el teclado del usuario, es posible mostrar ventanas emergentes cuando el usuario ha estado inactivo durante mucho tiempo para volver a despertar su interés.

En segundo lugar, cómo utilizar Elementor para crear una ventana emergente a pantalla completa.

Seguiremos los siguientes pasos para crear una ventana emergente a pantalla completa, inactiva y activada por estado:

1. Creación de ventanas emergentes

Paso 1: Ir al panel de Elementor

1. Inicie sesión en el backend de WordPress.
2. En el menú de navegación de la izquierda, vaya a plantilla > ventana emergente > Añadir nueva ventana emergente.

Paso 2: Asigne un nombre a su plantilla

1. La nueva ventana emergente debe tener un nombre que permita reconocerla fácilmente en el futuro.

2. Una vez que haya terminado de nombrar, haga clic en Crear una plantilla Botón.

Paso 3: Seleccionar o diseñar una plantilla

1. Elementor proporciona una ricabiblioteca de plantillasPuede elegir entre una selección de plantillas de ventanas emergentes prediseñadas.

2. Para un diseño más personalizado, puede optar por diseñar su propia plantilla desde cero. Pulse "Plantillas en blanco" y empieza a personalizar.

2. establecerDiseño de ventanas emergentes a pantalla completa

Durante el proceso de diseño, asegúrate de que tus popups son visualmente atractivos y completamente funcionales. Aquí usaremos Elementorcuenta atráswidgetspara ayudar a impulsar la adopción del usuario, navegando primero aestablecer.

Paso 1: Definir el tamaño de la ventana emergente

1. amplitudAjuste la anchura de la ventana emergente a 100 VW(100% de la anchura de la ventana gráfica) para que la ventana emergente cubra toda la anchura de la ubicación del widget.

2. alto grado: Ajuste la altura de la ventana emergente para que se ajuste a la pantalla, aquí puede utilizar el botón100 VH(100% a la altura de la ventana gráfica) para garantizar que la ventana emergente cubra toda la pantalla.

Paso 2: Ajustar la alineación de la ventana emergente

1. comandante en jefe (militar) posición horizontal ajustado a mediar entreAsegúrese de que el contenido de la ventana emergente está centrado horizontalmente.

2. comandante en jefe (militar) posición vertical También ajustado a mediar entrepara que se alinee verticalmente en el centro de la pantalla.

Paso 3: Mostrar los botones Anular y Cerrar

1. Anulación de la pantalla: Active la opción Mostrar superposición para que el contenido de fondo quede cubierto por una capa gris semitransparente cuando aparezca una ventana emergente, lo que aumentará aún más la atención del usuario.

2. Mostrar botón CerrarHabilitar el botón de cierre para que el usuario pueda cerrar libremente la ventana emergente. El botón de cierre suele ser un pequeño icono con una "X" que puede colocarse en la esquina superior derecha de la ventana emergente.

Paso 4: Personalizar el estilo y el contenido

1. Texto y fondoPersonalice la ventana emergente con su marca o sus promociones actuales.Texto, imagen de fondo. Es posible utilizarFuentes, colores y diseños de botones personalizadospara que coincida con el estilo de su sitio web.

2. Widget de cuenta atrás: la función Widget de cuenta atrás Arrastre y suelte en la ventana emergente. Establezca un tiempo para la cuenta atrás, que suele añadir un sentido de urgencia y dirige al usuario a tomar medidas inmediatas.

3. Configuración de la publicación

Cuando haya finalizado el diseño de la ventana emergente, haga clic enescriba a(matem.) géneroAjuste de las condiciones de visualización y activación.

Paso 1: Establecimiento de las condiciones

1. existe Ajustes de publicación en la que puede determinar en qué páginas o escenas se mostrará la ventana emergente.
2. En la configuración de la condición, seleccione incluso a través de > Todo el sitio. De este modo, la ventana emergente se activará en todas las páginas del sitio.

Paso 2: Condiciones de activación

1. opción condición de disparo Opciones.

2. Configurar las ventanas emergentes para que aparezcan en el usuario Tras 30 segundos de inactividad Trigger. Elementor detectará automáticamente el estado de actividad del usuario (por ejemplo, movimientos del ratón o clics), y si el usuario no ha realizado ninguna acción en el tiempo especificado, la ventana emergente se mostrará automáticamente.

Paso 3: Utilizar la ventana emergente de intención de salida

Además de los desencadenantes de inactividad, una combinación de Disparador de intención de salida, la ventana emergente también se muestra automáticamente cuando el usuario intenta cerrar o abandonar la página. Es una forma eficaz de captar la atención de los usuarios que están a punto de abandonar la página.

4. Ajustes avanzados y optimización

Animación y efectos visuales

Para hacer la ventana emergente más atractiva, puedes añadirle efectos de animación. En la página de edición de la ventana emergente creada en Elementor, haz clic en la parte derecha de la ventana "alto nivel", en "Efectos de acción", desde la parte inferior de la pestañaDeslizamiento hacia dentro o hacia fueraElementor ofrece una amplia gama de efectos de animación, por lo que puedes elegir el que mejor se adapte a tu estilo de diseño para mejorar la experiencia del usuario.

optimización del rendimiento

Aunque las ventanas emergentes son una herramienta eficaz para aumentar las conversiones, losUso excesivo o demasiado frecuenteLa ventana emergente puedeImpacto en la experiencia del usuario. Por lo tanto, se recomienda establecer una frecuencia razonable de ventanas emergentes y asegurarse de que no interfieren con el comportamiento normal de navegación de los usuarios. Además, asegúrese de que la velocidad de carga de las ventanas emergentes está optimizada para que no afecte al rendimiento general de la página.

resúmenes

Sigue los pasos de este artículo para saber cómo crear una ventana emergente de pantalla completa activada por inactividad con Elementor. Este tipo de ventanas emergentes no solo captan toda la atención del usuario, sino que también aumentan su participación y las conversiones con funciones de temporizador de cuenta atrás y activadores de intención de salida. En la práctica, recuerde optimizar la frecuencia y el estilo de la ventana emergente para garantizar una experiencia de usuario mejorada.