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. You can use Summary Blocks to display:
- Blog posts from Blog Pages
- Events from Event Pages
- Products from Store Pages
Portfolio Pages and gallery sections aren't supported.
- Blog posts from Blog Pages
- Events from Event Pages
- Images and videos from Gallery Pages
- Images and videos from Project Pages
- Products from Products Pages
Album Pages aren't supported.
It's not possible to add content directly to a Summary Block. For the best display, add thumbnail images to every item that will display in the block.
Add a Summary Block
To add a Summary Block:
- Click Edit on a page or post, then click an insert point. For help, visit Adding content with blocks.
- Under Summary, choose Wall, Carousel, List, or Grid.
- Use the Content tab to choose your content.
- Use the Layout tab to change the layout and edit layout settings.
- Use the Display tab to set how content displays in the block.
- Click Apply to save your changes.
For more detailed information about each step, follow the sections below.
Choose the content
In the Content tab of the Summary Block editor, choose the page to feature in the block. As you click a page, you'll see its content populate the Summary Block. Keep in mind:
- 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.
- 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.
Summary Block layouts
There are four Summary Blocks, and their behavior is consistent across all sites. You can change the layout in the Layout 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. Unlike the Grid layout, which displays items in even rows, the Wall layout displays items in offset rows based on the size of the content, creating a mosaic look.
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.
List Summary Blocks display items in one column with thumbnail images on one side and text on the other.
Grid Summary Blocks display items in an even grid. Items with uneven lengths have space between them.
Edit layout settings
In the Layout tab of the Summary Block, you can customize the size of and space between items. As you change the settings, you'll see a preview of your changes on the page. Your options depend on the layout.
Here are the layout options for Wall Summary Blocks:
Layout option | Use this to |
Column Width | Change the width of columns in the block. This changes the number of items per row and the size of each item. |
Gutter Width |
Change the 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. |
Text Size | Set text to display Extra Large, Large, Medium, or Small. These settings affect the title text. The Extra Large setting also affects excerpt text. |
Text Alignment |
Align text to the Left, Right, or Center of each item. |
Metadata Position | Set the location of the item metadata, like a date or author, to Above Title, Below Title, or Below Content. Select the type of metadata that appears in the Display tab. |
Here are the layout options for Carousel Summary Blocks:
Layout option | Use this to |
Header Text |
Add a custom title to display above the block. This way, you can avoid adding a separate Text Block. |
Aspect Ratio |
Select the aspect ratio for thumbnail images, which affects cropping. Select Auto to display thumbnails without cropping. |
Items Per Row |
Choose the number of items to display at a time. You can choose between 1 and 5. |
Text Size |
Set text to display Extra Large, Large, Medium, or Small. These settings affect the title text. The Extra Large setting also affects excerpt text. |
Text Alignment | Align text to the Left, Right, or Center of each item. |
Metadata Position | Set the location of the item metadata, like a date or author, to Above Title, Below Title, or Below Content. Select the type of metadata that appears in the Display tab. |
Here are the layout options for List Summary Blocks:
Layout option | Use this to |
Aspect Ratio |
Select the aspect ratio for thumbnail images, which affects cropping. Select Auto to display thumbnails without cropping. |
Image Size |
Set the size at which the items display. You can set the items to appear between 10% and 80% of the total width of the list. |
Image Alignment |
Align images to the Left or Right of the text. |
Text Size |
Set text to display Extra Large, Large, Medium, or Small. These settings affect the title text. The Extra Large setting also affects excerpt text. |
Text Alignment | Align the text to the Left, Right, or Center. |
Metadata Position | Set the location of the item metadata, like a date or author, to Above Title, Below Title, or Below Content. Select the type of metadata that appears in the Display tab. |
Here are the layout options for Grid Summary Blocks:
Note: Gallery Page and Project Page images in this layout open in lightbox slideshows. Clickthrough URLs disable the lightbox.
Layout option | Use this to |
Aspect Ratio |
Select the aspect ratio for thumbnail images, which affects cropping. Select Auto to display thumbnails without cropping. |
Column Width | Change the width of columns in the block.
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. |
Gutter Width | Change the space/padding between items. |
Text Size |
Set text to display Extra Large, Large, Medium, or Small. These settings affect the title text. The Extra Large setting also affects excerpt text. |
Text Alignment | Align the text to the Left, Right, or Center. |
Metadata Position |
Set the location of the item metadata, like a date or author, to Above Title, Below Title, or Below Content. Select the type of metadata that appears in the Display tab. |
Tip: Summary Block caption styles are vary depending on your site.
Edit display settings
In the Display tab of the Summary Block, you can set what content displays and how. As you change the settings, you'll see a preview of your changes on the page.
All layouts include the following options:
Display option | Use this to |
Number of Items |
Set the number of items to display in the block. You can display up to 30 items. |
Show Title |
Set the item titles to display in the block. Uncheck to hide the item titles. |
Show Thumbnail
|
Set the item thumbnail images to display in the block. Uncheck 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:
|
Show Excerpt |
Set the item excerpts or descriptions to display in the block. Uncheck 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. |
Primary Metadata |
Choose information to display most prominently with each item:
|
Secondary Metadata |
Choose additional information to display with each item:
|
Category Filter |
|
Tag Filter |
|
Featured Filter |
|
Item-specific options
Depending on the type of collection items you display in your Summary Block, you may see additional options.
Collection type | Additional display options |
Blog Page |
Show Read More Link - This option only appears if Show Excerpt is enabled. When this is checked, Read More links display under post content and above metadata. |
Events Page |
Event Timeframe - Select which events to display in the block: past events or upcoming events. To display both past and upcoming events, add two Summary Blocks with their own Event Timeframe selected. |
Products Page |
Show Price - When checked, product prices appear under product titles. Enable Product Quick View - When checked, enables Product Quick View. |
Style Summary Block text
Your Summary Block style options depend on which version of Squarespace your site is on.
Fonts
The title size follows your site's global fonts. To change the font family and title size:
- Open the Summary Block editor.
- Click Layout and check the Text Size.
- In the Home Menu, click Design, then Fonts.
- 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.
- Set the font size in Headings or Paragraphs based on the Summary Block's text size:
- Extra Large - Heading 2
- Large - Paragraph 1
- Medium - Paragraph 2
- Small - Paragraph 3
Colors
You can style text colors in the block. To change the colors:
- In the Home Menu, click Design, then click Colors.
- Click Section Themes, then click the pencil icon on the chosen theme.
- 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
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
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.