Blog Index

Adds an infinite load listing of blog posts to a blog listing template

View a live demo of this module.

Content

  • Set how many rows to show per page
  • Set how many items to show in a row
  • Change text alignment
  • Show/hide tags (single or all)
  • Show/hide author name
  • Show/hide date
  • Show/hide read more link
  • Include a call to action box amongst the listing
  • Show/hide filters and search
  • Show/hide search
  • Set filters to be shown as dropdowns (Check if including more than one filter or if your filter contains more than a few options)
  • Add filters for tags or authors
  • Edit text strings used throughout module (view mor button text, search placeholder, search button aria label)

Styles

  • Set dark mode
  • Change call to action box background color
  • Set call to action dark mode
  • Edit module spacing

Note: Change these styles in your Theme Settings under Components > Blog Listing

  • Edit border radius and border color of post items

blog-listing-01


Usage Guide

The Blog Index module is specifically designed for blog listing pages where you want to showcase your HubSpot blog content in an organized, user-friendly format. This module works best on dedicated blog landing pages, topic cluster pages, or any page where you need to display multiple blog posts with advanced filtering and search capabilities.

When you drag this module into the HubSpot page editor, it automatically pulls from your blog posts and creates an infinite scroll experience, meaning visitors can continuously load more content without clicking through pagination. This improves user engagement and reduces bounce rates on your blog pages.

Content Strategy Tips: Use the call-to-action box feature strategically by placing it after every 6-9 blog posts to promote newsletter signups, premium content downloads, or service pages. The tag and author filtering options are particularly valuable if you publish content across multiple topics or have several team members contributing to your blog.

Layout Considerations: The rows and items-per-row settings should align with your overall page design. For desktop viewing, 2-3 posts per row typically works well, while mobile automatically adjusts to single-column layout. Consider enabling the search functionality if you have a large content library, as it helps visitors find specific topics quickly.

Theme Integration: Since this module inherits styling from your Theme Settings under Components > Blog Listing, any visual changes you make will apply consistently across all instances of this module on your site. This ensures brand consistency whether you’re using the Blog Index module on your main blog page, category pages, or author profile pages.

The infinite load functionality eliminates the need for traditional pagination, creating a seamless browsing experience that encourages deeper content exploration.