Customizing the style and text of Read More links inside Summary Blocks (7.0, 7.1 CE & 7.1 FE)

• 00
• 01
• 02
• 99

Have you ever wanted to replace the text of Summary Block Read More links with your own little phrase?

What about turning those links into buttons?

If you're answer is yes to either (or both!) of those questions, then today's tutorial is for you!

We'll be diving into how we can fully customize Read More links for Summary Blocks – for any Squarespace version – regardless of whether you’re using the grid, carousel, list or masonry layout.

Sounds good? Then jump right into the video!

Note: this customization uses Code Injection, so you’ll need to be on the Squarespace Business plan or higher.

Tutorial

Overview & timestamps

1. 00:00 – Intro

2. 01:01 – Styling the read more links for Summary Blocks as buttons
   We’ll jump right into the CSS styling portion of this customization by looking for a way to target the Read More links within a specific block on the site, and setting up some properties to change the background color, font color, font family and make other minor adjustments.

3. 05:49 – Changing the text of read more links for Summary Blocks
   Once we’re done with the styles, we’ll move onto the fun part and create the little script that will help us easily swap the native link/button text for our own phrase! The key thing about this part of the process is to target the container that’s actually holding the original text inside the HTML, and then decide if we want to apply the customization to just one block on the site or all of them at once to tweak our selector if needed. After this is all in place, it’s just a matter of picking our words and adding them within the quotes of the function!

Well, how about that? Easier than expected, right?

There you have it, now you can go ahead and modify your client’s Read More links across the entire site or on a block-by-block basis to achieve a super custom look!

Hope you found this one helpful.

Until next time,

B.

---

Full code

jQuery library (if needed)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

To change the text of Read More links

<!-- CUSTOMIZING THE TEXT OF READ MORE LINKS INSIDE SUMMARY BLOCKS (7.0, 7.1 CE, 7.1 FE) -->
<script>
    $('#BLOCK-ID-GOES-HERE .summary-read-more-link').text('Read the summary');
</script>

To turn the Read More links into buttons

//CUSTOMIZING THE STYLE OF READ MORE LINKS INSIDE SUMMARY BLOCKS (7.0, 7.1 CE, 7.1 FE)
#BLOCK-ID-GOES-HERE .summary-read-more-link {
  background-color: #152944;
  color: white;
  display: inline-block;
  font-family: 'itc-avant-garde-gothic-pro';
  margin-top: 10px;
  padding: 1em 2em;
}