Zonas de Tela
Divida sua tela em múltiplas zonas para exibir diferentes conteúdos simultaneamente
Zonas de Tela
As zonas de tela permitem dividir seu display em múltiplas áreas, cada uma mostrando conteúdo diferente. Isso é perfeito para layouts complexos como quadros de menu com itens em destaque, ou displays de lobby com notícias e clima.
O que são Zonas?
Zonas são áreas retangulares na sua tela que podem exibir conteúdo independente. Pense nelas como "telas dentro de uma tela."
- Zona 0 (Zona Principal) - Exibe sua playlist ou sequência atribuída
- Outras Zonas - Exibem mídia estática (imagens ou vídeos)
Use a Zona 0 para seu conteúdo principal rotativo (playlists/sequências) e outras zonas para conteúdo de suporte estático como menus, logos ou branding.
Templates de Zona Disponíveis
O Screenzzie oferece quatro layouts de zona predefinidos:
| Template | Descrição | Zonas |
|---|---|---|
| Completo | Zona única em tela cheia | 1 |
| Divisão 50/50 | Duas colunas verticais iguais | 2 |
| Principal+Lateral | Área principal grande com barra lateral | 2 |
| Quadrantes | Quatro quadrantes iguais | 4 |
Tela Cheia
O layout padrão - uma zona cobrindo toda a tela.
Divisão 50/50
Duas colunas iguais, perfeito para comparar conteúdo ou mostrar dois feeds.
Principal + Barra Lateral
Uma zona principal 2/3 com barra lateral 1/3. Ideal para conteúdo principal com informações complementares.
Quadrantes
Quatro zonas iguais (25% cada). Ótimo para exibir vários tipos de conteúdo simultaneamente.
Configurando Zonas
Os templates de zona são selecionados na aba Design da configuração da tela:
Passo 1: Abra a Configuração da Tela
- Navegue para Telas
- Clique na tela que você deseja configurar
- Isso abre o editor de configuração em
/screens/[id]/configuraciones
Passo 2: Selecione o Template de Zona
- Vá para a aba Design na barra lateral
- Encontre a seção "Template de Zona"
- Clique em uma das quatro opções de template
- A visualização do canvas atualiza imediatamente
Passo 3: Atribua Conteúdo às Zonas
Para Zona 0 (Zona Principal):
- Vá para a aba Conteúdo
- Selecione uma playlist ou sequência
- Este conteúdo será reproduzido na Zona 0
Para Outras Zonas (1, 2, 3):
- Clique em uma zona na visualização do canvas
- Um modal abre para selecionar conteúdo
- Escolha uma imagem ou vídeo da sua biblioteca de mídia
- Clique em Salvar
- As alterações são aplicadas imediatamente
Apenas a Zona 0 suporta playlists e sequências. Outras zonas exibem mídia estática (imagens ou vídeos) que você seleciona da sua biblioteca de mídia.
Detalhes dos Templates de Zona
Completo
+---------------------------+
| |
| Zona 0 |
| (Tela Cheia) |
| |
+---------------------------+
- Zona única cobrindo toda a tela
- Melhor para exibição de conteúdo simples
- Template padrão para novas telas
Divisão 50/50
+-------------+-------------+
| | |
| Zona 0 | Zona 1 |
| | |
+-------------+-------------+
- Duas colunas iguais
- Zona 0 (esquerda): Playlist/sequência
- Zona 1 (direita): Mídia estática
- Ótimo para conteúdo + informações laterais
Principal+Lateral
+------------------+--------+
| | |
| Zona 0 | Zona 1 |
| (Grande) |(Pequen)|
| | |
+------------------+--------+
- Zona principal ocupa 2/3 da tela
- Barra lateral ocupa 1/3
- Perfeito para conteúdo em destaque com informações de suporte
Quadrantes
+-------------+-------------+
| Zona 0 | Zona 1 |
+-------------+-------------+
| Zona 2 | Zona 3 |
+-------------+-------------+
- Quatro quadrantes iguais
- Zona 0: Playlist/sequência
- Zonas 1-3: Mídia estática
- Ideal para displays multi-conteúdo como quadros de menu
Propriedades das Zonas
| Propriedade | Descrição |
|---|---|
| Posição | Determinada pelo template (fixo) |
| Tamanho | Baseado em porcentagem conforme template |
| Conteúdo | Zona 0: Playlist/sequência; Outras: Mídia estática |
| Z-Index | Overlays renderizam acima de todo conteúdo das zonas |
Zona 0 (Zona Principal)
A primeira zona (Zona 0) é especial:
- Exibe sua playlist ou sequência atribuída
- Respeita agendamentos automaticamente
- Conteúdo é atribuído na aba Conteúdo
- Outras zonas mostram apenas mídia estática
Melhores Práticas
Considerações de Resolução
- Zonas maiores podem mostrar conteúdo detalhado
- Zonas menores funcionam melhor para mídia simples
- Considere a legibilidade do texto no tamanho da zona
- Teste na resolução real da tela
Combinação de Conteúdo
Combine o conteúdo com a finalidade da zona:
| Tipo de Zona | Melhor Conteúdo |
|---|---|
| Zona principal (grande) | Vídeos, playlists, conteúdo em destaque |
| Barra lateral | Imagens estáticas, menus, branding |
| Zonas pequenas | Logos, gráficos simples |
Desempenho
- Cada zona pode reproduzir vídeo independentemente
- Para melhor desempenho, limite vídeos a 1-2 zonas
- Use imagens estáticas para zonas menores
- Layouts complexos podem exigir mais recursos do dispositivo
Adicionando Overlays
Overlays (relógio, clima, imagem, anúncios) aparecem por cima das zonas:
- Vá para a aba Design
- Arraste um overlay da barra lateral
- Solte-o em qualquer lugar do canvas
- Posicione e redimensione conforme necessário
- Overlays renderizam acima de todo conteúdo das zonas
Solução de Problemas
Conteúdo da Zona Não Aparece
- Verifique se o conteúdo está atribuído à zona
- Confira se o arquivo de mídia é suportado
- Certifique-se de que a tela está online
- Tente atualizar a página
Problemas de Desempenho
- Reduza o número de zonas com vídeo
- Use vídeos de menor resolução
- Use imagens estáticas em zonas menores
- Considere um layout de zona mais simples
Zonas Não Atualizam
- Verifique sua conexão com a internet
- Certifique-se de que as alterações foram salvas
- Atualize a tela pelo dashboard
- Verifique se o dispositivo físico está conectado
Próximos Passos
- Adicione Overlays por cima das zonas
- Crie Playlists para a Zona 0
- Aprenda sobre Sequências para rotação de conteúdo baseada em tempo