Blog post - Author & Tag Page settings¶
A blog-listing module that adds a centered spotlight header to your Author and Tag archive pages. On an author page it renders the avatar, name, bio, social links, and a post count; on a tag page it renders an icon badge, the tag name, and a post count. Best for: giving author and tag archive pages a proper heading instead of a bare post list.
📷 Hero image
Target file: assets/img/blog-author-tag-page/hero.webp
A centered spotlight header at the top of a blog author listing page on a Light background. Show a round author avatar centered above the author name in a bold Dark heading, followed by a short bio line, with the start of the post grid visible below. Captured at desktop width.
At a glance¶
Blog Listing Configuration
- What it does: renders a centered spotlight header at the top of a blog listing. On an author page it shows the author avatar, name, bio, social icons, and post count. On a tag page it shows an icon badge, the tag name, and post count. The author and tag content is pulled automatically from HubSpot, so you rarely retype it.
- Best used for: blog Author listing pages and blog Tag listing pages that need a clear, branded header above the post grid.
- Not the right fit if: you want to style individual posts (use Blog Section or Blog Recent Post) or the main blog index header.
- 🔗 Live demo: (add demo link)
This is a configuration module
It lives in the blog listing template and only renders on author or tag pages. The author name, avatar, bio, and social links come from the author record; the tag name comes from the tag. You mostly set labels and styling here.
Add it to your page¶
- Open the blog listing template in the HubSpot design manager or template editor.
- Confirm the Blog post - Author & Tag Page settings module is placed above the main blog listing.
- It stays hidden on the standard blog index and only appears on author or tag pages.
- Set the Post count label (for example "Articles") and, for tag pages, choose an Icon for the badge.
- Style the Author page header and Tag page header groups on the Style tab, then save the template.
Common setups¶
| Goal | Setting |
|---|---|
| Author header with avatar and bio | Renders automatically on any author listing page |
| Tag header with an icon badge | Set the Icon under Click to update content › Tag page header |
| Change "Articles" to your wording | Edit Post count label in each header group |
| Bigger author avatar | Style tab › Author page header › Avatar › Avatar size |
| Left-align the header | Style tab › header group › Layout › Alignment = left |
| Section background | Content tab › Section background settings › Type |
Field reference¶
The editor has a Content tab (labels and background) and a Style tab (the full look of each header).
Content tab¶
Section background settings
| Field | Type | What it does | Default |
|---|---|---|---|
| Type | choice | Background type for the section: color, image, or video. | color |
| Upload background image | image | Background image when Type is image. | - |
| Video | file | Background video when Type is video. | - |
Click to update content
Author page header
| Field | Type | What it does | Default |
|---|---|---|---|
| Post count label | text | The word after the number in the author post count. | Articles |
Tag page header
| Field | Type | What it does | Default |
|---|---|---|---|
| Icon | icon | The glyph shown in the tag icon badge. | - |
| Post count label | text | The word after the number in the tag post count. | Articles |
Drag to section name / Developer use only
- Section name: an internal label for the drag-to-section arrow target.
- Add custom CSS here: per-module CSS injection field.
Style tab¶
Author page header
- Layout: alignment (default
center) and intro max width (720). - Avatar: size (132), round corner (default
round-100, fully round) with custom option, ring width (5) and ring color (default white), spacing under (sb-xl). - Name: show name as (default
h1), color, spacing under (sb-l). - Bio: color, max width (640), spacing under (
sb-xl). - Social icons: icon size (42), style (default
soft), glyph size, gap (gap-l), outline width, corner radius (round-100), active color, spacing under. - Counter: post count color (default
text-secondary), number-to-label gap, padding, border width, corner radius (pill by default), and bold toggles (number bold by default).
Tag page header
- Layout: alignment (default
center) and intro max width (720). - Icon badge: icon size (38), color, corner radius (
round-xl), background color, optional border (on by default) with color and width, spacing around icon (desktop/mobile), spacing under. - Name: show tag name as (default
h3), text transform (defaultcapitalize), color, spacing under. - Counter: same post-count styling as the author counter (color, gap, padding, border, corner radius, bold toggles).
Shared section groups (from the theme's section system)
The header also carries the standard Section background settings, Section divider settings (none / shape / border / shadow), Section spacing settings, and Layout settings (wrapper and inner container widths) found across Flexoraa sections. Defaults suit a light listing header out of the box.
Tips & gotchas¶
It only shows where it should
The module is gated to author and tag pages, so it will not clutter your main blog index. You do not need to add or remove it per page.
Author content comes from HubSpot
The avatar, name, bio, and social links are read from the author record, not typed into the module. To change them, edit the author in your HubSpot blog settings.
Related modules¶
- Blog Listing: the main post grid this header sits above.
- Blog Tags: the tag chips shown on posts and listings.
- Blog Section: a curated block of posts for any page.