Summary Blocks present your content (blog posts, products, gallery or project images, or events) in magazine-style layouts. There are four Summary Blocks, and their behavior is consistent across all templates.
Summary Blocks are great for:
- Highlighting Blog Page and Gallery Page content on your homepage.
- Highlighting new or on-sale products on your homepage.
- Displaying blog posts in a layout that isn't available in your template.
- Highlighting events from an Events Page on your homepage.
- Changing the layout of your content without making drastic style changes.
Watch a video
Block comparison
This table explains the differences between Summary Block designs.
Wall Summary Block | Displays content in a masonry style grid |
Carousel Summary Block | Displays a set number of items at a time, with navigation arrows in the top-right corner for scrolling through content |
List Summary Block | Displays items in a single column with thumbnail images on one side and text on the other |
Grid Summary Block | Displays items in an even grid. There is space between items with uneven lengths. |
Note: The Summary Block can't open items in a new window. To open images in a new window, consider using the Gallery Block instead.
Step 1 - Add a Summary Block
- Open a page or post editor.
- Click an Insert Point or the +.
- Under Summary, select Wall, Carousel, List, or Grid.
- For more detailed steps, visit Adding blocks.
Step 2 - Select your content
In the Block Editor that appears, select the Blog Page, Gallery Page, Events Page, Project Page, or Products Page to feature in the block. In this example, we'll use a Blog Page.
- 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.
Step 3 - Edit the layout
Click the Layout tab to customize the layout options of the block.
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.
The Layout settings vary slightly by block. To learn more, visit their guides:
Step 4 - Filter what displays
Click the Display tab to select the information that displays in the block and filter content by specific criteria. 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.
Number of Items |
|
Primary Information to Display |
|
Event Timeframe |
|
Primary Metadata |
|
Secondary Metadata |
|
Category Filter |
|
Tag Filter |
|
Featured Filter |
|
If you choose to display a thumbnail, the block will pull an associated image from the first available image on this list:
- Item thumbnail (for a blog post, product, or event)
- Image Block (in a blog post)
- Gallery Block (in a blog post)
If the Summary Block pulls from a Gallery Page, all gallery images will display (up to 30).
Step 5 - Save
When you’re done designing the block, click Apply.
Step 6 - Switch between designs (optional)
Switch the design to a different block in the Layout tab of the Block Editor. This way, you change the design and behavior of the content without deleting and re-adding the block.
- Double-click on the block in the Editor.
- Click the Layout tab.
- Select Wall, Carousel, List, or Grid.
- Playing around with the settings until you find a design you like.
- As you make a selection, the preview on your page will change so you can view the changes in real time.
Step 7 - Switch between content sources
Change the content that appears in the block in the Content tab:
- Double-click on the block in the Editor.
- Click the Content tab.
- Select the Blog Page, Gallery Page, Events Page, Project Page, or Products Page to feature in the block.
- As you make a selection, the preview on your page will change so you can view the changes in real time.
More uses for Summary Blocks
Summary Blocks are versatile, and can help you share related content:
- Use a Summary Block to create a recipe or context index.
- Add links to related content at the end of a blog post or product item page.