Stripey Summary Block

Stripey Summary.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.

// Stripey Summary Block Design //

.sqs-block-summary-v2 .summary-item {
  border-top: 10px solid #582dd2;
  background-color: #FEFEFE;
  background: linear-gradient(to bottom, #FAFAFA 50%, #EBEEF2 80%);
  border-radius: 20px 20px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.3) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.3) !important;
  box-shadow: 0px 5px 40px rgba(100, 100, 100, 0.3) !important;

// Stripey Summary Content Padding //

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

// Stripey Summary Block Button //

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  display: block;
  margin-top: 30px;
  text-align: center;
  background: #582dd2;
  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, background, 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 text align, 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