Grid’s Masonry section can present up to six images with overlaying text in a grid on your home page.
Use the theme editor to select a layout option, add spacing between masonry blocks, set hover interaction options, fit images into the masonry blocks, and add text and links for the Masonry section
Add Masonry to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Masonry
- Click the section, then Add
- Save
Select a layout option
Grid's masonry section comes with two Layout options: Full width and Content width.
Checking Full width will make your tiles full-bleed (i.e. they will extend right to the edges of your screen).
Checking Content width will make your tiles display their images in their original dimensions, padding the sides of your Masonry section with whitespace if they are narrower than the width of the browser.
Add spacing between masonry blocks
Customize the appearance of the masonry feature by toggling Enable gutters. This will add some empty space borders between features)
Set hover interaction options
Enable text hover to hide the text until customers hover the cursor over the section block.
Enable hover animation to activate an overlay effect when the customers hover the cursor over the section block.
Hover interactions are limited to the desktop since they depend on the position of the mouse cursor to operate. Mobile devices will not display hover interactions.
Fit images into the masonry blocks
Each block will scale depending on how many are added. For instance, if only one feature is added, it will scale to 100% of the height and width of the masonry feature container. If two are added, they will each take up 50%.
The optimal image dimensions to use in the masonry section are 1400 x 640px, however, it's important to note that regardless of the size of your images, you could see some cropping on certain screen sizes, so avoid images with text or logos.
Add text and links
This is where you'll add each of your features. You can add a Heading, Subheading, and Link here if you wish (note that you do not have to use all or even any of these fields). You'll set the Text color (black or white) using the dropdown menu.
Mobile optimization
To optimize the mobile experience, features can be individually set to display only on the desktop layout, or on both the desktop and mobile layouts. The reason for this is that masonry features get stacked on mobile. Having six features enabled can mean quite a lot of scrolling for users, so you may want to limit the number to two or three. Set which ones Show on mobile by checking the corresponding box.