Skip to content

Blog post templates

Template guide

Flexoraa ships four blog post layouts. They share the same content elements — back link, tags, title, meta, body, share, subscribe, prev/next — and differ only in how the header is arranged.

4 layouts one module per layout shared elements

Four blog post layouts, each with its own settings module. Pick a layout per blog, then style every element of the post without touching code, separately for each blog. 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 that layout's own settings module.
  • Where the settings live: the Blog layout module for that layout, edited once in global content and listed under Hidden modules. There is one module per layout, so you only ever see fields that apply.
  • One configuration per layout: each module holds one set of settings, used by every blog assigned that template. A blog wanting a different look is given a different layout, not a second configuration inside the same one.

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, each on its own layout.

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

Color scheme, inside the blog's entry, 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 layout module > Blogs > Wording > Back to blog
Hide the tags on every post Blog layout module > Blogs > 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 layout module > Blogs > 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.