Elemento Ventana Emergente

Acerca del Elemento Ventana Emergente

Una ventana emergente es una ventana que aparece mientras los visitantes navegan por un sitio web. Su propósito principal es generar más clientes potenciales y servir eficazmente a objetivos publicitarios.

Desde la aplicación Panel de Control de GemPages, abra una plantilla para editar. Puede encontrar rápidamente el elemento en la barra lateral izquierda del editor, en la sección Impulsor de conversión . Arrastre y suelte el elemento en cualquier posición de su página.

Para usar el elemento Ventana Emergente:

Paso 1: Desde la aplicación Panel de Control de GemPages, localice la página objetivo para abrir el editor.

Paso 2: La Ventana emergente (Popup) se puede encontrar en la barra lateral izquierda en la sección Impulsor de conversión .

Paso 3: Arrastre y suelte el Ventana emergente (Popup) en cualquier posición de su página.

Una vez que la ventana emergente esté minimizada, aparecerá una pequeña etiqueta en el lado derecho del editor. Puede hacer clic en esta etiqueta en cualquier momento para reabrir y editar el contenido de su ventana emergente.

Para editar el contenido de la ventana emergente, simplemente haga clic en la etiqueta de ventana emergente en el lado derecho del editor.

La ventana emergente reaparecerá en el editor, permitiéndole seleccionar y editar sus elementos internos (como texto, imágenes o botones) directamente.

Configurar la pestaña Configuración

Nombre de Ventana Emergente

Nombre: Ingrese su nombre preferido para el elemento de ventana emergente.

Botón de cerrar

• Ícono: Elija el ícono del botón de cerrar (por ejemplo, "X" o "X negrita").
• Tamaño de ícono: Ajuste el tamaño del ícono.
• Color del icono: Elija el color del ícono (por ejemplo, blanco, #FFFFFF).
• Ancho y Alto: Establezca el tamaño del botón.
  
• Fondo: Seleccione el color de fondo para el botón de cerrar.
• Posición: Elija si el botón de cerrar aparece dentro o fuera de la ventana emergente.

Overlay

La superposición oscurece el contenido de la página de fondo cuando aparece la ventana emergente, ayudando a enfocar la atención en la ventana emergente misma. Cuando está habilitada, puede personalizar el color y la transparencia de la superposición.

• Color: Elija un color de la paleta para el color de la superposición.
• Opacidad: Ajuste la opacidad de toda la sección. Un valor numérico más bajo corresponde a un nivel más alto de transparencia.
• Hacer clic para cerrar: Active este interruptor para permitir que los usuarios hagan clic en el fondo de la superposición para cerrar la ventana emergente. 

Tamaño

• Pantalla completa: Elija si la ventana emergente debe ocupar la pantalla completa (Sí/No).
• Ancho: Establezca el ancho de la ventana emergente (por ejemplo, 600px).
• Altura: Ajuste la altura de la ventana emergente (automático o valor específico).
• Relleno: Defina el relleno dentro del elemento de ventana emergente (por ejemplo, 32px por todos lados).

Fondo

• Color: Elija un color de fondo para la ventana emergente (por ejemplo, #FFFFFF).

• Imagen: También puede añadir una imagen de fondo.

Forma

• Borde: Establezca el tipo de borde (por ejemplo, sólido, discontinuo).
• Radio de Esquina: Ajuste la redondez de las esquinas (por ejemplo, 16px para esquinas redondeadas).
• Sombra: Puede habilitar o deshabilitar los efectos de sombra para la ventana emergente.

Posición

Ajuste la posición de la imagen en 9 posiciones diferentes: superior izquierda, superior-centro, superior derecha, medio izquierda, medio-centro, medio derecha, inferior izquierda, inferior-centro e inferior derecha.

Condición de visualización:

Configure cuándo se activará la ventana emergente:

Mostrar cuando: Seleccione una de las 5 opciones del menú desplegable para establecer el momento exacto en que aparecerá la ventana emergente.

• Ninguno: La ventana emergente no se mostrará en la página en vivo.
• Después de que se cargue la páginaLa ventana emergente aparecerá al cargar la página.
• Desplazamiento parcial: La ventana emergente se activará después de que el usuario se desplace a un porcentaje específico de la página.
• A punto de salir: La ventana emergente aparecerá cuando el usuario esté a punto de abandonar la página.

Retraso: Esta opción aparece cuando selecciona Después de que la página se haya cargado.

Utilice esta opción para configurar cuántos segundos debe esperar el sistema antes de mostrar la ventana emergente después de que se cargue la página.

• Introduzca el tiempo de retardo en segundos.
• Tiempo máximo de retardo: 100 segundos

Desplazarse: Esta opción aparece al seleccionar Desplazamiento parcial.

Utilice esta opción para configurar cuánto de la página debe desplazarse el usuario antes de que aparezca la ventana emergente.

• Introduzca el porcentaje de desplazamiento (por ejemplo: 50% significa que la ventana emergente aparecerá después de que el usuario se desplace hasta la mitad de la página).

En movil: Esta opción aparece al seleccionar "Acerca de" para salir.

Elige cómo se comporta la ventana emergente en dispositivos móviles.

Frecuencia: Esta configuración controla la frecuencia con la que se muestra la ventana emergente.

Opciones disponibles:

• Una vez por usuario: La ventana emergente aparecerá solo una vez por cada usuario.
• En cada visita: La ventana emergente aparecerá cada vez que el usuario visite la página.
• Después de un tiempo: La ventana emergente volverá a aparecer después de un número determinado de días.

Si selecciona "Después de un tiempo", aparecerá una configuración adicional que le permitirá ingresar la cantidad de días antes de que la ventana emergente se muestre nuevamente al mismo usuario.

Efecto

Este elemento tiene 7 efectos de entrada que puede elegir:

• Desvanecer
• Zoom
• Alejar zoom
• Movimiento Horizontal
• Movimiento Vertical
• Despliegue 3D
• Ninguno: Sin efecto de entrada.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.

También puede encontrar más consejos útiles y tutoriales en video en GemPages Academy.

Mejor Práctica: Activar una Ventana Emergente con un Enlace

GemPages le permite activar ventanas emergentes mediante texto con hipervínculo. Esto significa que puede obtener el ID de la ventana emergente y vincular su texto elegido con él.

• Seleccione la ventana emergente que desea abrir al ser activada y haga clic derecho.
• Seleccione la Forma para Copiar clase para copiar el ID de la ventana emergente.
• Cierre la ventana emergente y resalte el texto que desea convertir en un enlace.
• Haga clic en el botón de hipervínculo y pegue el enlace copiado.
• Elimine el punto del inicio del ID y reemplácelo con un #, luego elija Enlazar a esta URL.

Cómo agregar un formulario en una ventana emergente

Para insertar un formulario en una ventana emergente, simplemente agregue un Formulario de Contacto elemento dentro del elemento Popup.

Paso 1: Abra la ventana emergente haciendo clic en la etiqueta de la ventana emergente que se encuentra en el lado derecho del editor.

Paso 2: A continuación, desde la barra lateral izquierda, arrastre y suelte el Formulario de Contacto elemento en el área emergente.

Una vez añadido, podrá personalizar los campos del formulario y la configuración según sea necesario.

Finalmente, haga clic en Guardar y Publicar para aplicar los cambios.

Preguntas Frecuentes sobre el Elemento Ventana Emergente

1. ¿Por qué el elemento Ventana Emergente no funciona en las Secciones de Tema?

Actualmente, el elemento Ventana Emergente no es compatible con las secciones de tema. Esto significa que cuando crea una sección de tema que incluye una ventana emergente, no se mostrará ni funcionará correctamente en las páginas en vivo.

En este caso, necesitará añadir el elemento Ventana Emergente directamente en cada página .

2. ¿Cómo puedo editar el contenido de la ventana emergente después de minimizarla?

Una vez minimizada, aparecerá una etiqueta de ventana emergente en el lado derecho del editor. Simplemente haga clic en esa etiqueta, y la ventana emergente reaparecerá para que pueda editar su contenido.

3. ¿Cuándo aparecerá mi ventana emergente en la página en vivo?

El momento de visualización de la ventana emergente depende de su condición seleccionada de Mostrar cuando en Condición de visualización::

• Después de que se cargue la página
• Desplazamiento parcial
• A punto de salir
• Ninguno (la ventana emergente no aparecerá)

4. ¿Cómo puedo abrir una ventana emergente con un enlace o botón?

Puede activar una ventana emergente a través de texto con hipervínculo o botones copiando el ID de la ventana emergente (mediante "Copiar clase") y vinculándolo con un prefijo "#" en la URL.

5. ¿Qué efectos puedo aplicar a mi ventana emergente?

El elemento Ventana Emergente incluye siete efectos de entrada: Desvanecer, Zoom, Alejar Zoom, Movimiento Horizontal, Movimiento Vertical, Despliegue 3D y Ninguno.

6. Añadí una ventana emergente en el editor pero ya no puedo encontrarla. ¿Dónde está?

Cuando la ventana emergente está minimizada, no permanecerá visible en el lienzo. En su lugar, verá una pequeña etiqueta de ventana emergente en el lado derecho del editor. Haga clic en esa etiqueta para reabrir la ventana emergente y poder continuar editándola.

7. ¿Dónde puedo encontrar el ID de la ventana emergente?

Seleccione la ventana emergente en el Editor, haga clic derecho sobre ella y elija Copiar > Copiar clase. El valor copiado es el ID de la ventana emergente, que puede usar para activar la ventana emergente mediante un enlace.

8. ¿Puedo guardar un elemento emergente para uso global en varias páginas?

Actualmente, GemPages solo admite la reutilización global a través de las Secciones de Tema Función que se aplica solo a secciones, no a elementos individuales. Si desea usar la misma ventana emergente en varias páginas, puede copiar y pegar el elemento emergente.

Para obtener instrucciones detalladas, consulte la guía en copiar y pegar elementos.

9. ¿Cómo elimino una ventana emergente?

Verás una pequeña ventana emergente en el lado derecho del editor. Haz clic en ella para volver a abrir la ventana emergente y, a continuación, haz clic en el icono de la papelera para eliminarla.