Visão geral
O Construtor de Widgets é o motor criativo por trás das Páginas de Destino Personalizadas no Workvivo HQ, permitindo que você crie a página inicial da sua organização usando uma biblioteca flexível de widgets. Muitos desses widgets exibem imagens, e o tamanho em que essas imagens são renderizadas depende de três fatores: o tipo de widget, o estilo de exibição escolhido durante a configuração e o layout do painel aplicado à guia da sua página inicial.
Este artigo fornece as dimensões de imagem e proporções recomendadas para cada combinação. Usar o tamanho correto ajuda a evitar cortes ou distorções indesejadas e garante que suas páginas de destino personalizadas tenham uma aparência profissional em todos os layouts.
Importante: As imagens são carregadas quando o conteúdo de origem é criado (por exemplo, quando você cria um artigo de notícias, evento ou jornada), e não quando você configura o widget. Isso significa que você não pode definir dimensões de imagem diferentes para cada layout. As dimensões recomendadas neste artigo indicam a resolução ideal para cada layout; no entanto, desde que você mantenha uma proporção de 2:1, as imagens serão redimensionadas para se ajustarem ao contêiner responsivo em diferentes layouts.
Layouts de painel de controle
A área de grade do painel de controle em uma página de destino personalizada oferece suporte a quatro configurações de layout. A largura das colunas varia entre os layouts, o que afeta diretamente a forma como as imagens do seu widget são renderizadas.
| Layout | Descrição |
|---|---|
Feed + Widgets em cada lado |
Coluna de alimentação central com colunas de widgets mais estreitas à esquerda e à direita. |
Grade de 3 colunas |
Três colunas igualmente espaçadas |
Grade de 2 colunas – Largura uniforme |
Duas colunas de largura igual |
| Grade de 2 colunas – Expandida à esquerda | Uma coluna esquerda mais larga e uma coluna direita mais estreita. |
Observação: você também pode inserir widgets na Zona de Cabeçalho , na parte superior da página, onde eles serão exibidos em largura total. Os tamanhos das imagens neste artigo são baseados no posicionamento da Zona de Grade do Painel de Controle .
Notícias em destaque, Notícias, Páginas em destaque e Páginas
Estilo de lista (padrão, colunas estreitas)
| Layout | Tamanho recomendado (L x A) | Proporção recomendada |
|---|---|---|
Feed + Widgets em cada lado |
245 × 122,5 px |
2:1 |
Grade de 3 colunas |
334 × 167 px |
2:1 |
| Grade de 2 colunas - Expandida à esquerda (coluna da direita) | 345 × 172,5 px |
2:1 |
Estilo Mosaico (Estilo Automático, Colunas Largas, 3 Itens Exibidos)
| Layout | Tamanho recomendado (L x A) | Proporção recomendada |
|---|---|---|
| Grade de 2 colunas - Largura uniforme | 200 × 100 px |
2:1 |
| Grade de 2 colunas - Expandida à esquerda | 352 × 176 px |
2:1 |
Estilo Carrossel (Alternância Manual, Item Único)
| Layout | Tamanho recomendado (L x A) | Proporção recomendada |
|---|---|---|
Feed + Widgets em cada lado |
245 × 122,5 px |
2:1 |
Grade de 3 colunas |
334 × 167 px |
2:1 |
| Grade de 2 colunas - Largura uniforme | 530 × 265 px |
2:1 |
| Grade de 2 colunas - Expandida à esquerda (coluna da esquerda) | 352 × 176 px |
2:1 |
| Grade de 2 colunas - Expandida à esquerda (coluna da direita) | 345 × 172,5 px |
2:1 |
Próximos eventos, eventos e viagens
Estilo compacto (colunas estreitas)
| Layout | Tamanho recomendado (L x A) | Proporção recomendada |
|---|---|---|
Feed + Widgets em cada lado |
245 × 122,5 px |
2:1 |
Grade de 3 colunas |
334 × 167 px |
2:1 |
| Grade de 2 colunas - Expandida à esquerda (coluna da direita) | 345 × 172,5 px |
2:1 |
Estilo expandido (colunas largas, exibir texto descritivo)
| Layout | Tamanho recomendado (L x A) | Proporção recomendada |
|---|---|---|
| Grade de 2 colunas - Largura uniforme | 530 × 265 px |
2:1 |
| Grade de 2 colunas - Expandida à esquerda (coluna da esquerda) | 352 × 176 px |
2:1 |
Espaços em alta e espaços
Miniatura do carrossel
| Layout | Tamanho recomendado (L x A) | Proporção recomendada |
|---|---|---|
Feed + Widgets em cada lado |
245 × 122,5 px |
2:1 |
| Grade de 2 colunas - Largura uniforme | 530 × 265 px |
2:1 |
Billboards
| Estilo | Tamanho recomendado (L x A) | Proporção recomendada |
|---|---|---|
| Imagem de banner única | 269 × 134,5 px (mínimo) |
- |
Imagens maiores, mantendo as mesmas proporções, serão redimensionadas sem problemas. É possível adicionar até 5 itens de anúncio por widget.
Relógio de contagem regressiva
| Estilo | Tamanho recomendado (L x A) | Proporção recomendada |
|---|---|---|
| Imagem de fundo/cabeçalho | 245 × 122,5 px |
2:1 |
Podcast em destaque/Podcasts mais recentes
| Estilo | Tamanho recomendado (L x A) | Proporção recomendada |
|---|---|---|
| Cobrir | 400 x 400 px |
1:1 |
Widgets sem upload de imagens personalizadas
Os widgets a seguir não suportam o envio de imagens personalizadas. As imagens são geradas pelo sistema ou herdadas do conteúdo de origem:
- Documentos em destaque - exibe um ícone de tipo de arquivo gerado pelo sistema.
- Aplicativos em destaque / Aplicativos favoritos - exibe o ícone de registro do aplicativo.
- Links rápidos - exibe o ícone de registro do aplicativo
- Minha Equipe - exibe a foto de perfil do usuário.
- Postagens - herda a imagem da postagem original
Dicas para obter os melhores resultados
Dê prioridade à proporção de 2:1. Como as imagens são definidas no nível do conteúdo de origem e não por widget, manter uma proporção de 2:1 é a coisa mais importante que você pode fazer. Isso garante que suas imagens sejam redimensionadas corretamente em qualquer layout de painel.
As imagens da Zona de Cabeçalho podem ser diferentes. Os widgets arrastados para a Zona de Cabeçalho são promovidos para ocupar toda a largura. As dimensões mencionadas neste artigo aplicam-se à Zona de Grade do Painel de Controle.