Skip to content

Blog post templates

Four blog post layouts, each with its own complete set of settings in Theme Settings. Pick a layout per blog, then style every element of the post without touching code. Best for: article pages of any kind, from short news posts to long structured guides.

At a glance

Blog Templates 4 layouts

  • What it is: four templates you assign to a blog in HubSpot. Every element of the post (back link, tags, title, byline, featured image, body, share, subscribe, previous and next) is styled from Theme Settings.
  • Where the settings live: Theme Settings > Blog.
  • What is shared: the wording of every label, and which elements appear at all, come from the global Blog settings module.

One layout per blog, not per post

You assign a template to a blog in HubSpot's blog settings. All posts in that blog use it. To run two looks, use two blogs.

The four layouts

Layout Header Body Best for
Classic Centred column, featured image inside the reading column Single column Most blogs. The safe default.
Cover Full width photo band behind the title Single column Posts with a strong lead image.
Sidebar Full width header, then body beside a sticky rail Two columns Long, structured posts. The rail carries share and most read.
Split header Text on one side, image on the other Single column Editorial posts where the image is part of the header, not the article.

Cover needs a good photo

Cover uses the featured image as a full bleed background. If a post has no featured image the band falls back to a plain surface, so it is best on blogs where every post has artwork.

Choosing a colour scheme

Theme Settings > Blog > Color scheme sets Light or Dark for the whole post. Every element reads the scheme, so text, links, borders, cards and icons all flip together. Set the actual colours in Theme Settings > Light color scheme and Dark color scheme.

Check the Cover overlay against your scheme

Cover lays an overlay over the photo. On a Light scheme the title is near black, so the overlay should be light. On Dark the title is white, so the overlay should be dark. Set it at Blog post - cover settings > Cover image > Overlay gradient.

What you can style, per layout

Each layout has its own settings group, so changing Classic never affects Cover. The element groups are the same across all four:

Group Controls
Blog layout Content width, container alignment, section spacing, background
Spacing settings Every vertical gap in the layout, in one place
Back to blog link Colour, hover colour, font size, icon style and size, gap
Blog post tags Chip or plain text, background, text colour, border, radius, size
Blog title Heading level, colour
Date and read time Font size, colour, gap between items, date format, reading speed
Blog author with image Font size, colour, photo size and radius, gap
Featured image Ratio or fixed height, corner radius, shadow
Blog post content Font size per device, text colour
Blog subscribe form Card, title, description, form style and button
Blog social media share Icon style, size, colours, background, border, hover, gap, share label
Previous and next post Card, label, post name, gap between the two cards

Three groups appear only where they apply:

  • Cover image (Cover only): band height, focal point, overlay
  • Most read (Sidebar only): the popular posts list in the rail
  • Featured image (not on Cover, where the image is the band)

Spacing lives in one group

Every "space below this element" control sits in Spacing settings rather than on the element itself, so you can tune the whole rhythm of a post from a single place.

Layout specific settings

Cover

Cover image controls the photo band: minimum height per device, whether the height is fixed or full screen, where the text sits vertically, the focal point of the crop, and the overlay laid over the photo.

Blog layout adds sidebar width and the gap between body and rail, for desktop and mobile. The rail becomes a stacked column below the body on smaller screens.

Split header

Blog layout adds the split ratio (50/50 through 70/30), the breakpoint where the two columns stack, vertical alignment, whether the image sits on top on mobile, and the gap between columns. Split also has two content widths: one for the header, one for the body below it.

Common tasks

Goal Where
Change "Back to Blog" wording Blog settings module > Back to blog
Hide the tags on every post Blog settings module > Show/hide settings
Make the post narrower Blog layout > Maximum content width
More space under the title Spacing settings > Spacing below blog title
Change the share icon colour Blog social media share > Icon color
Turn the subscribe block off Blog settings module > Show/hide settings
Swap Light for Dark Blog > Color scheme

Every field

For the complete list of all 649 fields across the four layouts, with types, options, defaults and the condition that reveals each one, see the Blog post field reference.