Blog Post Page (Single Article)

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

6 sectionsView all →
1–5 of 6
Blog

Blog Post Page (Single Article)

Responsive · Animated
Blog

Legal & Long-Form Text Page

Responsive · Animated
Blog

Blog Post Cards

Responsive · Animated
Blog

Featured Post With List

Responsive · Animated
Blog

Blog Grid with Pagination

Responsive · Animated

Blog Post Page (Single Article) — Free Website Section Template

Blog · v1.0.0 · Updated 2026-10-25 · Responsive · GSAP animation · HTML, React & Vue

CategoryBlog
Tagsblogblog postsingle postarticlepermalinktable of contentsauthor boxrelated postsshare buttonslight
Updated October 20, 2026

What's included

Features

Breadcrumb, category, H1 headline, standfirst, author, date and read time
Cover image with an optional caption
Article as sections with H2 headings, text, bullet lists, pull quotes and images
Table of contents built from the headings
Tags and share buttons for X, LinkedIn, Facebook, WhatsApp and copy link
Author box with photo, name and short bio
Previous and next post links
Related posts as cards with covers, categories and dates
BlogPosting and breadcrumb structured data from your entries
Export HTML, a ZIP with images, React or Vue

About this section

Blog Post Page — Free Single Article Template

Blog Post Page (Single Article): The page a single blog post lives on: a breadcrumb, category, headline and standfirst, the author with date and read time, a cover image, an optional table of contents, then the article as sections with headings, text, bullet lists, pull quotes and images. Below it come tags, share buttons, an author box, previous and next links and related posts. It writes BlogPosting and breadcrumb structured data for search engines.

Blog Post Page is a free template for the page a single article lives on: the permalink view of a blog post. It gives you a breadcrumb, a category, a large headline, a standfirst, the author with the date and read time, a cover image and then the article itself, laid out for comfortable reading. It works for company news, tutorials, guides, case studies and personal blogs, and it is built so that a long article stays easy to read on a phone as well as on a desktop.

Structure that readers and search engines like

The article is a list of sections, each with its own H2 heading, text, optional bullet list, pull quote and image. A table of contents is built from those headings, so long articles are easy to scan and each section can be linked to directly. The page has a single H1, and the date is marked up as a real time element.

Structured data included

The template writes BlogPosting and breadcrumb structured data from what you enter, including the headline, standfirst, cover image, dates, author, category, tags and word count. Add the full address of the post and the structured data includes it too.

Keep readers on your site

Below the article are tags, share buttons for X, LinkedIn, Facebook and WhatsApp plus a copy-link button, an author box with a short bio, previous and next links and a row of related posts. Each part is a switch, so a short post can stay simple.

Edit, then export

Click any text in the preview to edit it, set your colours and fonts once, then export HTML, a ZIP, React or Vue. Pair it with the Blog Grid with Pagination for your blog index.

Why use it

Why Use the Blog Post Page (Single Article)

🔎
Search-ready markup
One H1, H2 section headings, a time element and BlogPosting data help search engines understand the article.
📖
Comfortable to read
A narrow text column, generous line spacing and a table of contents make long articles easy to follow.
↩️
Keeps readers moving
Share buttons, an author box, previous and next links and related posts give every reader a next step.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the breadcrumb, headline & author, cover image, table of contents, article sections, tags & share, author box, previous & next and related posts in the panel. Switch the breadcrumb, cover image, table of contents, tags & share, author box, previous & next and related posts on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

📰
Company and news blogs
Give every announcement, story and update a consistent page with the author, date and category clearly shown at the top.
🧭
Guides and tutorials
Use the table of contents, numbered sections and bullet lists to lay out step-by-step guides that people can scan and return to.
✍️
Personal blogs and magazines
Publish essays with pull quotes, images and captions, a bio box with your photo and a row of related reading below.
🧪
Case studies and reports
Present results in sections with images and key points, then link to the next study with previous and next buttons.

Got questions?

Frequently Asked Questions

It is the page with its own web address where one article lives. It holds the full text, the author and date, and links to related posts, as opposed to a blog index that lists many posts.

Yes. It writes BlogPosting and breadcrumb structured data from your headline, image, dates, author, category and tags. Add the full post address to include it too.

It is built from the H2 headings of your sections when the page loads, and each entry links to its section. Without JavaScript the article still reads as normal.

Use one H1 for the title and an H2 for each main section. Short, descriptive headings help readers scan and help search engines understand the article.

Yes. The breadcrumb, cover image, table of contents, share row, author box, previous and next links and related posts each have their own switch.

It saves an editable copy of your Blog Post Page (Single Article) in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.