CMS-Blog

How to change the look of your Read More button

Last updated: May 31, 2018

Applies to:

Marketing Hub
marketing-basic-pro-enterprise
Basic, Professional, Enterprise

Changing the look of your Read More button on the blog listing page can be very useful if you want this button to stand out. Please note that this method requires a basic understanding of HTML.

 

Example

Screen_Shot_2013-09-04_at_1.55.00_PM
  • Create a CSS class that will hold the styling for the read more button. Add this class and any custom styling into your stylesheet.
  • Example code: 
.read-more-btn{
background: blue;
border-radius: 10px;
color: white;
}
  • Navigate to Content Design Manager or locate your blog template in your blog dashboard. Click the blog content module to select it in the inspector, then under the POST TEMPLATES section click on Edit Listing Template to access the listing page HTML.
  • Locate the following code within the listing template HTML:
<a class="more-link" href="{{content.absolute_url}}">Read More</a
  • Replace the more-link class with your new read-more-btn class. The code should now look like this:
<a class="read-more-btn" href="{{content.absolute_url}}">Read More</a>
  • Click Publish Changes.

Was this article helpful?

If you still need help you can get answers from the , or to contact support.