How to change read more link text on a Squarespace summary blocks

In this tutorial, you’ll learn how to change the read more link in a summary block to anything you want it to be.

With tutorials being the core of my content, having a summary block say “learn how” instead of read more is important, but it’s impossible to update that text using the features we currently have.

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, 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!

Here are the codes from this tutorial. Be sure to update the values style to make this work for your own unique website design.

.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
}