Skip to content

Blog Pagination

The numbered page navigation for a blog listing - page numbers plus optional Previous/Next and First/Last controls, each fully styleable for simple and hover/active states. Best for: the pager at the bottom of a blog index / listing page, paged news or article archives.

📷 Hero image

Target file: assets/img/blog-pagination/hero.webp

A centered numbered pager sitting below a blog listing on a Light background. Show a windowed run of page numbers with the current page highlighted in a filled Dark box with Light text, and the other numbers as plain boxes. Captured at desktop width. Frame it tightly on the pager row so the controls read clearly.

At a glance

Blog Pagination Pager

  • What it does: builds an accessible pager from the blog's page count. It shows a windowed run of page numbers (the current page stays centered), plus optional Previous/Next and First/Last controls rendered as text labels or built-in arrow icons. Each control group has its own spacing, size, border, round corner, and separate simple and hover/active colors.
  • Best used for: the page navigation below a Blog Listing loop on a blog index.
  • Not the right fit if: you want a topic filter rather than page numbers (use Blog Tags), or you are curating a fixed set of posts with no paging (use Blog Section).
  • 🔗 Live demo: (add demo link)

Add it to your page

  1. Open a Blog listing template in the HubSpot editor.
  2. Click Add, search for Blog Pagination, and drop it below the post loop.
  3. Under Click to update content, turn on Show numbers.
  4. Optionally set Previous and next and First and last numbers to show arrows or labels.
  5. Edit the First / Last / Prev / Next label text if you chose labels.
  6. Style each control group's box, border, and simple / hover-active colors in the Style tab.

Design recipes

Each recipe is a look plus the exact fields to reproduce it.

A clean row of page numbers with an active-state highlight.

📷 Result

Target file: recipe-numbers-only-default.webp

A centered row of page numbers with the current page filled in a Dark box and Light text, the rest plain, on a Light background.

Field Set to
Content › Show numbers on
Numbers › Alignment › Pagination alignment justify-center
Numbers › Hover & active state › Background color Dark token

Page numbers flanked by Previous/Next arrow icons.

📷 Result

Target file: recipe-numbers-arrows.webp

The page-number row with a Previous arrow icon on the left and a Next arrow icon on the right, framing the numbers.

Field Set to
Content › Previous and next show_arrows
Previous and next › Icons settings › Icon style opt_1
Previous and next › Icons settings › Icon stroke width 1.65

First / Prev / numbers / Next / Last with text labels.

📷 Result

Target file: recipe-full-controls.webp

A full pager reading First, Prev, the page numbers, Next, and Last as text labels rather than arrows, all in one centered row.

Field Set to
Content › First and last numbers show_labels
Content › Previous and next show_labels
Content › First label / Last label First / Last

Auto-width rounded boxes with a filled active state.

📷 Result

Target file: recipe-pill-buttons.webp

Fully rounded, bordered auto-width page boxes with the current page filled as a solid pill, giving a button-like pager.

Field Set to
Numbers › Spacing › Spacing option auto_width
Numbers › Round corner › Round corner round-100
Numbers › Border › Show border on

"I want to..." quick reference

Goal Setting
Show page numbers Content › Show numbers
Add Prev/Next arrows Content › Previous and next = show_arrows
Add First/Last jumps Content › First and last numbers = show_arrows or show_labels
Use text labels instead of arrows Set the control to show_labels (edit label text)
Equal square buttons Numbers › Spacing › Spacing option = fixed_width
Pill-shaped buttons Numbers › Round corner = round-100 (or custom)
Highlight the current page Numbers › Hover & active state colors
Center / left / right the pager Numbers › Alignment › Pagination alignment
Pick the arrow look Icons settings › Icon style (opt_1 / opt_2)
Outlined buttons Numbers › Border › Show border + state border colors

Field reference

The editor is organized into a Content tab and a Style tab. Groups below match the HubSpot editor. (175 fields total - expand each group as needed.)

Content tab

Section background settings
Field Type Options Default
Type choice none / color / gradient / image / video none
Upload background image image - -
Video file - -
Click to update content
Field Type Default
Show numbers boolean off
First and last numbers choice (do not print / show arrows / show labels) do_not_print
First label / Last labels text First / Last
Previous and next choice (do not print / show arrows / show labels) do_not_print
Previous label / Next label text Prev / Next

Style tab

Section background settings

Background color (token, default bg-white), gradient (bg-gradient-1 to 3), image / video overlay style and position, blur, parallax (scale + speed), and two radial glows (color token or custom, position, size, opacity).

Section divider settings

Divider type: none / shape / border / shadow.

  • Border divider: from top / bottom / both, width, color (default Tertiary token).
  • Shadow divider: regular / light / dark / custom shadow with x / y / blur / spread / color.
  • Shape divider: 25 shapes, top / bottom / both, flip / invert, color or gradient, responsive heights.
Section spacing settings
Field Options Default
Top top-y-0 to top-4xl top-l
Bottom bottom-y-0 to bottom-4xl bottom-l
Left left-x-0 / left-m / left-l / left-xl left-m
Right right-x-0 / right-m / right-l / right-xl right-m
Layout settings
  • Section wrapper container: default / full-width / custom per breakpoint + block alignment.
  • Inner content container: independent inner width + alignment.
Elements settings - Numbers
Field Type Default
Alignment › Pagination alignment justify-center / start / end justify-center
Spacing › Spacing option fixed_width / auto_width auto_width
Width & height of box [desktop / mobile] number 32 / 32
Font size [desktop / mobile] number 14 / 14
Round corner round-0 to round-100 / custom round-m
Spacing between numbers number 10

Simple state and Hover & active state each set background (color / gradient / none), text color, and border color. The active page uses the hover/active colors (defaults: Dark background, White text).

Elements settings - First and last numbers

Same box / spacing / font / border / round corner controls as Numbers, plus an Icons settings group: icon style (opt_1 / opt_2), icon size (desktop / mobile), and stroke width. Separate Simple state and Hover state & active state colors.

Elements settings - Previous and next

Mirrors the First and last group: box / spacing / font / border / round corner, an Icons settings group (icon style, size, stroke width), and separate Simple state and Hover state colors.

Developer use only

Add custom CSS here: per-module CSS injection field.

Tips & gotchas

The active page reuses the hover style

There is no separate "active page" color group. The current page picks up the Hover & active state colors, so style those to highlight where the visitor is.

It hides itself on a single page

The pager only renders when the blog has more than one page. If nothing appears, the listing likely fits on one page.

Fixed vs auto width

Spacing option = fixed_width gives every item an equal square box (great for numbered squares); auto_width lets each box hug its content (better for labeled Prev / Next buttons).