Damn Beautiful Summary Block

Install Steps

Damn Beautiful Summary Blocks

Submitted by Moov Labs Works with all template families

Screen Shot 2019-05-29 at 7.37.35 AM.png

Step One

Add a Summary Block to the page you’d like your summary block on.

Step Two

Content Tab: Select where you want to grab your content from. This can either be from a blog, gallery, events, or product page.

Layout Tab: Select either the wall or grid layout option and adjust your layout settings to your liking.

Screen Shot 2019-05-29 at 7.57.46 AM.png

Display Tab: Adjust these settings to your liking. We recommend having all settings check marked.

Save the page when done.

Step Three

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Four

Copy and paste the code below into the Custom CSS Editor box.

// DB Summary Block Design //

.sqs-block-summary-v2 .summary-item {
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;

// DB Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {
    padding: 20px 40px 20px 40px;

// DB Summary Block Button //

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(to right, #F07C63, #E45372);
  color: white;
  border: 0px solid white;
  border-radius: 50px;
  padding: 10px 20px;

Step Five

There are quite a few values you can change, so we sectioned them so they are easier to find.

  • Summary Block Design: Adjust the background color, border radius, and drop shadow to your liking.

  • Summary Content Padding: Change the padding around the text content of the summary block.

  • Summary Block Button: This turns the read more link into a button. Adjust the background color, color, border, border radius, and padding to modify the button style.

  • Please keep in mind that this plugin only works with Summary Blocks with a wall or grid layout design.

Save and refresh the page. 👍

Moov Labs