Pular para o conteúdo
  • Não há sugestões porque o campo de pesquisa está em branco.

Tamanho de imagens para webpart de banners internos - HyWork

Descubra as especificações recomendadas para o tamanho de imagens utilizadas nas webparts de banners internos da HyWork. Este guia aborda dimensões ideais para diferentes dispositivos, formatos de imagem suportados e dicas para garantir a melhor qualidade visual e desempenho na intranet.

1. Banner versão desktop

Upload Específico para Desktop

  • Upload otimizado para imagens exclusivas de desktop

 Possibilidade de Customização Avançada

  • Ajuste de Imagem: Definir "Fit" ou "Fill" com cor de fundo para "Fit".
  • Conteúdo: Alinhamento (direita, centro, esquerda), posicionamento (horizontal/vertical) e espaçamento interno.
  • Texto: Configuração de tamanho, alinhamento, cor e estilo para títulos e descrições.
  • Categoria: Personalizar cor do texto e fundo.
  • Imagem: Adicionar bordas arredondadas para personalização.

Tamanhos recomendados para a webpart desktop

  • 1800px de largura por 864px de altura.

Como a imagem se adapta às diferentes resoluções de tela?

  • A imagem que utilizamos nesse espaço, tem o tamanho de 1800 x 864 px. Para facilitar o entendimento, representamos na imagem abaixo, como o conteúdo será exibido em algumas principais resoluções de tela. Cada área visível é destacada por cores específicas:

    • Vermelha Representa a área visível na resolução de 800px (tablets). 
    • Amarela: Mostra o conteúdo visível na resolução de 1336px (telas de laptops menores que o padrão).
    • Azul: Indica a área visível na resolução de 1660px (telas de laptops comuns).
    • Verde: Indica a área visível na resolução de 1920px (telas Full HD ou maiores).

Como interpretar as áreas coloridas?

Cada cor na imagem identifica o que será exibido em diferentes resoluções.Foto Image and Text

Layout do Banner no HyWork utilizando a mesma o mesmo tamanho de imagem

No SharePoint, você pode personalizar a seção do banner com alguns tipos de colunas.

É importante lembrar que cada tipo de layout da coluna utiliza uma área específica da imagem. Por isso, o administrador de conteúdo deve definir o layout antecipadamente para compreender qual área da imagem será utilizada.

  • Full: Utilize a área visível verde de 1800 x 384px para destacar o conteúdo.
  • 1/3 à esquerda ou à direita (mais utilizado): Utilize a área visível verde de 1800 x 384px para destacar o conteúdo.
  • Duas colunas: Utilize a área visível vermelha de 1800 x 844px para destacar o conteúdo.
  • 3 colunas utilizando um espaço de 30%: Utilize a área visível vermelha de 1800 x 844px para destacar o conteúdo.

Guia de orientação para o usuário: 

Layout de coluna Tamanho da imagem Tamanho da área de conteúdo
 Full 1800x864 px 1800 x 384px
1/3 à esquerda ou à direita (mais utilizado): 1800x864 px  1800 x 384px
Duas colunas 1800x864 px  1800 x 844px
 1 coluna de 3 

1800x864 px   1800 x 844px


Utilizando tamanhos específicos para cada opção de layout:

Você pode se adaptar melhor utilizando tamanhos específicos para cada opção de layout, mas ainda sim é importante que você se atente as proporções parecidas.

  • Full: Proporção de 16:9.
  • 1/3 à Esquerda ou Direita: Proporção de 16:9.
  • Duas Colunas: Proporção de 16:9.
  • 1 Coluna de 3: Proporção de 4:3.

O layout que utiliza 30% da seção ajusta automaticamente a altura da imagem enviada. Se você utilizar uma imagem com proporção 16:9, a altura será reduzida, enquanto uma imagem com proporção 4:3 resultará em uma altura maior.

 

Banner versão Mobile

 

Upload Específico para Mobile:

  • Upload otimizado para imagens exclusivas de Mobile

Comportamentos da webpart:

  • No mobile, as customizações feitas para o desktop não são aplicadas devido às limitações de espaço na tela.
  • Nas páginas internas, as informações de texto serão exibidas abaixo da imagem.
  • Na página inicial, apenas o título ficará dentro da imagem, funcionando como imagem e texto
    [imagem em preparação]

2. Tamanho recomendado para imagens do mobile

  • Temos uma largura mínima de 640 px, o que permite ao cliente fazer o upload de imagens com altura maior que a largura, e a imagem ocupará o espaço disponível na tela.