Skip to content
Mistral Studio

Blog

Connect your HubSpot blog to the theme, set up the listing and post pages, and use the blog-aware modules anywhere on the site.

Updated August 23, 2026 · 4 min read · Applies from version 1.0.0

Mistral Pro uses HubSpot's native blog. Two templates render it — Blog listing and Blog post — and four modules show posts on the blog and elsewhere.

Connect the blog

  1. Create or open your blog in Settings → Content → Blog.
  2. Under Templates, set Blog listing page to Blog listing and Blog post page to Blog post (both from Mistral Pro).
  3. Edit the listing page once (Templates → Blog listing page → Edit page): replace any content left over from a previous theme, pick the newsletter form, and set the heading.
  4. Blog-aware modules ship with Select a blog in their Blog field, which means "the account's default blog". Pick a specific blog there if you run more than one.

The listing page

The Blog listing template opens with five modules:

  1. Two-tone section heading — the blog's title.
  2. Featured blog post banner — one article put forward over a wide image with a dark gradient: category tag, date, reading time, title, excerpt, author and a read button. Which article: the latest post of the blog, a post you choose by URL or slug, or by content ID. Only on page 1 of the listing (on by default) hides it on the following pages. Banner ratio per device, gradient colour and strength, eager or lazy image loading.
  3. Blog posts grid with topic filters and pagination — the posts of the current listing as cards (featured image, category tag, date, reading time, excerpt, author row, arrow), two or three columns. The topic filters are a row of pills linking to HubSpot's native tag pages (up to 8 topics by default, plus an All pill). The pagination is crawlable: article counter, page numbers, previous / next links. The number of posts per page is the blog's own setting in HubSpot. An empty state (heading, text, optional button) is shown when the listing has no post.
  4. Newsletter signup band — pick your subscription form here. See Forms.
  5. Dark call to action banner.

The post page

The Blog post template renders the article with Blog post body with sticky author sidebar:

  • Header — back to blog link, topic badges, title, standfirst (the post summary), author and date row, reading time (computed from the post's word count), featured image (ratio 21/9, 16/9 or 3/2).
  • Body — the post content styled for reading, at a narrow, comfortable or full-column measure.
  • Sticky sidebar (right or left) — the author card (avatar, name, role taken from the first line of the author bio, with an editable suffix), share buttons (LinkedIn, X, Facebook, email), and an optional button.
  • Below the article, each behind its own switch: previous and next article (on), blog subscription form (off), HubSpot comments (off).

Labels — reading time suffix, date format (short, medium, long), share and navigation labels — are all editable in the Labels and formats group, so they can be translated per language variant.

After the body, the template shows Latest blog posts grid in its Posts related to the current article mode, then a dark call to action.

Show posts anywhere: Latest blog posts grid

A grid of post cards (featured image, category tag, reading time, excerpt, author) for any page. Posts source:

  • Latest posts of a blog — the default; the home page and the thank-you page use it.
  • Posts related to the current article — on a blog post, posts sharing its tags.
  • Posts carrying a given tag — enter tag slugs, separated by commas.

Number of articles (3 by default), Top up with the latest posts when the source does not return enough, one to three columns, and an empty state text. Section heading and button are optional.

The Featured blog post banner can also be placed on a website page to put one article forward, and the header's mega-menu can show the latest articles of a blog — see Navigation and menus.

See also