Las ventanas emergentes son ventanas modales de llamada a la acción que aparecen y se superponen a la página en un momento específico o bajo condiciones y desencadenantes específicos. Las ventanas emergentes están diseñadas para centrar la atención del usuario una vez que ha realizado una acción.

Para empezar, ve a Plantillas> Popups. Controle el diseño, las condiciones, las reglas y los estilos de la ventana emergente y luego diseñe el contenido de la ventana emergente.

Nota: Haga clic en el icono de rueda dentada Configuración emergente en la barra de herramientas inferior del panel para editar la configuración emergente.

Diseño emergente

Configuraciones

Diseño

1. Anchura: Establece el ancho exacto de la ventana emergente, usando px o vh
2. Altura: Establece la altura exacta de la ventana emergente, usando px o vh. Use 100vh para ancho y alto para crear ventanas emergentes de pantalla completa
3. Horizontal: Elija la posición horizontal de la ventana emergente, desde Izquierda, Centro o Derecha
4. Vertical: Elija la posición vertical de la ventana emergente, desde Arriba, Centro o Abajo
5. Cubrir: Muestra u oculta la superposición de fondo
6. Botón Cerrar: Elija Mostrar u Ocultar el botón Cerrar
7. Mostrar botón después de x segundos (si se eligió Mostrar botón de cierre): seleccione la cantidad de segundos que debe esperar antes de mostrar el botón de cierre
8. Animación de entrada: Elija la animación de entrada de la ventana emergente, como desvanecimiento y zoom, en las selecciones desplegables. Elija cualquier efecto de animación para obtener una vista previa del efecto.
9. Salir de la animación: Elija la animación de salida de la ventana emergente, como fundido y zoom, en las selecciones desplegables. Elija cualquier efecto de animación para obtener una vista previa del efecto.
10. Duración de la animación: Establece la duración de la animación, en milisegundos

Configuración general

1. Título: Ingrese el título de la ventana emergente. Este título solo se mostrará en el backend, no para el usuario.
2. Estado: Borrador, Pendiente de revisión, Privado o Publicado

Configuración de vista previa

1. Vista previa del contenido dinámico como: Elija entre Archivos, Páginas, Publicaciones, Medios o páginas 404.

Nota: Para ver el contenido que ha elegido, debe volver a cargar la página después de seleccionar el contenido dinámico.

Estilo

Surgir

1. Tipo de fondo: Elija un color de fondo, una imagen o un degradado
2. Tipo de borde: Seleccione el tipo de borde, eligiendo entre ninguno, sólido, doble, punteado, discontinuo o ranurado
3. Radio de borde: Establece el radio del borde para controlar la redondez de las esquinas de cada lado de la ventana emergente
4. Sombra de la caja: Ajustar las opciones de sombra del cuadro

Cubrir

1. Tipo de fondo: Elija un color de fondo, una imagen o un degradado

Botón Cerrar

1. Posición: Elija mostrar el botón Cerrar en el interior o el exterior de la ventana emergente
2. Posición vertical: Use el control deslizante para seleccionar la posición vertical del botón Cerrar
3. Posicion horizontal: Use el control deslizante para seleccionar la posición horizontal del botón Cerrar

Normal | Flotar

1. Color: Seleccione el color del botón Cerrar para los estados Normal y Hover
2. Color de fondo: Elija el color de fondo del botón Cerrar para los estados Normal y Hover
3. Talla: Establece el tamaño del botón de cierre

Avanzado

Avanzado

1. Mostrar botón de cierre después de (segundos): Introduzca un número de segundos. El botón de cerrar solo aparecerá después de que haya pasado ese tiempo.
   
2. Cerrar automáticamente después de (ms): Ingrese el número de ms a esperar antes de cerrar automáticamente la ventana emergente. Déjelo en blanco para desactivar el cierre automático.
3. Evitar el cierre en superposición: Seleccione Sí para evitar que los usuarios puedan cerrar la ventana emergente haciendo clic en la superposición.
4. Evitar el cierre con la tecla ESC: Seleccione Sí para evitar que los usuarios puedan cerrar la ventana emergente presionando la tecla ESC.
5. Deshabilitar el desplazamiento de página: Seleccione Sí para evitar que los usuarios se desplacen por la página que se muestra detrás de la ventana emergente
6. Evite múltiples ventanas emergentes: Si el usuario ha visto otra ventana emergente en la página que visita, oculte esta ventana emergente seleccionando Sí
7. Abrir por selector: Ingrese una lista de selectores que activarán manualmente la ventana emergente (ID de CSS, clases o elementos de datos). Vea las instrucciones
8. Margen: Ajustar los márgenes
9. Relleno: Ajusta el relleno alrededor de la ventana emergente
10. Clases CSS: Agregue su clase personalizada sin el punto (por ejemplo, mi clase)

CSS personalizado

CSS personalizado: Ingrese su propio CSS

Establecer condiciones

Condiciones le permite establecer en qué páginas de su sitio web aparecerá la ventana emergente.

Establezca las condiciones que determinan dónde se usa su ventana emergente (excluyendo la activación manual). Por ejemplo, agregue una condición Incluir y elija Singular> Portada para mostrar solo la ventana emergente en la página de inicio del sitio. Obtenga más información sobre las condiciones.

Establecer disparadores

Disparadores son las acciones del usuario que hacen que su campaña aparezca. Seleccione Sí o No para cada opción que hará que aparezca la ventana emergente.

1. Carga en la página: Si se establece en Sí, establezca el número de segundos de espera, al cargar la página, antes de que se active la ventana emergente.
2. En desplazamiento: Si se establece en Sí, seleccione la dirección (Arriba o Abajo) y la cantidad de desplazamiento antes de que se active la ventana emergente. El desplazamiento hacia abajo se basa en porcentaje de la página desplazada hacia abajo; El desplazamiento hacia arriba se basa en número de píxeles desplazado hacia arriba.
3. Al desplazarse al elemento: Si se establece en Sí, ingrese el nombre del selector (ID de CSS) que activará la ventana emergente cuando el usuario se desplace hacia ella. También debe agregar el ID de CSS a la pestaña Avanzado del elemento.
4. Al hacer clic: Si se establece en Sí, ingrese el número de clics que activarán la ventana emergente
5. Después de inactividad: Si se establece en Sí, ingrese la cantidad de segundos de inactividad del usuario que activarán la ventana emergente.
6. Intención de salida en la página: Establezca Sí para activar la ventana emergente cuando la actividad del mouse del usuario indique la intención de salir de la página

Reglas avanzadas

Reglas avanzadas especificar otros requisitos que se deben cumplir para generar una ventana emergente.

1. Mostrar después de X páginas vistas: Si se establece en Sí, establezca el número de visitas a la página antes de que se active la ventana emergente.
2. Mostrar después de X sesiones: Si se establece en Sí, establezca el número de sesiones de usuario antes de que se active la ventana emergente (una sesión comienza cuando el usuario visita el sitio web y finaliza cuando el usuario cierra el navegador).
3. Preséntate hasta X veces: Máximo de veces que se mostrará la ventana emergente. Si Count está configurado en On Open, esto solo permitirá que la ventana emergente se abra tantas veces como el número configurado. Si Count está configurado en On Close, la ventana emergente solo se abrirá hasta que el usuario la haya cerrado por enésima vez, después de lo cual no se volverá a abrir. Esta configuración se establece en el almacenamiento local y permanecerá allí hasta que se elimine.
4. Al llegar de una URL específica: Si se establece en Sí, muestra u oculta la ventana emergente si un usuario llega desde una URL específica (ingresa la URL específica). Regex es una opción para que los usuarios avanzados establezcan reglas avanzadas para patrones de URL coincidentes.
5. Mostrar al llegar de: Si se establece en Sí, muestra si el usuario llega de los motores de búsqueda, un enlace externo (ingrese la URL del enlace específico) y / o un enlace interno (ingrese la URL del enlace específico).
6. Ocultar para usuarios registrados: Configúrelo en Sí para ocultar la ventana emergente para todos los usuarios que iniciaron sesión o para seleccionar roles personalizados. Para sitios web con caché, es posible que esta función no funcione correctamente
7. Mostrar en dispositivos: Seleccione Sí para elegir que se muestre en el escritorio, la tableta y / o dispositivos móviles

Nota: las ventanas emergentes no se pueden mostrar más de una vez si la página no se vuelve a cargar o se vuelve a ingresar.

Ventana emergente de control mediante activación manual

Las ventanas emergentes se pueden activar manualmente. Los enlaces dinámicos pueden usar la acción emergente para abrir o cerrar una ventana emergente. El formulario puede usar la opción Acciones después de enviar para abrir o cerrar una ventana emergente. Cualquier elemento puede usar un selector único (clase, ID o elemento de datos) para activar manualmente una ventana emergente cuando se hace clic en ese elemento.

• De cualquier elemento de enlace, elija Dinámico> Acciones> Ventana emergente. Hacer clic Surgir para seleccionar ya sea Abrir ventana emergente o Cerrar elemento emergente. Si se elige Cerrar ventana emergente, la opción «No volver a aparecer«se convertirá en una opción disponible.
• Desde un formulario de Elementor, elija Acciones después de enviar> Agregar acción> Abrir ventana emergente o Cerrar ventana emergente
• A partir de una Selector personalizado: Cualquier elemento puede tener un conjunto de selectores que se puede utilizar como un disparador emergente manual. Edite el elemento y vaya a Avanzado> Clases CSS (o ID de CSS) y asigne al elemento un nombre de clase (sin el punto anterior) o un nombre de identificación (sin el # anterior). En las ventanas emergentes Condiciones, elija la página que incluye el elemento con el selector único (p. ej. Condiciones> Incluir> Singular> Páginas> Título de su página). Cuando un usuario visita esa página y hace clic en el elemento, se activa la ventana emergente. Esto es útil para abrir una ventana emergente desde el elemento del menú de navegación de un tema, el contenido dentro de un widget del Editor de texto, desde un elemento o script que no es de Elementor, etc.

Al activar una ventana emergente desde un selector personalizado, tenga en cuenta que el elemento no tiene que ser un «enlace». También se puede hacer clic en un elemento en el que normalmente no se puede hacer clic, como el texto sin formato, para generar la ventana emergente. También tenga en cuenta que el Disparadores y Reglas avanzadas estarán ignorado mientras usa esta opción.