Overview
The Widget Builder is the creative engine behind Custom Landing Pages in Workvivo HQ, it lets you design your organization's homepage using a flexible library of widgets. Many of these widgets display images, and the size at which those images render depends on three things: the widget type, the display style you choose during configuration, and the dashboard layout applied to your landing page tab.
This article provides the recommended image dimensions and aspect ratios for each combination. Using the correct size helps you avoid unwanted cropping or distortion and ensures your Custom Landing Pages look polished across every layout.
Important: Images are uploaded when the source content is created (e.g. when you create a news article, event, or journey), not when you configure the widget. This means you cannot set different image dimensions per layout. The recommended dimensions in this article indicate the ideal resolution for each layout, however as long as you maintain a 2:1 aspect ratio, images will resize to fit the responsive container across different layouts.
Dashboard Layouts
The Dashboard Grid Zone on a Custom Landing Page supports four layout configurations. Column widths vary between layouts, which directly affects how your widget images are rendered.
| Layout | Description |
|---|---|
Feed + Widgets on Each Side | Central feed column with narrower widget columns on the left and right |
3 Column Grid | Three equally spaced columns |
2 Column Grid – Even Width | Two columns of equal width |
| 2 Column Grid – Left Expanded | A wider left column and a narrower right column |
Note: You can also place widgets in the Header Zone at the top of the page, where they are promoted to full-width. The image sizes in this article are based on Dashboard Grid Zone placement.
Featured News, News, Featured Pages & Pages
List Style (Default, Narrow Columns)
| Layout | Recommended Size (W xH) | Recommended Ratio |
|---|---|---|
Feed + Widgets on Each Side | 245 × 122.5 px | 2:1 |
3 Column Grid | 334 × 167 px | 2:1 |
| 2 Column Grid - Left Expanded (right column) | 345 × 172.5 px | 2:1 |
Mosaic Style (Auto Style, Wide Columns, 3 Items Shown)
| Layout | Recommended Size (W xH) | Recommended Ratio |
|---|---|---|
| 2 Column Grid - Even Width | 200 × 100 px | 2:1 |
| 2 Column Grid - Left Expanded | 352 × 176 px | 2:1 |
Carousel Style (Manual Toggle, Single Item)
| Layout | Recommended Size (W xH) | Recommended Ratio |
|---|---|---|
Feed + Widgets on Each Side | 245 × 122.5 px | 2:1 |
3 Column Grid | 334 × 167 px | 2:1 |
| 2 Column Grid - Even Width | 530 × 265 px | 2:1 |
| 2 Column Grid - Left Expanded (left column) | 352 × 176 px | 2:1 |
| 2 Column Grid - Left Expanded (right column) | 345 × 172.5 px | 2:1 |
Upcoming Events, Events & Journeys
Compact Style (Narrow Columns)
| Layout | Recommended Size (W xH) | Recommended Ratio |
|---|---|---|
Feed + Widgets on Each Side | 245 × 122.5 px | 2:1 |
3 Column Grid | 334 × 167 px | 2:1 |
| 2 Column Grid - Left Expanded (right column) | 345 × 172.5 px | 2:1 |
Expanded Style (Wide Columns, Show Description Text)
| Layout | Recommended Size (W xH) | Recommended Ratio |
|---|---|---|
| 2 Column Grid - Even Width | 530 × 265 px | 2:1 |
| 2 Column Grid - Left Expanded (left column) | 352 × 176 px | 2:1 |
Trending Spaces & Spaces
Carousel Thumbnail
| Layout | Recommended Size (W xH) | Recommended Ratio |
|---|---|---|
Feed + Widgets on Each Side | 245 × 122.5 px | 2:1 |
| 2 Column Grid - Even Width | 530 × 265 px | 2:1 |
Billboards
| Style | Recommended Size (W xH) | Recommended Ratio |
|---|---|---|
| Single Banner Image | 269 × 134.5 px (minimum) | - |
Larger images at the same proportions will scale down cleanly. Up to 5 billboard items can be added per widget.
Countdown Clock
| Style | Recommended Size (W xH) | Recommended Ratio |
|---|---|---|
| Background/Header Image | 245 × 122.5 px | 2:1 |
Featured Podcast/Latest Podcasts
| Style | Recommended Size (W xH) | Recommended Ratio |
|---|---|---|
| Cover | 400 x 400 px | 1:1 |
Widgets without Custom Image Uploads
The following widgets do not support custom image uploads. Images are either system-generated or inherited from the source content:
- Featured Documents - displays a system-generated file-type icon
- Featured Apps / Starred Apps - displays the app's registered icon
- Quick Links - displays the app's registered icon
- My Team - displays the user's profile photo avatar
- Posts - inherits the image from the original post
Tips for Best Results
Prioritise the 2:1 aspect ratio. Since images are set at the source content level and not per widget, maintaining a 2:1 ratio is the most important thing you can do. This ensures your images resize cleanly across any dashboard layout.
Header Zone images may differ. Widgets dragged into the Header Zone are promoted to full-width. The sizes in this article apply to the Dashboard Grid Zone.