Zonas de Pantalla

Las zonas de pantalla te permiten dividir tu pantalla en múltiples áreas, cada una mostrando contenido diferente. Esto es perfecto para layouts complejos como menús con items destacados, o pantallas de lobby con noticias y clima.

¿Qué son las Zonas?

Las zonas son áreas rectangulares en tu pantalla que pueden mostrar contenido independiente. Piensa en ellas como "pantallas dentro de una pantalla."

Zona 0 (Zona Principal) - Muestra tu lista o secuencia asignada
Otras Zonas - Muestran medios estáticos (imágenes o videos)

Usa la Zona 0 para tu contenido rotativo principal (listas/secuencias) y otras zonas para contenido estático de apoyo como menús, logos o branding.

Plantillas de Zona Disponibles

Screenzzie ofrece cuatro layouts de zona predefinidos:

Plantilla	Descripción	Zonas
Completo	Una sola zona a pantalla completa	1
División 50/50	Dos columnas verticales iguales	2
Principal+Lateral	Área principal grande con barra lateral	2
Cuadrantes	Cuatro cuadrantes iguales	4

Pantalla Completa

El layout por defecto - una zona cubriendo toda la pantalla.

100%

División 50/50

Dos columnas iguales, perfecto para comparar contenido o mostrar dos feeds.

50%

Principal + Barra Lateral

Una zona principal 2/3 con barra lateral 1/3. Ideal para contenido principal con información complementaria.

66%

Cuadrantes

Cuatro zonas iguales (25% cada una). Ideal para mostrar múltiples tipos de contenido simultáneamente.

25%

Configurar Zonas

Las plantillas de zona se seleccionan en la pestaña Diseño de la configuración de pantalla:

Paso 1: Abrir Configuración de Pantalla

Navega a Pantallas
Haz clic en la pantalla que quieres configurar
Esto abre el editor de configuración en /screens/[id]/configuraciones

Paso 2: Seleccionar Plantilla de Zona

Ve a la pestaña Diseño en la barra lateral
Encuentra la sección "Plantilla de Zona"
Haz clic en una de las cuatro opciones de plantilla
La vista previa del canvas se actualiza inmediatamente

Paso 3: Asignar Contenido a las Zonas

Para Zona 0 (Zona Principal):

Ve a la pestaña Contenido
Selecciona una lista o secuencia
Este contenido se reproduce en la Zona 0

Para Otras Zonas (1, 2, 3):

Haz clic en una zona en la vista previa del canvas
Se abre un modal para seleccionar contenido
Elige una imagen o video de tu biblioteca de medios
Haz clic en Guardar
Los cambios se aplican inmediatamente

Solo la Zona 0 soporta listas y secuencias. Las otras zonas muestran medios estáticos (imágenes o videos) que seleccionas de tu biblioteca de medios.

Detalles de Plantillas de Zona

Completo (Complete)

+---------------------------+
|                           |
|         Zona 0            |
|    (Pantalla Completa)    |
|                           |
+---------------------------+

Una sola zona cubriendo toda la pantalla
Mejor para visualización simple de contenido
Plantilla por defecto para nuevas pantallas

División 50/50

+-------------+-------------+
|             |             |
|   Zona 0    |   Zona 1    |
|             |             |
+-------------+-------------+

Dos columnas iguales
Zona 0 (izquierda): Lista/secuencia
Zona 1 (derecha): Medio estático
Ideal para contenido + información lateral

Principal+Lateral

+------------------+--------+
|                  |        |
|     Zona 0       | Zona 1 |
|     (Grande)     |(Pequeña)|
|                  |        |
+------------------+--------+

La zona principal ocupa 2/3 de la pantalla
La barra lateral ocupa 1/3
Perfecto para contenido destacado con info de apoyo

Cuadrantes

+-------------+-------------+
|   Zona 0    |   Zona 1    |
+-------------+-------------+
|   Zona 2    |   Zona 3    |
+-------------+-------------+

Cuatro cuadrantes iguales
Zona 0: Lista/secuencia
Zonas 1-3: Medios estáticos
Ideal para pantallas multi-contenido como menús

Propiedades de Zona

Propiedad	Descripción
Posición	Determinada por la plantilla (fija)
Tamaño	Basado en porcentaje según la plantilla
Contenido	Zona 0: Lista/secuencia; Otras: Medio estático
Z-Index	Los overlays se renderizan sobre todo el contenido de zonas

Zona 0 (Zona Principal)

La primera zona (Zona 0) es especial:

Muestra tu lista o secuencia asignada
Respeta los horarios automáticamente
El contenido se asigna en la pestaña Contenido
Las otras zonas solo muestran medios estáticos

Mejores Prácticas

Consideraciones de Resolución

Las zonas más grandes pueden mostrar contenido detallado
Las zonas más pequeñas funcionan mejor para medios simples
Considera la legibilidad del texto según el tamaño de la zona
Prueba en la resolución real de la pantalla

Combinación de Contenido

Combina el contenido con el propósito de la zona:

Tipo de Zona	Mejor Contenido
Zona principal (grande)	Videos, listas, contenido destacado
Barra lateral	Imágenes estáticas, menús, branding
Zonas pequeñas	Logos, gráficos simples

Rendimiento

Cada zona puede reproducir video independientemente
Para mejor rendimiento, limita el video a 1-2 zonas
Usa imágenes estáticas para zonas más pequeñas
Layouts complejos pueden requerir más recursos del dispositivo

Agregar Overlays

Los overlays (reloj, clima, imagen, anuncios) aparecen sobre las zonas:

Ve a la pestaña Diseño
Arrastra un overlay desde la barra lateral
Suéltalo en cualquier lugar del canvas
Posiciona y redimensiona según sea necesario
Los overlays se renderizan sobre todo el contenido de las zonas

Solución de Problemas

Contenido de Zona No Se Muestra

Verifica que hay contenido asignado a la zona
Comprueba que el archivo de medios sea soportado
Asegúrate de que la pantalla esté en línea
Intenta refrescar la página

Problemas de Rendimiento

Reduce el número de zonas con video
Usa videos de menor resolución
Usa imágenes estáticas en zonas pequeñas
Considera un layout de zonas más simple

Zonas No Se Actualizan

Verifica tu conexión a internet
Asegúrate de que los cambios se guardaron
Refresca la pantalla desde el panel
Verifica que el dispositivo físico esté conectado

Siguientes Pasos

Agrega Overlays sobre las zonas
Crea Listas de Reproducción para la Zona 0
Aprende sobre Secuencias para rotación de contenido basada en tiempo