Window cards with the team reaching above the frames
Set up the content
- Content → Cards: For each person add a Background image (a texture, a place or a pattern) and a Cutout – the person saved as a PNG with a transparent background.
- Cutout height sets the person's height as a share of the card; above 100 % the head reaches above the frame in the Window layout. Cutout position puts the person in the middle, left or right.
- Add Role or tag, Name, Text and a Link (text link, HubSpot CTA or the whole card).
- Content → Heading adds an eyebrow, heading and lead above the cards.
Choose the look
| Setting | Options |
|---|---|
| Styles → Layout → Cards per page (desktop) | 2–4 cards in view; tablets show two, phones one |
| Styles → Layout → Loop the row | After the last card the first comes round again, in both directions, and the arrows never stop. Needs more cards than fit on one screen, and is off while Show more is on |
| Scene ratio | 4:5, 1:1 or 3:4 picture area |
| Progress line | The thin line under the cards that shows the position |
| Window: Space above the frame, Window: Side inset | How much room the head has above the window and the window's width |
| Parallax strength | 0 turns the movement off; 1 is calm, 3 is playful |
| Styles → Cards | Window frame color, a tint over the background, shadow under the window |
| Styles → Text / Border / Corner / Spacing | Fonts and colors, frame border, corner radius, padding and gap |
Good to know
- Cutouts: Any tool that removes a background works (Photoshop, Canva, Preview on a Mac with «Remove background», or the theme's
omni-tools/cutoutscript, which uses macOS Vision). Save as PNG, about 800–1000 px tall. - The pointer parallax runs for mouse pointers only; touch screens and visitors who prefer reduced motion see the cards still, and Animations → Off removes the movement too.
- Background, module width, spacing and animation work the same in every module – see Backgrounds and Animations.