How to style ‘read more’ links for summary blocks in Squarespace 7.1

Summary blocks in Squarespace 7.1 are a powerful tool for showcasing blog posts across different pages. These blocks often include a ‘Read More’ link, encouraging visitors to click through and read the full article.

However, by default, the ‘Read More’ link might not match your site’s branding or design aesthetic. In this tutorial, you'll learn how to style these links using custom CSS, making them stand out or blend in—whatever suits your site's personality best.

Table of Contents

• Why Style the “Read More“ Link

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Style the "Read More" Link?

• Improve user engagement by drawing attention to the link

• Match your brand colors, fonts, and style

• Replace default underlined or unstyled links with custom buttons or text effects

• Enhance the visual hierarchy and user experience of your blog summaries

---

Step-by-Step Instructions

Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below

// SUMMARY BLOCK READ MORE LINK
.sqs-block-summary-v2 .summary-read-more-link {
  display: inline-block;
  padding: 10px 16px;
  width: 100%;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.sqs-block-summary-v2 .summary-read-more-link:hover {
  background-color: #ff5500;
  color: #fff;
}

---

Step 2: customise to match your brand

• background-color: Change to your brand’s primary button color

• color: Change the text color

• width: Adjust button width

• border-radius: Adjust for rounded or square buttons

• text-transform: Set to none, uppercase, or capitalize

• font-weight: Adjust for light, normal, or bold text

---

Key Takeaways

• The .summary-read-more-link class targets all ‘Read More’ links in summary blocks

• You can easily turn the link into a button-style call-to-action

• CSS transitions and hover effects help create a polished experience

FAQs

Will this style affect all summary blocks?
Yes, this will apply site-wide to all blocks using .sqs-block-summary-v2. You can target specific ones using page-specific IDs if needed.

Can I use a different font or size?
Definitely! Just add font-size: 14px; or font-family: 'YourFontName'; inside the CSS block.

---

---

Conclusion

Styling the ‘Read More’ links in your Squarespace 7.1 summary blocks is a simple yet powerful way to make your blog previews more engaging and visually appealing. Whether you're going for a bold call-to-action button or a minimalist text link with subtle hover effects, CSS gives you the flexibility to match your brand perfectly.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.