The Grid Gallery Block is one of four Gallery Block designs. It adds a gallery of images and videos to a page or blog post in a symmetrical grid. This is a popular option if you want to manually recreate the built-in grid designs on some of our templates like Flatiron and Avenue.
Note: Clickthrough URLs are supported in Grid Gallery Blocks except when the Lightbox option is checked.
Step 1 - Add the Grid Gallery Block
- Open a page or post editor.
- Click an Insert Point or the +.
- Under, Gallery, select Grid from the menu.
- For more detailed steps, visit Adding blocks.
Step 2 - Add images and video
You can upload images, add stock images, embed videos, and display content from an existing Gallery Page from the Content tab. To learn more, visit Gallery Blocks overview.
Note: If you connect an existing gallery, you'll update image titles, descriptions, and clickthrough URLs within the Gallery Page.
Step 3 - Add titles and descriptions (optional)
You can add titles and/or descriptions for each image. Image titles can display below the images in the block. Descriptions will only display in a lightbox. Titles also serve as alt text for SEO purposes.
Check Show Title in the Design tab to display titles below images in the grid.
Visit Gallery Blocks overview to learn more about Gallery Block titles and descriptions.
Step 4 - Customize the design
Click the Design tab to edit the design and behavior of the Grid Block. The options in the Design tab affect cropping and resizing.
The preview of the gallery on your page will change so you can view the changes in real time. We recommend playing around with the settings until you find a design you like.
Here are the design options:
|Aspect Ratio||Change the shape of the images and videos. By default, 1:1 Square is selected.|
|Crop Images||Remove padding and display images and videos in the selected aspect ratio.|
|Show Title||Display titles below images in the grid.|
|Thumbnails Per Row||The number of thumbnails in a row. Increasing the number decreases the size of each thumbnail.|
|Padding||Adjust the padding/margins between each image or video. Moving the slider to 0 removes the padding.|
|Lightbox||When checked, clicking an image or video will display in a slideshow lightbox with a black or white background. Clickthrough URLs will be disabled. Use the Lightbox Theme drop-down to choose whether the lightbox background is black or white.|
|Open Links in New Window||Clickthrough URLs added to an image will open in a new browser window or tab.|
Step 5 - Add clickthrough URLs (optional)
You can link images to external pages, internal content, or files by adding clickthrough URLs. This is a great way to use the gallery to encourage clicks to other content, like client projects, products, files, or blog posts. Clickthrough URLs work with images, but they don’t work with videos.
Note: Clickthrough URLs won’t work in this block if Lightbox is checked in the Design tab. To add a link that's visible in lightbox mode, add it to the image description.
To learn more, visit Gallery Blocks overview.
Step 6 - Save
When you’re done adding content and designing the Grid Block, click Apply.
Step 7 - Crop images with focal points (optional)
Use focal points to reposition each image in the square container and change what displays in the cropped area. If you don’t like how an image is cut off in the grid, you can change it using its focal point:
- Return to the Content tab of the Block Editor.
- Hover over an image.
- Click and drag the gray circle that appears.
Step 8 - Change the gallery design
You can switch the design to a different block in the Design tab of the Block Editor. To learn more, visit Gallery Blocks overview.
Here's a sample Grid Gallery Block:
On mobile, Grid Gallery Blocks display as grids two columns wide.
- The aspect ratio you chose in the Design tab still applies on mobile.
- Lightboxes display on mobile.
- When lightboxes are disabled, clickthrough URLs work when tapped.
- While in a lightbox, tap the circle in the bottom-right corner to display an image's title and description.