Hero - Blog Post
A hero for the blog post template to display blog post information.
Note: This module is only available for use on Blog Post templates.
View a live demo of this module.
Content
- Choose to show/hide back link, tag, read time, date, author, social share, and/or featured image.
- Choose to show all tags instead of just one
- Choose what platforms to show in the Social Share (defaults to Facebook, Twitter, LinkedIn, and Email)
- Edit strings used within the module (Back Link, Read Time, and Author text)
Styles
- Add a background color, image, or gradient to the module
- Edit padding of the module
- Add a load in animation to the featured image
- Add an overlap to the featured image to have it hang over the module (only visible if this module and the section below it have differing backgrounds)
About This Module
The Hero - Blog Post module serves as the primary header section for your blog post template, creating a professional introduction that displays essential post metadata and navigation elements. Unlike standard page hero modules, this specialized component is designed specifically for blog content and automatically pulls information from your HubSpot blog post settings.
When you add this module to your blog post template in the HubSpot page editor, it creates a cohesive reading experience by presenting key details like publication date, author information, estimated read time, and relevant tags in an organized, visually appealing format. The module works particularly well for SaaS and technology companies using the Framework theme, as it maintains the clean, minimal aesthetic while providing comprehensive blog post context.
Best practices for implementation: Position this module at the top of your blog post template, immediately after your site navigation. The back link feature helps readers return to your blog index, improving site navigation and reducing bounce rates. Consider enabling the featured image overlap option when your blog content section uses a different background color or pattern – this creates visual depth and professional polish.
The social sharing functionality is particularly valuable for technology companies looking to increase content reach. You can customize which platforms appear based on where your audience is most active, ensuring maximum engagement potential.
Template setup tip: Configure the default strings for “Back Link,” “Read Time,” and “Author” text to match your brand voice in the module settings. This ensures consistency across all blog posts without requiring content editors to manually update these elements for each post.