Blog Post Hero
A hero specifically for blog post templates.
View a live demo of this module.
Content
- Show/hide author, date, and/or description
- Show either the publish date or last updated date
- Use meta description as the description or write a custom one
- Use a custom image instead of the featured image
- Set image either as a background or to the right of the post info
- If image is set as a background—add an overlay to it
- Include a down arrow
Styles
- Set Dark Mode
- Change max width of content
- Change text alignment
- Edit padding
Usage Guide
The Blog Post Hero module is specifically designed to create compelling opening sections for your blog post detail pages in the Spark Premium theme. This module automatically pulls key information from your blog post metadata while giving you extensive control over the visual presentation and content display.
When you drag this module into your blog post template through the HubSpot page editor, it intelligently connects to your post’s existing data—including the title, featured image, author details, and publication information. This eliminates the need for manual content entry while ensuring consistency across all your blog posts.
Best practices for implementation: Position this module at the top of your blog post template, immediately after your navigation. The hero works particularly well when you want to create a magazine-style layout or when your blog posts cover in-depth topics that benefit from a strong visual introduction.
The background image option is ideal for creating immersive, full-width headers that draw readers into your content. Use the overlay feature to ensure text remains readable across different images. Alternatively, the side image layout works better for cleaner, more minimal designs where you want the text to be the primary focus.
Take advantage of the date flexibility by showing the last updated date for evergreen content that you regularly refresh, or stick with publish dates for news and time-sensitive posts. The custom description field is particularly useful when your auto-generated meta descriptions are optimized for search engines but need adjustment for better readability in your hero section.
For design consistency, use the Dark Mode toggle when your blog post hero images are predominantly light-colored, ensuring optimal contrast with your text elements.