HOW TO CUSTOMIZE YOUR "READ MORE" LINK ON SQUARESPACE

I've got another little snippet of code for all you Squarespace lovers today! This one is for that boring old "Read More" link that appears on a Summary Block. Especially if you are using Squarespace's Summary Block to showcase your blog posts, the "Read More" link is often a good spot to get your audience to engaged (ie: so that they read more!) with your featured posts. So how do you take it from boring black text to something that matches your brand? I've gotcher back.

There are a few little code changes you can make to jazz up the plain "Read More" to match your branding colors. Here are the steps:

  1. In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.

  2. Copy and paste the following code:

/*** READ MORE LINK - TEXT ***/
.entry-more-link a:not(.sqs-block-button-element) {
color: #F2CBCB !important;
}
.entry-more-link a:not(.sqs-block-button-element):hover { color: #444444 !important;
}

The pink highlighted text is where you can change your colors. Do not edit the other text. (You can also add this code to an individual page if you don’t want it to affect all “Read More” links on your site).

IMPORTANT ! !

Each template has a different method to define their "Read More" links. Please select the method for your template below, and then replace the red CSS code (.entry-more-link) with your template’s method. (If you’re template isn’t listed below, please try the links below, - many work for more than one template. If none of these work, feel free to email me with your specific template at hello@junemango.com).

Adirondack:.link

Five: .inline-read-more

Fulton: .summary-read-more-link

Horizon: .summary-read-more-link

Peak: .read-more

Mohave: .summary-read-more-link

Marquee: .entry-more-link

And that's it!


The following information was created for use with templates made with Squarespace 7.0.
Stay tuned for more tips and tricks for the new 7.1 platform!


need even more help with squarespace?

Skip the overwhelm and have your website
designed and launched in just 5 days!

LEARN MORE
Previous
Previous

ADDING BORDERS AND BOXED TEXT IN SQUARESPACE

Next
Next

MAKING DESIGN TRENDS UNIQUE TO YOUR BRAND - PART 1