---
title: "Guia: Como personalizar o tema da sua plataforma (OTT)"
description: Personalize o design para refletir sua identidade de marca
---
[Pular para o conteúdo](https://ajuda.netshow.me/knowledge/configuração-temas-ott#main-content)
Português - Brasil
Mostrar submenu para traduções
[Abertura de Tickets](https://ajuda.netshow.me/knowledge/kb-tickets/new?hsLang=pt-br)
![NSM-white-1.png\]](https://ajuda.netshow.me/hs-fs/hubfs/NSM-white-1.png?width=40&height=40&name=NSM-white-1.png)
Abrir navegação principal
Fechar navegação principal
- Português - Brasil
Mostrar submenu para traduções
- [Abertura de Tickets](https://ajuda.netshow.me/knowledge/kb-tickets/new)
- [Acesse nosso site](https://netshow.me/)
[Acesse nosso site](https://netshow.me/)
Como podemos ajudar você hoje ?
- Não há sugestões porque o campo de pesquisa está em branco.
1. [Ajuda Netshow.me](https://ajuda.netshow.me/knowledge?hsLang=pt-br)
2. [Netshow.me OTT / Member Hub](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br)
3. [8. Personalize](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#8-personalize)
# 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.
[1. Configurações Gerais](https://ajuda.netshow.me/knowledge/configuração-temas-ott#A1)
[2. Configurações dos Temas](https://ajuda.netshow.me/knowledge/configuração-temas-ott#A2)
[3. Configurações de Imagens](https://ajuda.netshow.me/knowledge/configuração-temas-ott#a3)
[4. Configurações das Fontes](https://ajuda.netshow.me/knowledge/configuração-temas-ott#a4)
[5. Configurações do meu e rodapé](https://ajuda.netshow.me/knowledge/configuração-temas-ott#a5)
### 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 `` 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](https://api.whatsapp.com/send/?phone=551148589359&text&type=phone_number&app_absent=0)
- [Netshow.me OTT / Member Hub](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#main-content)
- [1. Dashboard](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#1-dashboard)
- [2. Conteúdo](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#2-conte%C3%BAdo)
- [3. Usuários](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#3-usu%C3%A1rios)
- [4. Relatórios](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#4-relat%C3%B3rios)
- [5. Produto](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#5-produto)
- [6. Plataforma de Ensino: Cursos, Trilhas e Certificados](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#6-plataforma-de-ensino-cursos-trilhas-e-certificados)
- [7. Comunidade](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#7-comunidade)
- [8. Personalize](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#8-personalize)
- [9. Integrações](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#9-integra%C3%A7%C3%B5es)
- [10. Configurações](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#10-configura%C3%A7%C3%B5es)
- [11. Vindi](https://ajuda.netshow.me/knowledge/netshow-me-ott-member-hub?hsLang=pt-br#11-vindi)
- [Netshow.me Transmissão Ao Vivo](https://ajuda.netshow.me/knowledge/netshow-me-transmiss%C3%A3o-ao-vivo?hsLang=pt-br#main-content)
- [1. Dashboard](https://ajuda.netshow.me/knowledge/netshow-me-transmiss%C3%A3o-ao-vivo?hsLang=pt-br#1-dashboard)
- [2. Configurações](https://ajuda.netshow.me/knowledge/netshow-me-transmiss%C3%A3o-ao-vivo?hsLang=pt-br#2-configura%C3%A7%C3%B5es)
- [4. Gerenciar Transmissões](https://ajuda.netshow.me/knowledge/netshow-me-transmiss%C3%A3o-ao-vivo?hsLang=pt-br#4-gerenciar-transmiss%C3%B5es)
- [5. Gerenciar Vídeos](https://ajuda.netshow.me/knowledge/netshow-me-transmiss%C3%A3o-ao-vivo?hsLang=pt-br#5-gerenciar-v%C3%ADdeos)
- [3. Gerenciar Diretórios](https://ajuda.netshow.me/knowledge/netshow-me-transmiss%C3%A3o-ao-vivo?hsLang=pt-br#3-gerenciar-diret%C3%B3rios)
- [6. Suporte para LIVE](https://ajuda.netshow.me/knowledge/netshow-me-transmiss%C3%A3o-ao-vivo?hsLang=pt-br#6-suporte-para-live)
- [Netshow.me App Mobile](https://ajuda.netshow.me/knowledge/netshow-me-app-mobile?hsLang=pt-br#main-content)
- [Primeiros Passos](https://ajuda.netshow.me/knowledge/netshow-me-app-mobile?hsLang=pt-br#primeiros-passos)
- [Funcionalidades](https://ajuda.netshow.me/knowledge/netshow-me-app-mobile?hsLang=pt-br#funcionalidades)
- [Netshow.me Live Commerce](https://ajuda.netshow.me/knowledge/netshow-me-live-commerce?hsLang=pt-br#main-content)
- [Configurações & Preparação](https://ajuda.netshow.me/knowledge/netshow-me-live-commerce?hsLang=pt-br#configura%C3%A7%C3%B5es-prepara%C3%A7%C3%A3o)
- [Execução & Telas de Transmissão](https://ajuda.netshow.me/knowledge/netshow-me-live-commerce?hsLang=pt-br#execu%C3%A7%C3%A3o-telas-de-transmiss%C3%A3o)
- [Gestão de Pedidos](https://ajuda.netshow.me/knowledge/netshow-me-live-commerce?hsLang=pt-br#gest%C3%A3o-de-pedidos)
- [Módulo B2B](https://ajuda.netshow.me/knowledge/netshow-me-live-commerce?hsLang=pt-br#m%C3%B3dulo-b2b)
- [Métricas & Pós-Live](https://ajuda.netshow.me/knowledge/netshow-me-live-commerce?hsLang=pt-br#m%C3%A9tricas-p%C3%B3s-live)
- [Integrações](https://ajuda.netshow.me/knowledge/netshow-me-live-commerce?hsLang=pt-br#integra%C3%A7%C3%B5es)
- [Informações](https://ajuda.netshow.me/knowledge/netshow-me-live-commerce?hsLang=pt-br#informa%C3%A7%C3%B5es)
[](https://ajuda.netshow.me/knowledge?hsLang=pt-br)
Transforma a maneira de distribuir e consumir vídeos e conteúdos digitais
Copyright © 2026, Netshow.me