webdew-logo-new_v2-1
   
webdew-logo-new_v2-1
Close
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
website-green-icon
Websites
  • Website Designing
  • Website Development
  • Website Migration
  • HubSpot Website
  • WordPress Website
  • Growth-Driven Design
video-blue-icon
Videos
  • 3D Videos
  • 2D Animation
  • Whiteboard Animation
  • Video Ads
  • Explainer Videos
  • Testimonial Videos
  • Onboarding Videos
  • Tutorial Videos
  • Social Media Videos
  • Product Demo Videos
marketing-yellow-icon
Marketing
  • Inbound Marketing
  • Inbound Consulting
  • Marketing Automation
  • Search Engine Optimization
  • Brand Domains
hubspot-red-icon
HubSpot
  • HubSpot Apps
  • HubSpot Themes
  • HubSpot Migration
  • HubSpot Onboarding
  • HubSpot Management
  • HubSpot Development
  • HubSpot Audit
  • Free HubSpot Demo
  • HubSpot Diamond Partner
webdew-logo-new_v2-1
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

Create blog template in HubSpot Boilerplate with this easy guide

How to create a blog listing page in HubSpot Boilerplate?-vbh
Tag: HubSpot
Author: Jagroop Singh
Jagroop Singh
Quick Links

Subscribe to Our Blog

Never Miss Any Update From Us !

There is no doubt about the significance of blogging in today's social media marketing environment. Whether you are a small business or a multinational firm, blogging has become indispensable to your content marketing strategy. 

Do you know what makes a blog post? Quality content, impressive title, author bio, tags, meta description, URL, and featured image. Did we miss something? Ever heard about blog listing? 

Well, listing a blog is as important as composing the blog itself. Besides, listing a blog makes it easier for people to find your blog on search engines.

This article will explain the standard markup for blog page templates and outline the steps to set up a blog listing page and blog template in HubSpot Boilerplate.

So let's get started!

Getting started with a blog page 

Blogs on HubSpot CMS include blog listing pages and individual blog posts. Every blog post within a blog is rendered using a single blog post template. 

The blog index or the blog listing template is what the users see while navigating to the blog's URL. This template is typically used to list summaries, titles, and featured images of all of the posts on the blog. Besides, it displays pagination to get to the previous posts.

How to create a blog on HubSpot CMS using blog template?

First things first, I recommend you get some basic knowledge of front-end technologies like HTML, CSS, and HubSpot CMS for the absolute beginner. 

While creating a blog on HubSpot, we need two blog templates.

  • Blog index Template - Here, all blog posts are displayed, and you can click on the blog post that you are interested in learning to get redirected to the blog post. 
  • Blog Post Template - It is required to display the content of the blog post.

When we set up a boilerplate, it provides default templates of blog index and blog post.
default-blog-post-template

You can edit your code and clone this and make your template design according to your design needs. I recommend you a clone and edit the template, remove the code blocks you don't need, and use the code blocks you require.

Let us make a blog listing template and learn the basic things which are required in every blog template.

Every web page header footer is important, and mostly the header footer for websites remains the same, so you don't need to make a different header footer for your blogs. If you need, you can make it, but in most cases, header footers are global.

We will cover both Blog templates in this blog, i.e., Blog Index and Blog Post.

HubSpot CRM platform- affiliate

Blog Index template

Every blog post template includes a blog listing, blog post title, blog post link, and blog featured image.

  • Blogs Listing - This shows a listing of all the blog posts. In the HubSpot boilerplate default blog index template, we can see a section of the blog index.

blog-listing-code
We have to use this HubL code for our blog listing. We may write HTML code as our design needs or also can use the default that we have in the index template. It would be better to write your own HTML code and place the HubL blog code in it.

Guide to use HubSpot blogging software to boost business productivity

In the image, you can see a custom HTML code, and classes are used, and HubL code is used with it.

custom-html-code-for-blog-listing
You can use HubL codes to show particular blog details on your blog template as per your design requirements.

  • Blog post title or post heading- Create blog template in HubSpot Boilerplate with this easy guide It shows the blog post heading. You can use it in the HTML tag and then style.
blog-post-title
  • You can use it in the blog listing and blog post templates.
  • Blog Post Link-  you have to use it in anchor tag as href. You can also place a blog post image or content name, or both in this anchor. When the user clicks on it, this code redirects the user to the listing page of the blog post page on which the user clicks.
blog-post-link
  1. We simply need to add the URL and content name in the tag, so when the user clicks on content, he gets directed to the post.
  • Featured image- It is used to display the featured image of the blog.

blog-featued-image

I hope the example helps you understand how to use a blog hub using HTML.

Now let's discuss some predefined modules that can be used in a blog template.

Migrate blogs from HubSpot to WordPress with this easy guide

Site search input

This module provides the search functionality for searching the blog post. It also has other search options like searching landing pages and web pages, but you should only enable the blog post search and disable the other search options. 

To do this, follow these steps:

  • Just search the module in the design manager.

site-search-input

  • This is the HubSpot predefined module, so you can't edit it. Therefore,  to enable the edit option, you have to clone this module and rename it as per your choice and move the cloned module to your project folder.

clone-module

  • You can use this module in your blog template.
  • For using any module in the blog template, use this code and change the module name.    

change-module-name

Blog tag filter

This module is used for giving tag filter functionality in the listing template. The tags given to all blog posts are automatically added in the dropdown.

blog-tag-filter

Here you can see posts by using the selected tag.
find-blog-using-selected-tagNote that the process is the same for using the following modules like that of site search.

Social share

  •  This module is used for sharing a blog post on your social media accounts.

social-share-module

  • On clicking the respective social link, it redirects you to your social account post.
How to manage social media in 10 minutes using HubSpot social tool?

Post filter

  • This module displays the list of tags used in all posts of the blog. On clicking tags, the user can see the post related to the tag.

blog-post-filter

  • It's similar to the Blog tag filter, but there is no dropdown. So, it shows the list of tags directly.

blog-post-filter-module

Pagination

  • At last, in the blog index template, you need to apply pagination in your blog listing.
  • Blog listing pages provide auto-generated pagination to allow visitors to browse through your blog posts easily.

blog-pagination

  • The Boilerplate blog supports simple, number pagination using the following markup. You can see the pagination code in the default blog index template.

pagination-code

Blog Post template

The way of implementing the template is the same as the blog index template. Here we can use all HubL code and modules that we have used in the blog index. But in the blog post, we display the post content in place of the blog post listing. Here we use the following HubL code.

blog-post-template-code

This HubL code gives the option to add and edit the content on post pages. This is where the content is written. It is basically the main body of the blog post. You can use this with HTML div tags for better control of the content.

Rest everything is the same as the blog index template.

Know the actual HubSpot CMS cost to create powerful websites

Wrapping Up

Well, there you go, folks. That was all about blog template in HubSpot Boilerplate. Hope you find this article useful. If you have any queries, feel free to ask.

And if you are new to HubSpot and need some help with HubSpot blogging software or HubSpot CMS onboarding, do get in touch with us now. Our team of HubSpot experts will take care of everything for you! 

Editor: Richa Sharma

reasons to use HubSpot premium templates

Related Blogs

How to create a blog on HubSpot CMS using blog template?-vbh
HubSpot

How to Create A Blog On HubSpot CMS Using Blog Template? (Easy Steps)

7 Things to check before purchasing templates from HubSpot marketplace-vbh
HubSpot

7 Things to check before purchasing templates from HubSpot marketplace

How to edit existing theme template in HubSpot: A step by step guide-vbh
HubSpot

How to edit existing theme template in HubSpot: A step by step guide

review-star

Based on 1000+ Reviews on

footer-dot-logo-img
  • Hubspot_Logo-icon
  • clutch_Logo-icon
  • upwork_Logo-icon
  • designrush_Logo-icon
  • goodfirms_Logo-icon
  • g2_Logo-icon
WE ARE GLOBAL
  • US-flag
  • CA-flag
  • IN-flag
  • GB-flag

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

Copyright © 2019 - 2021 Webdew Labs Inc. All Rights Reserved

Copyright © 2016 - 2021 Webdew Private Limited. All Rights Reserved

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

WE ARE SOCIAL
  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
Terms of Services
Privacy Policy