Collage widget settings

Collage puts photos of different sizes together in one tight grid. For example, one big photo with two small ones stacked beside it, a mosaic, or a magazine-style spread. It's in the Media category of the Add panel. You can also search the Add panel for "collage", "mosaic", "image grid", "photo grid" or "masonry".

Use a Collage when you want photos to fill a space in a planned pattern. Use a Photo Gallery for many photos in even rows, and a Free Layout when photos need to overlap or tilt.

How to add it

1. Click Add in the left rail, open Media and drag Collage onto the page.
2. Click Manage Tiles on its toolbar.
3. Click Add images and pick several photos at once from the image window. You can upload new ones there too.
4. Click a tile in the list and fill in its Alt text.
5. Click Done.

The first tile always takes a layout's biggest spot. Use the arrows in the tile list to change the order.

Manage Tiles: the Tiles tab

Click a tile in the list to edit it:

• Image: Replace or Remove the photo. A tile without an image doesn't show.
• Focal point: click the photo on the spot that must stay in view. Tiles crop photos to fill their shape, so this keeps faces and products in the frame. Center the focal point resets it.
• Alt text (required): a short description of the photo, such as "Kitchen with white cabinets". Screen readers read it out and search engines use it. Tiles without it show a yellow warning in the list, a Needs alt text label on the canvas (only while you edit), and a note at the top of the Design panel.
• Caption (optional): words shown over the photo.
• Link this tile: the whole tile opens a page, a section, a popup or a web address. A linked tile opens its link instead of the lightbox. Visitors can reach it with the Tab key.
• Own corners for this tile: gives this tile its own corner rounding (0–200 px) instead of the widget's.

Tile buttons: Move up, Move down, Duplicate and Delete. A Collage holds up to 40 tiles.

Manage Tiles: the Arrange tab

This is where you place tiles yourself.

1. Pick Desktop, Tablet or Phone at the top. It opens on the screen size you're editing.
2. Drag a tile to move it. Drag the small square in its bottom-right corner to make it wider or taller.
3. Tiles snap to the grid's cells.

Your first change switches that screen size's layout to Custom, starting from exactly what it showed. Other details:

• Columns: 2–12 for a Custom layout.
• A yellow note warns when two tiles overlap. The later tile covers the earlier one.
• Back to the Big left preset (Desktop) or Back to Auto (2 columns) (Tablet and Phone) undoes Custom for that screen size.
• With the keyboard: Tab to a tile, then use the arrow keys to move it one cell. Hold Shift with the arrow keys to make it wider, narrower, taller or shorter.

Click Done to keep your changes. Cancel throws them away. Done counts as one change for Undo.

Design panel: Layout

Each screen size has its own layout. The panel shows which one you're setting (Desktop, Tablet or Phone). Switch the screen size at the top of the editor to set the others. Wide screens use the Desktop layout.

Pick a layout from the small pictures:

• Big left: one big photo, two small ones stacked on the right. The Desktop default.
• Big right: the same, mirrored.
• Mosaic: one big photo and four small ones.
• Center feature: a big photo in the middle, two small ones on each side.
• Magazine: a wide feature, a side column and a mixed row under it.
• Banner: a wide photo across the top, three below.
• Staggered: tall and short photos in staggered columns. It uses shorter rows (0.6 × the row height).
• 2 across, 3 across, 4 across: equal photos side by side.
• Auto: even rows with the Columns you choose (1–12). If the photos don't divide evenly, the first row shares the width so there are no gaps. The Tablet and Phone default is Auto with 2 columns.
• Custom: you place each tile on the Arrange tab, with 2–12 Columns.

More photos than a preset has spots? The pattern repeats below. Any photos left over share one row across the full width, so the grid never has holes.

Other Layout settings:

• Arrange tiles (drag to move and resize)…: opens Manage Tiles on the Arrange tab.
• Row height: the height of one grid row, 40–600 px. Default 220 on Desktop, 200 on Tablet, 160 on Phone. A tile two rows tall is twice this plus the gap.
• Gap: the space between tiles, 0–80 px. Default 12.

Row height and Gap can differ per screen size. The small marker beside them shows when a screen size has its own value.

Design panel: Tiles

• Corners: corner rounding for every tile, 0–80 px. Default 8. A tile's own corners (Manage Tiles) win.
• Border: a border around each tile, 0–12 px. Default 0. Border color appears once it's above 0.
• On hover: None, Zoom (the photo grows a little inside its tile), Lift (the tile rises with a shadow) or Dim others (the other tiles fade). Default Zoom. Keyboard focus shows the same effect. Visitors who turn off motion on their device see no animation.
• Open photos in a lightbox: on the live site, clicking a tile without a link shows it full-screen, with previous / next arrows, the arrow keys and Esc. It's the same viewer as the Photo Gallery's. Default on. It doesn't open while you edit.
• Lazy-load images: photos load as visitors scroll to them. Default on. Turn it off for a Collage at the top of a page so its photos show at once.

Photos load at the right size for each screen: a small tile on a phone downloads a small file.

Design panel: Captions

Captions are written per tile in Manage Tiles. A shade always sits behind caption text; the default (black at 65%) keeps it readable on any photo, light or dark.

• Show: Always or On hover. Default Always. On touch screens, which have no hover, captions always show.
• Position: Top, Middle or Bottom. Default Bottom. Middle shades the whole photo.
• Shade: Fade (dark at the edge, clear towards the middle) or Solid band. Default Fade.
• Shade color: default black at 65%. Drawn at the strength you set.
• Caption text: font, size (default 15 px), color, bold and italic. If you don't pick a color, the text is white on a dark shade and dark on a light shade.

Spacing and animations

The Spacing and Animations & Effects sections work like every widget's. See Widget Design panel basics and Animations and effects.

Zeus

Ask Zeus in the editor for "a photo collage" or "a mosaic of our project photos". He adds a Collage and can change its layout per screen size, captions and links.

Fixes

• A photo is cut off in the wrong place: set its Focal point in Manage Tiles.
• The layout looks cramped on phones: set the Phone screen size to Auto with 1 column, or a preset with fewer columns.
• A tile is missing: it has no image. Add one in Manage Tiles.
• Two tiles cover each other: on the Arrange tab, follow the overlap note and move one of them.
• The lightbox doesn't open: the tile has a link, or Open photos in a lightbox is off. It also never opens in the editor.