Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using the Wall Summary Block

The Wall Summary Block is one of four Summary Block designs. It presents your content (blog posts, products, gallery images, or events) in a masonry-style grid.

The masonry design is growing increasingly popular on the web, and you've likely seen it before, like on Pinterest. It works by positioning items in the best layout based on the available space while reducing any gaps, giving it the look of a mosaic. 

The Wall Summary Block is a great option if you want the modern masonry look without any custom code. They're popular with images and products. You can use this block to create a gallery that allows for varied image sizes without excessive cropping.

Step 1 - Add the Wall Summary Block

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Under Summary, select Wall from the menu.
  4. For more detailed steps, visit Adding blocks.

Step 2 - Select your content

In the Block Editor that appears, select the Blog, Gallery, Events, or Products Page to feature in the block.

  • Album Pages aren't supported at this time.
  • You can only feature content from one page in the Summary Block. However, you can add multiple blocks to a page to feature all of the content you want.

To learn more, visit Summary Blocks overview.

Step 3 - Edit the layout

Click the Layout tab to customize the layout options of the block. Here, you can change the size of and space between items.

The preview of the block 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:

Text Size Depending the emphasis you want to place on text (versus images), choose from Extra Large, Large, Medium, and Small. These settings affect the title. The Extra Large setting also affects excerpt text.

Column Width

Use the slider to adjust the width between columns formed in the block. This changes the number of items per row and the size of each item.
Gutter Width Specify the space/padding between items.

Text Alignment

Align the text to the left, right, or center of each item.
Metadata Position The location of the metadata of the item, like a date or author, depending on what you selected in the Display tab. Choose Above Title, Below Title, or Below Content.
Tip: Learn how your template styles the captions.

Step 4 - Filter what displays

Click the Display tab to select the information that displays in the block and filter content by specific criteria. For example, you can select to show or hide item titles, blog post authors, or filter items by a tag or category.

To learn more, visit Summary Blocks overview.

Step 5 - Save

When you’re done designing the block, click Apply.

Step 6 - Switch between designs

Switch the design to a different block in the Design tab of the Block Editor.

To learn more, visit Summary Blocks overview.

Step 7 - Switch between content sources

You can change the content that appears in the block in the Content tab.

To learn more, visit Summary Blocks overview.

Sample

Here's a sample Wall Summary Block with the default design settings:

Was this article helpful?
13 out of 16 found this helpful
Using the Wall Summary Block