How to change read more links on summary blocks in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
In this tutorial, you’ll learn how to change the read more link in a summary block to anything you want it to be.
I am in the process of redesigning my blog to launch in Octoer 2023 and summary blocks are a big part of that redesign. Since tutorials are the core of my content, having a summary block say “learn how” instead of read more will be crucial.
The good news is that CSS makes this super easy. All we have to do is make the read more text a font size of 0, then use code to add text after it, changing the size of that text to whatever size we want.
If you have been watching my tutorials for a while, you know that I love to go above and beyond, so we’ll also be using some CSS to change this link so it looks like a button, and we’ll add a hover effect too. 😉
The codes from this tutorial are below. Be sure to watch the video so you’ll understand what parts need to change so it matches your own unique Squarespace site!
Video tutorial
Code Example
.summary-read-more-link{
font-size:0!important
}.summary-read-more-link:after{
font-size:1rem!important;
border:1px solid #333;
content: "LEARN HOW →";
background: #e5f5f6;
padding: 0 8px
}.summary-read-more-link:hover:after{
background:#333!important;
color:#fff!important
}
