Guia: Como personalizar o tema da sua plataforma (OTT)

 

A seção Personalize permite que você adapte o design da sua plataforma para refletir a identidade visual da sua marca. Esta função está disponível para a versão Web V2 da sua OTT.

 

Onde encontrar?

1. Realize o login no gerenciador da plataforma.

2. No menu lateral esquerdo, selecione a opção Personalize.

3. Clique na aba OTT.
   
   

1. Configurações gerais

Na aba Geral, você define os formatos estruturais da sua plataforma, desde a exibição dos vídeos até o estilo dos botões e sinalizações de acesso

.

Exibição da thumbnail

Define a orientação das capas dos seus conteúdos. Você deve escolher a que melhor se adapta ao seu catálogo:

• Horizontal: Formato padrão de cinema/TV (ideal para vídeos tradicionais).

• Vertical: Formato que remete a cartazes ou capas de livros.

 

Cantos das thumbnails

Escolha o acabamento das bordas das suas miniaturas:

• Quadrado: Cantos retos, proporcionando um visual mais técnico e geométrico.

• Levemente Arredondado: Bordas suaves que conferem um aspecto moderno e orgânico à listagem.
  
  

 

Cantos dos botões

Define o estilo de todos os botões de ação da plataforma (CTAs). Escolha a opção que melhor combina com a sua marca:

• Quadrado: Botões com ângulos retos.

• Levemente Arredondado: Botões com cantos suavizados.

• Arredondado: Botões em formato "pílula", totalmente circulares nas extremidades.

Dica: O painel exibe uma prévia em tempo real (como visto na imagem acima) para que você veja a diferença entre o botão preenchido e o botão vazado antes de aplicar.

 

 

Conteúdos e Cursos bloqueados

Nesta seção, você controla a visibilidade das restrições de acesso para usuários que ainda não possuem permissão.

• Exibir ícone de cadeado (Conteúdos): Ao ativar esta chave, um ícone de cadeado aparecerá sobre as thumbnails de conteúdos bloqueados.

• Exibir ícone de cadeado (Cursos): Ao ativar esta chave, a mesma sinalização de cadeado será aplicada especificamente aos cursos que o usuário ainda não adquiriu ou não tem permissão para visualizar.

Impacto estratégico: Manter os cadeados visíveis é uma excelente forma de despertar curiosidade e incentivar novos cadastros ou assinaturas em sua plataforma.

 

 

2. Configurações do Tema

Na aba Tema, você define a paleta de cores e a aparência predominante da interface, garantindo que o design seja coerente com a sua marca e confortável para o usuário.



Aparência

Escolha como o sistema deve apresentar o contraste de cores:

• Escuro: Aplica um fundo escuro em toda a interface, ideal para ambientes de baixa luminosidade e um visual moderno.

• Claro: Utiliza um fundo branco ou cinza claro, conferindo um visual mais limpo e clássico.

• Ambos: Esta opção permite que o próprio usuário final escolha entre o modo claro ou escuro através de um botão no menu da plataforma.

  
  
  

Cores principais da OTT

Aqui você define as cores base que serão replicadas em diversos elementos do projeto:

• Cor primária: É a cor destaque. Ela será aplicada em links e servirá como base automática para os botões.

• Cor secundária: Funciona como uma cor de apoio, geralmente utilizada para detalhes e efeitos visuais complementares.
  
  

Configurações dos botões

Esta seção permite o ajuste fino das cores de interação. O painel exibe uma prévia para os estados Normal e Em Hover (quando o mouse passa por cima).

Cores do botão preenchido

• Cor de texto: Define a cor da fonte dentro do botão.

• Cor de fundo: Define a cor principal de preenchimento.

• Hover do fundo: Indica a cor que o botão assume durante a interação do usuário.

Cores do botão vazado

• Cor de texto: Cor da fonte no estado inicial.

• Cor de contorno: Cor da borda que desenha o botão.

• Cor do texto - hover: Cor da fonte quando o mouse está sobre o botão.

• Cor do fundo - hover: Cor que preencherá o interior do botão durante o hover.
  
  
  

Configuração da listagem de conteúdo

Define como os textos informativos serão exibidos logo abaixo das suas thumbnails de vídeos e cursos.

Cor do título da listagem

• Cor de texto: Define a tonalidade dos títulos dos conteúdos.

  • Dica: Certifique-se de escolher uma cor que tenha bom contraste tanto no modo claro quanto no modo escuro, garantindo a legibilidade para todos os usuários.
    
    

Dica Final: Assim como na aba anterior, após realizar todos os ajustes de cores e temas, lembre-se de clicar em Salvar para que as novas definições sejam aplicadas à sua plataforma.

3. Configurações de Imagens

Na aba Imagens, você deve realizar o upload dos arquivos que compõem a identidade visual da sua OTT. Para garantir a melhor exibição, respeite sempre as dimensões e formatos sugeridos abaixo:

Favicon

É o pequeno ícone que aparece na aba do navegador ao acessar sua plataforma.

• Especificações: 512 x 512 pixels.

• Formato: PNG transparente.

• Peso máximo: 30KB.
  
  

Open Graph Image

Esta é a imagem que será exibida automaticamente quando o link da sua plataforma for compartilhado em redes sociais ou aplicativos de mensagem (como WhatsApp e LinkedIn).

• Especificações: 1200 x 630 pixels.

• Formato: PNG transparente.

• Peso máximo: 200KB.
  
  
  

Logo para tema claro

O logotipo que será exibido quando o usuário estiver utilizando a interface no Modo Claro. Recomenda-se o uso de cores que contrastem com fundos brancos/claros.

• Especificações: 160 x 50 pixels.

• Formato: PNG transparente.

• Peso máximo: 150KB.
  
  
  

Logo para tema escuro

O logotipo que será exibido quando o usuário estiver utilizando a interface no Modo Escuro. Recomenda-se o uso de cores claras ou brancas para melhor leitura sobre o fundo escuro.

• Especificações: 160 x 50 pixels.

• Formato: PNG transparente.

• Peso máximo: 150KB.
  
  

Dica Netshow.me

O uso de PNG transparente em todos os campos é fundamental. Isso evita que sua logo ou ícone fiquem com um "quadrado branco" ao redor, permitindo que a imagem se integre perfeitamente às cores de fundo que você definiu na aba anterior.

 

4. Configurações das Fontes

Nesta seção, você pode configurar as fontes que serão aplicadas nos Títulos (destaques e cabeçalhos) e nos Textos (descrições e corpo de texto).

1. Escolha da Fonte

Para ambos os campos (Títulos e Textos), você tem duas opções de integração:

• Google Fonts: Basta copiar e colar o <link> da fonte escolhida diretamente do site do Google Fonts e inserir o nome exato da família da fonte no campo indicado.

• Envie sua própria fonte: Se você possui uma fonte exclusiva, pode subir um arquivo .ZIP.

  • Formato aceito: WOFF ou WOFF2.

  • Peso máximo: 1MB.

Dica: Você pode ativar a chave "Utilizar mesma fonte no texto" para replicar automaticamente a configuração dos títulos para o restante da plataforma, mantendo a unidade visual de forma rápida.

 

Configuração dos estilos da fonte

Após escolher a fonte, você pode ajustar o comportamento visual dela:

• Weight (Peso): Define a espessura da letra.

  • Bold 600: Negrito.

  • Medium 500: Espessura média.

  • Light 300: Letras mais finas e leves.

• Line-height (Altura da linha): Ajusta o espaçamento vertical entre as linhas (100%, 110% ou 120%). Isso ajuda muito na legibilidade de textos longos.

• Transform (Transformação): Define como o texto será exibido automaticamente.
  
  

  MAIÚSCULO: Todo o texto em letras grandes.

  Normal: Mantém como foi digitado.

   minúscula: Todo o texto em letras pequenas.

   

Dica Netshow.me

Para uma melhor experiência de leitura (UX), recomendamos usar pesos maiores (Bold 600) para os Títulos, facilitando a navegação do usuário, e pesos médios ou leves (Medium 500 ou Light 300) para os Textos, evitando que a leitura fique cansativa.5.

 

5.Configurações do Menu e Rodapé

Nesta seção, você define como os usuários irão navegar pela sua OTT, tanto no cabeçalho (topo) quanto no rodapé da página.

Configurações do menu principal

Aqui você controla o comportamento e a visibilidade dos itens no topo da plataforma:

• Mudar menu para barra lateral: Transforma o menu horizontal em um "menu hambúrguer" lateral (vertical). Útil se você tiver muitos itens.

• Fixar menu no topo: Mantém o menu visível mesmo quando o usuário rola a página para baixo.

• Exibir Menu "Lives": Habilita o acesso direto às transmissões ao vivo.

• Exibir Menu "Minha Lista": Permite que o usuário acesse rapidamente os conteúdos que ele salvou.

• Exibir Menu "Comunidade": Habilita o atalho para a área de interação entre membros.
  
  
  

Selecionar páginas ou filtros para o menu

Você pode personalizar quais páginas aparecem no Header (topo) ou no Footer (rodapé):

• Páginas HTML: Selecione páginas personalizadas criadas no Admin para aparecerem no topo ou no rodapé.

• Filtros Assuntos: Você pode escolher filtros específicos de categorias para aparecerem como atalhos diretos no menu principal.
  
  

Configurações do Rodapé (Redes Sociais)

Conecte sua área de membros aos seus canais oficiais. Basta colar a URL completa do seu perfil nos campos correspondentes:

• Facebook

• Instagram

• LinkedIn

• YouTube

• Twitter

• Site Institucional: Link para o seu site principal ou página de vendas.

Dica: Os campos que ficarem em branco não aparecerão no rodapé da plataforma, mantendo o visual limpo.

Para dúvidas adicionais ou apoio, entre em contato com o Suporte pelo WhatsApp:

📱 +55 11 4858-9359
 ou  Clique aqui