Descripción general
El Widget Builder es el motor creativo detrás de las Páginas de Aterrizaje Personalizadas en la sede de Workvivo, te permite diseñar la página principal de tu organización utilizando una biblioteca flexible de widgets. Muchos de estos widgets muestran imágenes, y el tamaño al que se renderizan depende de tres factores: el tipo de widget, el estilo de visualización que elijas durante la configuración y el diseño del panel aplicado a la pestaña de tu página de destino.
Este artículo proporciona las dimensiones de imagen y relaciones de aspecto recomendadas para cada combinación. Usar el tamaño correcto te ayuda a evitar recortes o deformaciones no deseadas y asegura que tus páginas personalizadas de destino luzcan pulidas en cada diseño.
Importante: Las imágenes se suben cuando se crea el contenido fuente (por ejemplo, cuando creas un artículo de noticias, un evento o un viaje), no cuando configuras el widget. Esto significa que no puedes establecer diferentes dimensiones de imagen por diseño. Las dimensiones recomendadas en este artículo indican la resolución ideal para cada diseño, pero mientras mantengas una relación de aspecto 2:1, las imágenes se redimensionarán para adaptarse al contenedor responsivo entre diferentes diseños.
Distribución del salpicadero
La Zona de la Cuadrícula del Panel en una Página de Aterrizaje Personalizada soporta cuatro configuraciones de diseño. El ancho de las columnas varía entre layouts, lo que afecta directamente a cómo se renderizan tus imágenes widget.
| Distribución | Descripción |
|---|---|
Alimentación + Widgets en cada lado |
Columna central de alimentación con columnas widget más estrechas a la izquierda y derecha |
Cuadrícula de 3 columnas |
Tres columnas espaciadas por igual |
Rejilla de 2 columnas – Ancho par |
Dos columnas de igual anchura |
| Cuadrícula de 2 columnas – izquierda ampliada | Una columna izquierda más ancha y una columna derecha más estrecha |
Nota: También puedes colocar widgets en la Zona de Cabecera en la parte superior de la página, donde se promocionan a ancho completo. Los tamaños de imagen en este artículo se basan en la colocación de la Zona de la Cuadrícula del Tablero .
Noticias destacadas, noticias, páginas destacadas y páginas destacadas
Estilo de lista (por defecto, columnas estrechas)
| Distribución | Talla recomendada (Ancho xAlto) | Proporción recomendada |
|---|---|---|
Alimentación + Widgets en cada lado |
245 × 122,5 px |
2:1 |
Cuadrícula de 3 columnas |
334 × 167 px |
2:1 |
| Cuadrícula de 2 columnas - Expandido a la izquierda (columna derecha) | 345 × 172,5 px |
2:1 |
Estilo mosaico (estilo auto, columnas anchas, 3 elementos mostrados)
| Distribución | Talla recomendada (Ancho xAlto) | Proporción recomendada |
|---|---|---|
| Cuadrícula de 2 columnas - ancho par | 200 × 100 px |
2:1 |
| Cuadrícula de 2 columnas - izquierda ampliada | 352 × 176 px |
2:1 |
Estilo carrusel (Interruptor manual, un solo objeto)
| Distribución | Talla recomendada (Ancho xAlto) | Proporción recomendada |
|---|---|---|
Alimentación + Widgets en cada lado |
245 × 122,5 px |
2:1 |
Cuadrícula de 3 columnas |
334 × 167 px |
2:1 |
| Cuadrícula de 2 columnas - ancho par | 530 × 265 px |
2:1 |
| Cuadrícula de 2 columnas - Expandido a la izquierda (columna izquierda) | 352 × 176 px |
2:1 |
| Cuadrícula de 2 columnas - Expandido a la izquierda (columna derecha) | 345 × 172,5 px |
2:1 |
Próximos eventos, eventos y viajes
Estilo compacto (columnas estrechas)
| Distribución | Talla recomendada (Ancho xAlto) | Proporción recomendada |
|---|---|---|
Alimentación + Widgets en cada lado |
245 × 122,5 px |
2:1 |
Cuadrícula de 3 columnas |
334 × 167 px |
2:1 |
| Cuadrícula de 2 columnas - Expandido a la izquierda (columna derecha) | 345 × 172,5 px |
2:1 |
Estilo ampliado (columnas anchas, mostrar texto de descripción)
| Distribución | Talla recomendada (Ancho xAlto) | Proporción recomendada |
|---|---|---|
| Cuadrícula de 2 columnas - ancho par | 530 × 265 px |
2:1 |
| Cuadrícula de 2 columnas - Expandido a la izquierda (columna izquierda) | 352 × 176 px |
2:1 |
Espacios y espacios en tendencia
Miniatura del carrusel
| Distribución | Talla recomendada (Ancho xAlto) | Proporción recomendada |
|---|---|---|
Alimentación + Widgets en cada lado |
245 × 122,5 px |
2:1 |
| Cuadrícula de 2 columnas - ancho par | 530 × 265 px |
2:1 |
Billboards
| Estilo | Talla recomendada (Ancho xAlto) | Proporción recomendada |
|---|---|---|
| Imagen de un solo banner | 269 × 134,5 px (mínimo) |
- |
Las imágenes más grandes en las mismas proporciones se reducen limpiamente. Se pueden añadir hasta 5 elementos en vallas publicitarias por widget.
Reloj de cuenta atrás
| Estilo | Talla recomendada (Ancho xAlto) | Proporción recomendada |
|---|---|---|
| Imagen de fondo/cabecera | 245 × 122,5 px |
2:1 |
Podcast destacado/Últimos podcasts
| Estilo | Talla recomendada (Ancho xAlto) | Proporción recomendada |
|---|---|---|
| Portada | 400 x 400 px |
1:1 |
Widgets sin subidas de imágenes personalizadas
Los siguientes widgets no admiten subidas de imágenes personalizadas. Las imágenes son generadas por el sistema o heredadas del contenido fuente:
- Documentos destacados - muestra un icono de tipo de archivo generado por el sistema
- Aplicaciones destacadas / Aplicaciones con estrella - muestra el icono registrado de la app
- Enlaces Rápidos - muestra el icono registrado de la app
- Mi equipo: muestra el avatar de la foto de perfil del usuario
- Publicaciones - hereda la imagen de la publicación original
Consejos para obtener mejores resultados
Prioriza la relación de aspecto 2:1. Como las imágenes se establecen a nivel de contenido fuente y no por widget, mantener una proporción 2:1 es lo más importante que puedes hacer. Esto garantiza que tus imágenes se redimensionen limpiamente en cualquier diseño de panel.
Las imágenes de la Zona de Cabecera pueden variar. Los widgets arrastrados a la Zona de Cabecera se promocionan a ancho completo. Los tamaños de este artículo se aplican a la Zona de la Cuadrícula del Tablero.