Configuración de pop-ups web

Usa el panel de Configuración de pop-up para estilizar y posicionar un diseño de contenido de pop-up web. Las pestañas de página y + Añadir página se encuentran en la parte superior del panel. Consulta Trabajar con múltiples páginas.

Configuración general abarca la apariencia y la ubicación de todo el pop-up. Página actual abarca los medios y el tamaño de la página que estás editando.

Nota

Esta configuración controla solo el diseño del pop-up. La audiencia, la segmentación de páginas, el retraso, la frecuencia y la configuración de lanzamiento se configuran en la campaña de pop-ups web.

Imágenes y video

Si el diseño incluye uno o más bloques de medios, abre Página actual. Cada bloque de medios tiene una vista previa y controles.

1. Haz clic en Cambiar imagen para elegir un archivo del Almacén de medios de tu proyecto, o pega o edita la URL de la imagen directamente.
2. Establece cómo la imagen llena su marco con Ajuste (Natural, Cubrir o Contener). Ajuste no se muestra para una imagen de fondo, que siempre cubre su área.
3. Opcionalmente, suaviza la imagen con Desenfoque (de 0 a 20 px).
4. Solo para medios de fondo, usa Atenuación (de 0 a 100 %) para añadir una capa oscura y que el texto sobre la imagen permanezca legible.

Imagen del tema oscuro

Con el tema oscuro activado, cada bloque de imagen añade una fila de Imagen del tema oscuro.

1. Haz clic en Cambiar imagen o establece la URL de la imagen (tema oscuro) para elegir una imagen diferente para el modo oscuro (por ejemplo, un logotipo con tinta oscura).
2. Déjalo vacío para seguir mostrando la URL de la imagen clara en ambos esquemas.

La imagen del tema oscuro se aplica en todos los lugares donde se muestra la imagen de ese bloque, incluyendo una imagen de fondo o un póster de video.

Video

1. Establece Medio en Video.
2. Introduce una URL de video: un enlace directo al archivo de video. El video solo acepta una URL externa. No puedes subir un video al Almacén de medios. Expórtalo como MP4 (video H.264, audio AAC) con “inicio rápido” activado (a veces llamado “optimizado para web”), para que el navegador pueda empezar a reproducir antes de que se descargue todo el archivo. Si la URL no se carga, los visitantes solo verán el póster.
3. Bucle está activado por defecto, por lo que el video se reproduce continuamente. Desactívalo para que se detenga después de una reproducción.
4. Activa Mostrar controles para mostrar los controles integrados del navegador de reproducción, pausa y volumen. Los videos siempre comienzan silenciados. Sin esta opción, los visitantes no tienen forma de activar el sonido.
5. Opcionalmente, establece una URL de póster: la imagen que se muestra mientras se carga el video. Recomendado. En un script de pop-up más antiguo que no soporta video, el póster es lo único que se muestra. Si lo dejas vacío, ese visitante no verá nada donde estaría el video.

Diseño de medios

Algunos diseños también añaden una sección de Variables de plantilla con configuraciones de ubicación para el bloque de medios. Establece el Ancho de la imagen (parte del ancho del pop-up, como porcentaje) y la Posición de la imagen (Izquierda o Derecha) cuando el diseño tiene medios junto al texto.

La sección de Variables de plantilla solo aparece cuando el diseño actual tiene configuraciones como estas. En un diseño de barra inferior, ofrece Ancho de los botones en lugar de controles de imagen.

Tamaño y estilo del pop-up

1. En Página actual → TAMAÑO, deja Ancho y Alto vacíos para un pop-up que se ajusta a su contenido, o establece un tamaño fijo en píxeles. En un pop-up con múltiples páginas, cada página tiene su propio tamaño.
2. Activa Altura completa cuando la página deba llenar la altura disponible.
3. En Configuración general, establece el Radio de esquina y la Sombra para el redondeo de las esquinas y la sombra del pop-up.
4. Elige la Animación: cómo aparece el pop-up (Predeterminada, Ninguna, Desvanecer o Deslizar).

Con el tema oscuro activado, la Sombra sigue el interruptor de esquema sol/luna. Coloca el interruptor en Oscuro para editar la sombra de la paleta oscura por separado de la clara. Una sombra ajustada para una página clara a menudo es invisible en una oscura, por lo que las dos suelen necesitar valores diferentes. Deja la sombra oscura sin tocar para seguir usando el valor de Sombra clara en ambos esquemas.

Colores

1. Haz clic en Colores para expandir la paleta de colores del pop-up.
2. Establece el Fondo y el Acento (botones) para el fondo del pop-up y el color de acento aplicado a los botones.
3. Establece el Texto y el Texto secundario para el texto del cuerpo y para el texto secundario como leyendas y subtítulos.
4. Si el diseño tiene texto sobre una imagen de fondo, establece el Texto sobre imagen para ese texto.

Modo oscuro

1. En Colores, activa Habilitar tema oscuro para darle al pop-up una segunda paleta para los visitantes cuyo dispositivo está configurado en un esquema de color oscuro. Si está desactivado, el pop-up siempre se renderiza con la paleta clara anterior, para cada visitante.
2. Usa el interruptor sol/luna sobre los campos de color para elegir qué paleta estás editando. El lienzo se redibuja en ese esquema.
3. Haz clic en Automático desde claro para (re)generar la paleta oscura a partir de los colores claros actuales. Los fondos y las superficies se oscurecen, y el texto se aclara. El Acento y el Texto sobre imagen se mantienen sin cambios. Edita cualquiera de los cinco campos después para hacer ajustes finos.

Desactivar Habilitar tema oscuro de nuevo mantiene la paleta oscura. Volver a activarlo restaura tus ediciones en lugar de regenerar desde cero.

El mismo interruptor sol/luna aparece junto a Cerrar vista previa (Esc) cuando abres la Vista previa en un pop-up con el tema oscuro activado. También puedes comprobar ambas paletas en la vista previa a tamaño completo.

El navegador de un visitante decide qué paleta ve, basándose en la configuración del modo oscuro a nivel de SO. No hay un interruptor de oscuro/claro en el propio pop-up. Un sitio puede forzar un esquema para todos, independientemente de la configuración del SO. Consulta webPopups.colorScheme en la documentación del SDK web.

El tema oscuro también afecta a las imágenes, la sombra y la superposición en este panel. Cada uno sigue el mismo interruptor de esquema sol/luna una vez activado.

Ubicación y superposición

1. En UBICACIÓN, elige dónde se ancla el pop-up en la página usando la cuadrícula de 3×3 de Posición.
2. Establece el Desplazamiento del borde a la distancia en píxeles desde el borde seleccionado.
3. En SUPERPOSICIÓN, activa Atenuar la página detrás para oscurecer el resto de la página mientras se muestra el pop-up, en ambos esquemas. Desactivarlo elimina la atenuación por completo, incluyendo cualquier valor de esquema oscuro establecido a continuación.
4. Establece el Color y la Opacidad para la superposición (opacidad de 0 a 1).

Con el tema oscuro activado, el Color y la Opacidad también siguen el interruptor de esquema sol/luna. Coloca el interruptor en Oscuro para darle a la atenuación su propio color e intensidad para la paleta oscura. Hasta que los edites ahí, el esquema oscuro muestra el mismo Color y Opacidad que el esquema claro.

Oscuro

Claro