Aperçu
Le Widget Builder est le moteur créatif derrière les pages d’atterrissage personnalisées dans le siège de Workvivo, il vous permet de concevoir la page d’accueil de votre organisation à l’aide d’une bibliothèque flexible de widgets. Beaucoup de ces widgets affichent des images, et la taille à laquelle ces images s’affichent dépend de trois éléments : le type de widget, le style d’affichage choisi lors de la configuration, et la disposition du tableau de bord appliquée à l’onglet de votre page d’atterrissage.
Cet article fournit les dimensions d’image et les formats d’image recommandés pour chaque combinaison. Utiliser la bonne taille vous aide à éviter les recadrerats ou déformations indésirables et garantit que vos pages d’atterrissage personnalisées paraissent soignées sur chaque mise en page.
Important : Les images sont téléchargées lors de la création du contenu source (par exemple, lors de la création d’un article d’actualité, d’un événement ou d’un parcours), et non lors de la configuration du widget. Cela signifie que vous ne pouvez pas définir différentes dimensions d’image par mise en page. Les dimensions recommandées dans cet article indiquent la résolution idéale pour chaque mise en page, cependant tant que vous maintenez un format 2:1, les images seront redimensionnées pour s’adapter au conteneur réactif à travers différents layouts.
Dispositions des tableaux de bord
La zone de grille du tableau de bord sur une page d’atterrissage personnalisée prend en charge quatre configurations de mise en page. La largeur des colonnes varie selon les mises en page, ce qui influence directement la façon dont vos images widget sont affichées.
| Disposition | Description |
|---|---|
Flux + Widgets de chaque côté |
Colonne centrale d’alimentation avec des colonnes widget plus étroites à gauche et à droite |
Grille à 3 colonnes |
Trois colonnes espacées également |
Grille à 2 colonnes – largeur uniforme |
Deux colonnes de largeur égale |
| Grille à 2 colonnes – gauche étendue | Une colonne gauche plus large et une colonne droite plus étroite |
Note : Vous pouvez également placer des widgets dans la zone d’en-tête en haut de la page, où ils sont promus à pleine largeur. Les tailles d’image dans cet article sont basées sur le placement des zones de grille du tableau de bord .
Actualités en vedette, actualités, pages et pages en vedette
Style de liste (par défaut, colonnes étroites)
| Disposition | Taille recommandée (L xH) | Ratio recommandé |
|---|---|---|
Flux + Widgets de chaque côté |
245 × 122,5 px |
2:1 |
Grille à 3 colonnes |
334 × 167 px |
2:1 |
| Grille à 2 colonnes - Étendu à gauche (colonne de droite) | 345 × 172,5 px |
2:1 |
Style mosaïque (style auto, colonnes larges, 3 éléments montrés)
| Disposition | Taille recommandée (L xH) | Ratio recommandé |
|---|---|---|
| Grille à 2 colonnes - largeur uniforme | 200 × 100 px |
2:1 |
| Grille à 2 colonnes - gauche étendu | 352 × 176 px |
2:1 |
Style carrousel (Basculement manuel, objet unique)
| Disposition | Taille recommandée (L xH) | Ratio recommandé |
|---|---|---|
Flux + Widgets de chaque côté |
245 × 122,5 px |
2:1 |
Grille à 3 colonnes |
334 × 167 px |
2:1 |
| Grille à 2 colonnes - largeur uniforme | 530 × 265 px |
2:1 |
| Grille à 2 colonnes - Étendu à gauche (colonne de gauche) | 352 × 176 px |
2:1 |
| Grille à 2 colonnes - Étendu à gauche (colonne de droite) | 345 × 172,5 px |
2:1 |
Événements, événements et voyages à venir
Style compact (colonnes étroites)
| Disposition | Taille recommandée (L xH) | Ratio recommandé |
|---|---|---|
Flux + Widgets de chaque côté |
245 × 122,5 px |
2:1 |
Grille à 3 colonnes |
334 × 167 px |
2:1 |
| Grille à 2 colonnes - Étendu à gauche (colonne de droite) | 345 × 172,5 px |
2:1 |
Style élargi (colonnes larges, afficher le texte de la description)
| Disposition | Taille recommandée (L xH) | Ratio recommandé |
|---|---|---|
| Grille à 2 colonnes - largeur uniforme | 530 × 265 px |
2:1 |
| Grille à 2 colonnes - Étendu à gauche (colonne de gauche) | 352 × 176 px |
2:1 |
Espaces et espaces en vogue
Miniature de carrousel
| Disposition | Taille recommandée (L xH) | Ratio recommandé |
|---|---|---|
Flux + Widgets de chaque côté |
245 × 122,5 px |
2:1 |
| Grille à 2 colonnes - largeur uniforme | 530 × 265 px |
2:1 |
Billboards
| Style | Taille recommandée (L xH) | Ratio recommandé |
|---|---|---|
| Image unique en bannière | 269 × 134,5 px (minimum) |
- |
Des images plus grandes aux mêmes proportions se réduisent proprement. Jusqu’à 5 éléments de panneaux publicitaires peuvent être ajoutés par widget.
Horloge de compte à rebours
| Style | Taille recommandée (L xH) | Ratio recommandé |
|---|---|---|
| Image d’arrière-plan/En-tête | 245 × 122,5 px |
2:1 |
Podcast en vedette / Derniers podcasts
| Style | Taille recommandée (L xH) | Ratio recommandé |
|---|---|---|
| Couverture | 400 x 400 px |
1:1 |
Widgets sans téléchargement d’images personnalisées
Les widgets suivants ne prennent pas en charge le téléchargement d’images personnalisées. Les images sont soit générées par le système, soit héritées du contenu source :
- Documents en vedette - affiche une icône de type de fichier générée par le système
- Applications en vedette / Applications étoilées - affiche l’icône enregistrée de l’application
- Quick Links - affiche l’icône enregistrée de l’application
- Mon équipe - affiche l’avatar de la photo de profil de l’utilisateur
- Publications - hérite de l’image du post original
Conseils pour de meilleurs résultats
Priorisez le format d’image 2:1. Puisque les images sont définies au niveau du contenu source et non par widget, maintenir un ratio 2:1 est la chose la plus importante à faire. Cela garantit que vos images se redimensionnent proprement sur n’importe quelle disposition de tableau de bord.
Les images des zones d’en-tête peuvent différer. Les widgets traînés dans la zone d’en-tête sont promus à pleine largeur. Les tailles mentionnées dans cet article s’appliquent à la zone de grille du tableau de bord.