We use cookies to make HubSpot's community a better place. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. To learn more, and to see a full list of cookies we use, check out our Cookie Policy (baked goods not included).
Feb 22, 2021 7:22 AM - edited Feb 24, 2021 8:06 AM
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. Learn how to customize the design of the button or edit the Read More text .
To customize the look and feel of your Read More button, create a CSS class that will hold the styling for the read more button. Add this class and any custom styling into your stylesheet. Here's some example styling:
.read-more-btn{ background: blue; border-radius: 10px; color: white; }
To add a custom class to your Read More button:
<a class="more-link" href="{{content.absolute_url}}">Read More</a
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>
On your blog listing page, you'll see a preview of each blog post with a Read More link that opens the full blog post. To to change the Read More text to another language or phrase, you'll need to edit your blog's template.
<a class="more-link" href="{{ content.absolute_url }}">Read More</a>
No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.
Reply to postNeed help replying? Check out our Community Guidelines