How to Build a Custom Blog Listing Template in HubSpot

Blog /
How to Build a Custom Blog Listing Template in HubSpot

31 January, 2025

Creating a Custom Blog Listing Template in HubSpot allows you to tailor the layout, style, and functionality of your blog listing page to align with your brand’s needs. HubSpot provides built-in templates, but customizing your own enables greater control over the design and user experience.

Here’s a step-by-step guide to building a custom blog listing template in HubSpot.

What is a Blog Listing Template?

A Blog Listing Template in HubSpot controls how multiple blog posts are displayed on a single page. It’s typically the main blog homepage, featuring a list of recent blog posts with titles, summaries, featured images, authors, dates, and other metadata.

Key Components of a Blog Listing Page

Blog Post Title – The name of each blog post.
Featured Image – A thumbnail image for each post.
Summary/Excerpt – A short description of the post.
Read More Link – A button or link to the full post.
Publish Date & Author – Metadata showing the author and date of publication.
Categories & Tags – Labels for filtering blog content.
Pagination – Navigation for moving between multiple pages of posts.

Steps to Create a Custom Blog Listing Template

Step 1: Access the HubSpot Design Manager

Log in to your HubSpot account.
Navigate to Content > Design Manager.
Now select your theme or folder where you create blog templates. Right Click on File or Folder > New File to create a new template.
Choose HTML & HubL as the file type.
Select "Blog Listing" as the template type.
Name the template (e.g., custom-blog-listing.html) and click Create.

Step 2: Set Up the Basic Template Structure

HubSpot uses HubL, its proprietary templating language. Start with a basic structure:

Step 2_ Set Up the Basic Template Structure Explanation_-1

Step 3: Style the Blog Listing Page (CSS)

To enhance the appearance, apply custom styles.


.blog-listing {

  max-width: 900px;

  margin: auto;

  padding: 20px;

  font-family: Arial, sans-serif;

}

.blog-post {

  border-bottom: 1px solid #ddd;

  padding: 20px 0;

  display: flex;

  align-items: center;

  gap: 20px;

}

.blog-post img {

  max-width: 150px;

  height: auto;

  border-radius: 8px;

}

.blog-post h2 {

  font-size: 22px;

  margin: 0;

}

.read-more {

  display: inline-block;

  margin-top: 10px;

  color: #0073e6;

  text-decoration: none;

  font-weight: bold;

}

.read-more:hover {

  text-decoration: underline;

}