Showreel hero and Media grid

Two Blocks are made for portfolios and studio sites. The Showreel hero is a full-screen hero of projects: a full-screen picture or video for each project, which you can blur with Blur behind, and words revealed line by line. The Media grid is a dense grid of pictures and videos, each as wide and tall as you make it, packed together with no gaps.

Add either from Blocks in the toolbar (see Add and style Blocks), then select it to see its settings in the Design tab.

Showreel hero

The hero shows one project at a time. Each project has a picture, a title, a line about the work and its year, with a counter (01 / 03), a progress line, previous and next arrows and a Pause button. Swipes, the arrow keys and its buttons change it, and it can play on its own.

While you edit, the projects lie side by side, each as wide as the hero, so you can change every one. In Preview and on your site they show one at a time.

Its settings

• Add pictures: choose several pictures; each becomes a project. Say what each one shows in its alt text.
• Projects: − and + remove the last project or add one.
• Change: how one project gives way to the next: Fade, Zoom, Blur (the default) or Wipe.
• Speed (0.2 to 3 seconds, 1.2 to start): how long the change takes.
• Blur behind (0 to 60 px): how much the picture behind is blurred.
• Words revealed line by line: on to start.
• Plays on its own: on to start, moving on Every 6 seconds (2 to 30).
• Back to the first after the last: on to start.
• The mouse wheel changes projects: off to start. Turned on, the wheel moves through the projects and lets the page scroll on past the first and the last, so nobody is held on the hero.

To use a video, select a project’s picture and give it a video fill in the Design tab.

Media grid

A dense grid of pictures and videos. Each tile is as wide and tall as you make it, and the grid packs them together as tightly as their sizes allow. It takes fewer columns on small screens, two at most on a phone, and its videos play while they are on screen.

While you edit, the tiles sit in rows. Make a tile wider or taller to span more: with the Media grid selected, its section tells you the size of a column and of a half-row for this grid. A selected tile shows only a note that you can restyle it freely.

Its settings

• Add pictures: choose several pictures; each becomes a tile.
• Tiles: − and + remove the last tile or add one.
• Columns (1 to 8, 4 to start): columns across.
• Gap (0 to 48 px, 4 px to start): space between tiles.
• Videos play: While on screen (the default), On hover or All the time.
• Tiles rise in as they arrive: on to start.

Catches

• The Showreel hero lies flat while you edit. That is how you reach every project; check Preview for the real thing.
• Delete a part the hero needs (its slides) and the section warns you.
• Videos play silently in the Media grid.
• Less motion: for people who ask for less motion the hero changes at once, never plays on its own and its videos wait; the grid’s tiles are simply there and its videos wait.
• The hero stops while the pointer or the keyboard is on it.
• Adding a video uses the video fill, which is on Pro. A video already in a file plays on any plan.