Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

Change HubSpot Blog Templates

How to set up the templates for the Blog Listing and Blog Post pages in HubSpot

icon-module-blog-post

BLOG

Configure the templates for Blog Listing and Blog Posts in HubSpot.

blog-template-settings-hubspot

FAQ

Why can't I find the blog template to create a website page?

The Blog Listing and Blog Post templates can not be used to create a website page.

They are set up with a different page type and need to be set up in your blog settings.

How can I change the template for existing blog posts? Changing the template in the settings will replace the template for all existing blog posts.
How do I change my HubSpot blog template?

To change the template for all blog posts, you only have to update the setting for the Blog Post Template.

You don't have to manually change every post.

Can I create my own blog template using Drag and Drop?

In October 2021, HubSpot introduced DnD for Blog Listings.

It wasn't rolled out evenly across all customer portals and there are other limitations in place that caused us to shift our plans to update the Blog Listing Template to be compatible with the new HubSpot drag and drop editor.

DnD for Blog Posts is still in Beta.

These updates are planned for v29, coming out in Spring 2023.

What Image Size do I use for the Featured Image?

For our blog and demo site, we use 1750px x 875px for the Featured Image.

HubSpot recommends a minimum height of 300 px.

What Image Size do I use for the Author Bio Pic?

For our blog and demo site, we use 300px x300px for the Author Image.

We also recommend uploading an image, not using the HubSpot Avatar as that results in the image being pixelated.

How do I turn off blog comments?

The visibility of blog comments is not a theme setting, it is a setting within HubSpot.

You can turn off blog comments under Settings → Blog → Comments

blog-comments

 

How do I change the date format?

The date format is managed via HubSpot Settings.

How to change your blog post date format.

 

Can I change the blog posts that show at the bottom of each post?

The post preview settings can be updated per post, if you want the same settings across all posts we recommend configuring a draft post and using it to clone for future posts.

Post Preview overview and settings.

 

Setup Instructions

POWER Theme includes a Blog Listing and Blog Post template that need to be set up in HubSpot settings, the Blog Author template will automatically be applied once the Blog templates are selected.

⚠️ If your blog is currently live with another theme or template in HubSpot, completing these steps will immediately change the appearance of your blog. ⚠️

Select Templates for Blog Listing and Blog Post in HubSpot

Settings  → Website → Blog → Templates

blog-template-settings-hubspot

Blog Post Template

  • Below the Blog Post Template, click Actions
  • Click Change Template
  • Choose your child theme from the list [POWER x YOURCOMPANY]
  • Choose the Blog Post Template
  • Click Done

Blog Listing Template

  • Below the Blog Post Template, click Actions
  • Click Change Template, this will open the settings tab of the Blog Listing Page
  • Click Advanced options to expand the settings
  • Scroll to the Template section
  • Click the Use different template button
  • Choose your child theme from the list (POWER x YOURCOMPANY)
  • Choose the Blog Post Template
  • Click Done

Additional settings in HubSpot for your Blog Listing page:

blog-listing-settings-hubspot

Choose Layout for Blog Listing Template

Settings  → Website → Themes → [your child theme] 

The layout options for the Blog Listing page are located in the Theme Settings.

Blog → Blog Listing

The options include:

  • Show Filter Bar: Shows/Hides the bar containing the blog categories/tags
  • Layout: Choose between a 1 column, 2 column, and 3 column layout option
  • Show Blog Post Author?: Displays the author name in the blog post previews, if activated.
  • Show Blog Post Date?: Display the date in the blog post preview, if activated.
  • Show Blog Post Reading Time?: Display the estimated (internally calculated) reading time of the blog post, depending on the length of the blog post content.
  • Show Blog Post Summary?: Displays the excerpt text on the listing page.
  • Get Summary from…: offers to pull the excerpt text either from the blog post directly or from the meta description of the blog post, which will be defined in the settings of the blog post editor.
  • Truncate Summary: limits the length of the excerpt text to a given number.
  • Pagination: We have provided the standard pagination method with arrows and a modern way of loading more blog posts by clicking on a “load more” button.

theme-settings-blog-blog-listing-layout

Blog → Blog Post

The options include:

  • Show Navigation Bar: Shows/Hides the navigation bar for jumping to the next/previous post or blog overview.
  • Show Related Posts: Shows/Hides the related posts section below the main blog post body.

theme-settings-blog-blog-post

Blog Post Template Options

Additionally, you can configure the blog posts directly in the blog post template or blog post (content editor). Once you have set up a blog post you will find several modules in the left sidebar of the content editor in HubSpot:

blog-post-settings

Blog → Blog Post Template → Blog Post Header

  • Layout → Choose Layout
    Choice of Full Width or Boxed
  • Layout → Show Blog Post Author
    Activating this shows the Author name/link in the post header.
  • Layout → Show Blog Post Date
    Activating this shows the Date in the hero. Adjust the date format for your blog in HubSpot settings.
  • Layout → Show Blog Post Reading Time
    Activating this shows the "minutes read" in the hero. This calculation is based on 200 words per minute.
  • Style → Color Scheme

    Choice of Light or Dark.

    Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

  • Style → Background

    Choice of Background Color, Background Image/Video, Background Gradient, or Transparent. Refer to Settings that apply to all Section Modules for more details about these choices.

There are 3 options to overwrite the Featured Image within the Blog Post Header (the featured image will still be used for social sharing, etc.)

blog-post-header-overwrite-feature

  • Style → Overwrite Post Image

    If you would like to replace the header image, we recommend using a width of at least 2000 px. 

  • Style → Overwrite Post Image

    If a custom video (*.mp4) is configured here, it will overwrite the background image. Please make sure that the file size is not too big. A general rule of thumb is to keep reducing the file size until it starts to noticeably be degraded. Try to export videos in 720p and with a bitrate under 700kb/s ( preferably 500kb/s ).

  • Style → Overwrite Post Image

    Enter your Youtube Link or ID. This will overwrite the previously configured background image or custom background video *.mp4

  • Style → Background → Background Position / Parallax Effect

    For the Image, you can choose where the focal point is within the content area. This will determine how the image is resized for smaller screens to ensure it is responsive and your content has the desired layout.

    You can also choose to enable the Parallax Effect which will scroll the image within the content area as the site visitor scrolls on the page.

    module-background-image-position-parallax

  • Style → Background → Background Image Overlay

    Option to add an overlay to the background image, as a single color or gradient.

    Setting the opacity for the color or gradient is required to see the image through the overlay.

    For the gradient option, you can either set an opacity per gradient color or an overall opacity for the entire gradient.

    module-background-image-overlay

  • Standard Text / Translation → Read Time Text

    The default is "%s min read", where %s is the placeholder for the number of minutes that particular blog posts needs to be read.

Blog → Blog Post Template → Previous Next Navigation

Previous, Home, and Next Links are automatically configured for the Blog.

Note: This module can be added to non-blog pages and configured manually, how to configure the Previous Next Navigation.

Blog → Blog Post Template → Blog Post

  • Social Sharing → AddThis Script Link
    In order to get the fixed scrolling social sharing icons, you need to use AddThis.
  • You can create your own AddThis Script to use for your blog
    • In the AddThis dashboard, add the tool Share Buttons and make sure to use the tool type Inline.
    • Choose the following settings: “Style” = “Standard Responsive”, “Size” = “Large (32×32)”, “Hide Network Names” = “Yes”, “Share Counter Type” = “None”.
    • Once, you have configured the tool click the button “Get the code”. There you will find your AddThis script link that is needed to configure in the module, e.g. //s7.addthis.com/js/300/addthis_widget.js#pubid=YOUR_ID.
  • Settings → Blog → Social Sharing → Social Sharing Buttons
    • If you use AddThis, please make sure to deactivate all HubSpot social sharing buttons for your blog in the settings. 
  • Layout → Float AddThis Social Sharing Items 
    By activating this option you get the floating/fixed scrolling effect on the AddThis social sharing icons.
  • Layout → Show Author Box? 
    Activating this shows an author box at the end of the blog post.

author-box-blog-post-setting

Blog → Blog Post Template → Blog Post Preview

Additional blog posts are automatically included below the blog content.

Full overview and detailed setup instructions for Sec Post Preview module.

Configurations

BLOG LISTING ONE COLUMN LAYOUT

blog-1-column-layout

Blog Listing > Layout

One Column

Blog Listing > Filter Layout

List

BLOG LISTING TWO COLUMN LAYOUT

blog-2-column-layout

Blog Listing > Layout

Two Columns

Blog Listing > Filter Layout

List

BLOG LISTING THREE COLUMN LAYOUT

blog-3-column-layout

Blog Listing > Layout

Three Columns

Blog Listing > Filter Layout

List

Next Steps

Congratulations, you've transformed the POWER theme into your custom website theme! Before you jump into learning the different module types, check out CMS Hub Basics and add it to your bookmarks to have all the CMS Hub resources in one place.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.