How to Customize Summary Blocks in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

As great as the summary block feature is, the built in design can be pretty...well, boring! 😉

In this tutorial, we’re going to check out the selectors behind these summary blocks and use some custom code to make them look awesome. 

You can use these selectors with property & value codes to make your site look unique!

Consider trying borders, background color, box shadows, and any other combination of properties and values you want to customize.

Here are the selectors from this tutorial:

.summary-block-wrapper

.summary-item

.summary-thumbnail

.summary-content .summary-title

.summary-excerpt .summary-metadata

.summary-read-more-link

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous
Previous

Summary Block Hover Effects

Next
Next

How to create two columns of content for the mobile version of Squarespace