Tag Archives: read more link

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

 

 

How to customize your read more blog link on squarespace blog

 

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:

<style>

/*** READ MORE LINK – TEXT ***/

.entry-more-link a:not(.sqs-block-button-element) {

color: #E9AEC4 !important;

}

.entry-more-link a:not(.sqs-block-button-element):hover {

color: #444444 !important;

}

</style>

 

The pink highlighted text is where you can change your colors. Do not edit the grey 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!! Easy peasy. 

 

If you’d like to do even more customization, I have a full #squarespacehack in the June Mango shop that allows you to add a background color (to make it more like a button), add a border, and make it wider. PLUS! You can use the code GRAM to get 50% off. 

similar-squarespace-hacks-10

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-08-08sqaurespace-hacks-code-snippets-for-squarespace-faq-01sqaurespace-hacks-code-snippets-for-squarespace-custom-pin-it-button-02sqaurespace-hacks-code-snippets-for-squarespace-image-filters-03