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

Summary Blocks

Use Summary Blocks to display content from certain collection pages, such as blog posts or products, in a variety of layouts.

Summary Blocks are great for:

  • Highlighting collection items on your homepage.
  • Displaying blog posts or products in a layout that isn't available otherwise.
  • Changing the layout of your content without making drastic style changes.
  • Adding links to related content at the end of a blog post or product details page.
  • Creating recipe or content indexes.

Watch a video

What content displays

Summary Blocks pull content from certain collection pages on your site. Before adding the block, add content to a supported collection page. For the best display, add thumbnail images to every item that will display in the block. It's not possible to add content directly to a Summary Block.

You can use Summary Blocks to display:

Portfolio Pages and gallery sections aren't supported.

Album Pages aren't supported.

Add a Summary Block

To add a Summary Block:

  1. Click Edit on a page or post, click an insert point, then click Summary. For help, visit Adding content with blocks.
  2. In the Content tab, choose what content displays.
  3. Click the Design tab to change the layout and edit layout settings.
  4. Click outside the block editor when you're done. Your changes save automatically.

For more detailed information about each step, follow the sections below.

Choose the content

In the Content tab of the Summary Block editor, click Select a Page to choose the page to feature in the block. As you click a page, you'll see its content populate the Summary Block.

For Events Pages, you can choose an Event Time Frame to display either Upcoming events of Past events.

Keep in mind:

  • You can only feature content from one page per Summary Block. However, you can add multiple blocks to a page to feature all of the content you want.
  • You can change the page that Summary Blocks pull content from at any time.
  • The title text links to the content directly. The thumbnail images also link to the content, except for Gallery Page and Project Page items on version 7.0, which open in a lightbox on the Summary Block page.

Choose metadata

Click Primary Metadata and Secondary Metadata to choose information to display most prominently with each item:

  • Depending on the item, you can select Date Posted, Event Date, Event Time, Category, Tags, Author, Location, Comments, or None.
  • Placement of this information varies by layout.
  • If an item doesn't have the metadata you select, it won't display with the item. For this reason, we recommend filling out all fields in every collection item if you want this information to display in the block.

Filter the content

Click Filter Items to apply different filters to the content pulled from the collection:

  • Category - Select a category to only display content in that category
  • Tag - Select a tag to only display content with that tag
  • Featured Only - Switch this toggle on to only display content designated as featured, like featured blog posts

Keep in mind, you have to add categories and tags or set items as featured within the collection page itself to ensure items appear with these filters. It's not possible to change these settings in the Summary Block.

Summary Block layouts

There are four Summary Blocks, and their behavior is consistent across all sites. You can change the layout in the Design tab of the Summary Block. As you choose a layout, you'll see a preview of it on the page. Here are examples of blog posts in each layout.

Wall Summary Blocks display items in a masonry style grid. Instead of even rows, the Wall layout displays items in offset rows based on the size of the content, creating a mosaic look.

Example of a Wall Summary Block.

Carousel Summary Blocks display a set number of items in a row, with navigation arrows in the top-right corner for scrolling through more content.

Example of a Carousel Summary Block.

List Summary Blocks display items in one column with thumbnail images on one side and text on the other.

Example of a List Summary Block.

Grid Summary Blocks display items in an even grid. Items with uneven lengths have space between them.Example of a Grid Summary Block.

Edit design settings

In the Design tab of the Summary Block, you can customize the number of items that display, the alignment of text, and the size of and space between items. As you change the settings, you'll see a preview of your changes on the page.

All layouts include the following options: 

Design option Use this to
Number of Items

Set the number of items to display in the block. You can display up to 30 items.

Text

Choose the size of the text to S, M, L, XL (not available in Wall layout). The XL setting also increases the size of excerpts and descriptions.

Choose the alignment of the text to LeftCenter, or Right.

Title

Switch the toggle on to show item titles in the block. Switch off to hide the item titles.

Thumbnail

 

Switch the toggle on to show item thumbnail images in the block. Switch off to hide the item thumbnail images.

When displaying Gallery Page or Project Page items, the image displays in the block. When displaying blog posts, events, or products, the block will pull the first available image on this list:

  1. Item thumbnail (for a blog post, product, or event)
  2. Image Block (in a blog post or event)
  3. Gallery Block (in a blog post or event)

 

Excerpt

Switch the toggle on to show item excerpts or descriptions in the block. Switch off to hide the item excerpts or descriptions.

When displaying blog posts, the excerpt displays in the block. When displaying events, Gallery Page images, products, or Project Page images, the item description displays in the block.

Metadata Position

Select the location of the item metadata, like a date or author, to Above TitleBelow Title, or Below Content. Select the type of metadata that appears in the Content tab.

Layout-specific options

Each Summary Block has additional design options specific to its layout.

Here are the design options for Wall Summary Blocks:

Design option Use this to

Size and Spacing

  • Change the Column Width of columns in the block. This changes the number of items per row and the size of each item
  • Change the Gutter Width of horizontal space/padding between columns. Vertical padding/space between rows adjusts automatically depending on the items in the block, but doesn't correspond to this setting

Here are the design options for Carousel Summary Blocks:

Design option Use this to

Items Per Row

Set the number of items to display at a time. You can choose between 1 and 5.

Aspect Ratio

Select the aspect ratio for thumbnail images, which affects cropping. Select Auto to display thumbnails without cropping.

Header Text

Add a custom title to display above the block. This way, you can avoid adding a separate Text Block.

Here are the design options for List Summary Blocks:

Design option

Use this to

Aspect Ratio

Select the aspect ratio for thumbnail images, which affects cropping. Select Auto to display thumbnails without cropping.

Image Alignment

Align images to the Left or Right of the text.

Here are the design options for Grid Summary Blocks:

Note: Gallery Page and Project Page images in this layout open in lightbox slideshows. Clickthrough URLs disable the lightbox.
Design option Use this to

Aspect Ratio

Select the aspect ratio for thumbnail images, which affects cropping. Select Auto to display thumbnails without cropping.
Size and Spacing
  • Change the Column Width of columns in the block
  • Change the Gutter Width of space/padding between items
Note: Items in Grid Summary Blocks are left-aligned, and a narrow Column Width may cause extra space on the right side of the block.
Tip: Summary Block caption styles vary depending on your site.

Item-specific options

Depending on the type of collection items you display in your Summary Block, you may see additional options.

Collection type  Additional design options
Blog Page

Read More Link - This option only appears if Show Excerpt is enabled. When this is enabled, Read More links display under post content and above metadata.

Products Page
  • Price - When enabled, product prices appear under product titles.
  • Enable Product Quick View - When switched on, enables Product Quick View.

Style Summary Block text

Your Summary Block style options depend on your site's version.

Fonts

The title size follows your site's global fonts. To change the font family and title size:

  1. Open the Summary Block editor.
  2. Click Layout and check the Text Size.
  3. Open Site Styles and click Fonts.
  4. Under Global Text Styles, set the font family in Paragraphs. The font family follows your Paragraphs setting regardless of the Summary Block's text size.
  5. Set the font size in Headings or Paragraphs based on the Summary Block's text size:
    • XL - Heading 2
    • L - Paragraph 1
    • M - Paragraph 2
    • S - Paragraph 3

Excerpts and descriptions display at a fixed size, but the XL text setting increases the size of excerpt and description text.

Colors

You can style text colors in the block. To change the colors:

  1. While editing a page, open Site Styles, then click Colors.
  2. Hover over your color theme and click the pencil icon.
  3. Under Summary Block, change the colors with these tweaks:
    • Header Text Color
    • Title Color
    • Excerpt Color
    • Read More Color
    • Primary Metadata Color
    • Secondary Metadata Color

When you're done making style changes, hover over Done and click Save.

Use Site Styles to set the Summary Block Title Font and Summary Block Title Color in these template families:

  • Adirondack
  • Avenue
  • Aviator
  • Bedford
  • Momentum
  • Montauk
  • Pacific - Title Font and Title Color

Excerpts and descriptions display at a fixed size, but the XL text setting in the Summary Block's Design tab increases the size of excerpt and description text.

It's not possible to change the size of the Header Text that appears above the block in the Carousel layout.

Summary Blocks on mobile

Summary Blocks on mobile may display differently than on a computer, depending on the layout.

Wall Summary Blocks display in a stacked layout, but images retain their individual aspect ratios.

Carousel Summary Blocks retain their carousel layout and display two items at a time.

List Summary Blocks display the same on mobile.

Grid Summary Blocks display in a stacked layout.

Was this article helpful?
181 out of 608 found this helpful