Habilitado para o cliente: branding e personalização

Há várias maneiras de adaptar o Workvivo para combinar com sua marca.

Este guia detalhará quais áreas podem ser personalizadas através do Painel de Administração do Workvivo, as recomendações/requisitos de imagem e outras dicas e truques!

Temas

Na área Temas do Painel de Administração, você pode configurar os seguintes itens de marca:

1. Imagem do banner principal
2. Cor primária
3. Cor secundária
4. Barra de navegação Cor (Opcional)
5. Logotipo da empresa

Como atualizar:

Para atualizar os itens de marca acima:

• Navegue até Admin > Temas

• Você verá sua marca padrão na opção "Tema padrão". Ele será exibido como ativo.
• Você não pode editar este tema, pois ele está ativo.
• Para criar uma nova marca, clique em "Adicionar tema".
• Você pode dar um nome ao seu tema e começar a editar seus itens de marca.

Informações adicionais sobre itens da marca Themes:

1. Banner principal:

Você pode definir um tema para web e dispositivo móvel e aplicar o mesmo banner web ao aplicativo móvel ou substituí-lo por uma imagem personalizada.

Especificações para web:

• Dimensões recomendadas: 2241px x 474px
• Espaço seguro para texto/imagens importantes: Aproximadamente 895px x 474px, centralizado. Manter o texto principal e os elementos visuais dentro dessa área garantirá que eles permaneçam visíveis no desktop, no celular e quando recortados no feed principal. Sempre teste e refine sua imagem para ter a melhor experiência.
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF ou GIF < 3 MB
• Tamanho máximo do arquivo: 10 MB

Especificações para o celular:

Nossas principais dicas: 

Para visualizar uma imagem de banner, você pode:

1. Veja uma prévia na página Editar tema. Mostramos como seu tema ficará a cada alteração feita.

2. Envie para um espaço oculto/privado. A visualização de um banner dentro do espaço será a mesma que se fosse o banner principal no desktop

Vá até seu Espaço > Editar espaço > clique no Banner > clique em Carregar > Salvar. Minimize o uso de texto ou pessoas nas imagens, pois podem ser cortados.
 

2. Cor primária

Uma cor primária estiliza itens-chave, incluindo:

• Área de trabalho:
  • Barra de navegação da área de trabalho (cor padrão) 
  • Interface de publicação (ícones, bordas, botões) 
  • Bordas de todos os botões e cor principal de alguns botões 
  • Todos os ícones, exceto a barra de navegação 
  • Domine o texto em atividades, espaços, artigos de notícias, metas/valores, análises, seções de pesquisa 
  • Avatares de eventos no feed de atividades 
  • Links por exemplo @menções, hiperlinks, hashtags (a menos que "links azuis" esteja habilitado)
  • Menu de navegação lateral que indica a opção de perfil se o menu estiver aberto:
  • Apps e documentos: chip de status "Destaque" e a cor do ícone da pasta.
• Móvel:
  • Cabeçalho (cor padrão, a menos que seja escolhida uma cor separada para a barra de navegação) 
  • Texto e ícones do menu de hambúrguer 
  • Interface de publicação (ícones, bordas, botões) 
  • Rótulos de itens em valores e pessoas 
  • Links por exemplo @menções, hiperlinks 
  • Cabeçalho de notificação por e-mail: o padrão é a cor primária

3. Cor secundária

Uma cor secundária estiliza itens-chave, incluindo:

•  Algumas bordas, como a borda ao redor do avatar do evento no feed da web:

• Observe que a cor de fundo da Declaração de Missão na página Valores é um pouco mais escura. Ela não pode ser personalizada:

• O botão "Novo" no mega menu. 

4. Cor da barra de navegação (opcional)

• Isso precisa contrastar com a fonte branca dos rótulos.
• Observe que os rótulos de fonte branca não são personalizáveis.
• Se você não personalizar a cor da sua barra de navegação, ela assumirá como padrão 90% da sua cor primária.

5. Logotipo da empresa

Dimensões: largura mínima de 400px. Tipo de arquivo: JPG, JPEG, PNG, BMP, SVG, WEBP.

Marca adicional habilitada para o cliente

Banner de perfil pessoal

É possível configurar banners de perfil pessoal para todos os usuários com as mesmas especificações de arquivo recomendadas para o banner principal. Observe que esses banners ficam visíveis apenas ao visualizar o perfil do usuário no computador e no dispositivo móvel. Saiba mais neste artigo.
 

Especificações:

• Dimensões recomendadas: 2241px x 474px
• Espaço seguro para texto/imagens principais: 1290px x 135px centralizado
• Tipos de arquivo suportados: PNG, JPG, JPEG < 3 MB
• Tamanho máximo do arquivo: 10 MB

Ícones espaciais e banners espaciais

Destaque seus Espaços ao personalizar o banner e o ícone do espaço.

No computador, os ícones do espaço ficam no lado esquerdo da tela. Em dispositivos móveis, esses ícones podem ser visualizados ao clicar na foto de perfil no canto superior esquerdo. Você também pode abrir o menu lateral deslizando o dedo da esquerda para a direita no aplicativo. 

Especificações do ícone espacial:

• Dimensões recomendadas: 200px x 200px ou proporção 1:1
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF ou GIF < 3 MB

Especificações do Space Banner:

• Dimensões recomendadas: 2241px x 474px
• Espaço seguro para texto/imagens principais: 1290px x 135px centralizado 
• Mais informações e dicas neste Guia dos banners de espaço
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF ou GIF < 3 MB 
• Observação: as bordas de banners de espaço são recortadas em dispositivos móveis.
   

Ícones de valor e Mensagem principal
 

Coloque os Valores da sua empresa em prática na Workvivo. Os funcionários podem marcar os valores em publicações, gerando maior alinhamento e identificação com a organização.
 

Especificações:

Ícones

• Dimensões recomendadas: 200px x 200px 
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF ou GIF <3 MB
• Uma imagem quadrada resultará em um ícone de valor em formato quadrado, uma imagem circular resultará em um ícone de valor circular

Imagem e Vídeo do Herói

• Dimensões recomendadas para a imagem do herói: 600px x 300px
• Tipos de arquivo suportados: PNG, JPEG, JPG, JFIF ou GIF <3 MB
• Declaração do Herói Tipo de arquivo de vídeo: MP4, MOV < 5 GB
• As imagens aparecerão na proporção 2:1 - se um vídeo também for carregado, a imagem será exibida como uma imagem de capa
• Nota: A seção Valores não pode ser removida da plataforma

Ícones de emblemas

Badges são usados pela empresa para incentivar o engajamento no local de trabalho e aumentar o reconhecimento profissional dos funcionários. Você pode personalizar os ícones dos badges para corresponder ao propósito.
 

Especificações:

• Dimensões recomendadas: 200px x 200px ou proporção 1:1 (quadrado)
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Ícones de aplicativos e documentos

Aplicativos e documentos (acessíveis pela aba Recursos) são como janelas de acesso para os principais sistemas e documentos usados diariamente em sua organização. Para facilitar a identificação dos aplicativos, adicione ícones. Se nenhuma imagem for adicionada, o ícone padrão será a imagem de elo preto, como no exemplo abaixo:
 

Especificações:

• Dimensões recomendadas: 200px x 200px (quadrado)
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Ícones de documentos

Especificações:

• Dimensões recomendadas: 200px x 200px (quadrado)
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Ícones do Mega Menu

O megamenu (acessível pela barra de navegação) ajuda você e seus colegas a encontrar recursos relevantes. Adicione ícones relevantes para garantir que links e aplicativos importantes estejam sempre em destaque.

Especificações:

• Dimensões recomendadas: 24px x 24px
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF, GIF < 3 MB
• Esta imagem aparecerá antes do título do título no Mega Menu

Ícones da barra lateral de links úteis

Você pode criar um widget de links úteis na barra lateral para um acesso rápido na sua página inicial da Workvivo.

O widget ficará visível no lado esquerdo do seu feed somente no desktop e poderá ser adicionado no painel de administração. 

Especificações:

• Dimensões recomendadas: 200px x 200px (quadrado)
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Ícones de equipe
 

Você pode adicionar ícones de Equipe às suas equipes assim que os dados dos seus funcionários forem adicionados à plataforma.

Especificações:

• Dimensões recomendadas: 200px x 200px (quadrado)
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Billboards
 

Billboards permitem destacar e exibir conteúdo na parte superior do Activity Feed para usuários de computador e dispositivo móvel.

• Dimensões recomendadas: Tamanho mínimo 600px x 300px
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF, GIF < 3 MB
• A imagem aparecerá na proporção 2:1

Imagem de capa de podcasts
 

Você pode compartilhar podcasts com as pessoas pela Workvivo. Se estiver criando o próprio podcast, você poderá adicionar uma imagem de capa. A imagem da capa também aparecerá no widget de podcast no lado direito do feed para usuários de computador (se ativado).

• Dimensões recomendadas: mínimo 300px x 300px
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Galeria
 

Você pode usar o recurso Galeria da Workvivo para armazenar, organizar e compartilhar imagens com colegas no computador e dispositivo móvel.

Especificações:

• Tipos de arquivo aceitos: GIF, PNG, JPG, JPEG, JFIF, MP4, MOV
• Sempre recomendamos imagens de paisagens no Workvivo
• As miniaturas são exibidas com uma proporção de 10:7 no desktop / proporção de 1:1 no celular. Imagens de paisagem com proporção de aspecto 2:1 são recomendadas.
• Para imagens com texto, recomendamos centralizar o texto para evitar possíveis cortes

Imagem em destaque para uma página global

Você pode destacar uma Global Page em um widget no lado direito do Activity Feed no computador.

Especificações:

• Dimensões recomendadas: 800px x 400px
• Tipos de arquivo suportados: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Um resumo de imagens personalizáveis e recomendações
 

Observação: o JFIF funciona somente em desktops.

O que é espaço seguro?
Recomendamos reservar um "espaço seguro" para texto e imagens porque queremos garantir uma visualização responsiva em computadores. Por exemplo, o widget do iniciador de aplicativos e as imagens de capa de notícias/eventos podem se ajustar a três tamanhos diferentes, dependendo da largura da janela do navegador.

Essa é a natureza do design responsivo: as pessoas sempre visualizarão o Workvivo em janelas de tamanhos diferentes; não há um tamanho de janela definido, a menos que estejam em tela cheia.

Outras considerações:

• Spotlight: imagens de artigos de notícias (incluindo artigos principais), eventos e Global Pages serão automaticamente incluídas no Spotlight. Você não precisa enviar imagens separadas para essa seção.