---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages"
locale: en
meta:
  "og:title": "Academy Article"
---

[Go to home](https://academy.laioutr.com/en)

- [Storefront features](https://academy.laioutr.com/en/bereiche/storefront-features)

- [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)

- [Build a blog with overview and article pages](https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages)

# Build a blog with overview and article pages

A blog in Laioutr consists of the Blog Post Listing section for the overview and the Article Detail section for single posts. Posts come from the connected system through an app, while Studio controls presentation, featured post, sharing row and table of contents.

## Before you start

<dl>

<dt>Plan</dt>
<dd>All plans</dd>

<dt>Role</dt>
<dd>Editor or Admin in the project</dd>

<dt>Duration</dt>
<dd>8 min</dd></dl>

### Prerequisites

- App of a system with blog functionality installed and connected
- At least one published post in the source system
- Pages for blog overview and article in the project

Last reviewed on October 15, 2026

The blog in Laioutr consists of two sections: an overview page and an article page. The posts themselves are written in the connected system, such as the blog of the commerce system or a CMS, and reach the storefront through an app. Laioutr handles the presentation.

### Overview

**Blog Post Listing** shows a featured post at the top and a grid of post cards with pagination below. An optional title and subline frame the list.

### Article page

**Article Detail** shows cover image, heading and the formatted post body. Optionally, a social sharing row and a table of contents built from the subheadings are added: a sticky sidebar on desktop and an accordion above the text on mobile.

Each post carries title, URL slug, publication date, author, excerpt, cover image, tags and its own SEO fields. The article page is a dynamic page: one design applies to every post.

## Step by step

1. 1 ### Step 1: Check the blog source

   In Cockpit, check under Apps that the app of the system that delivers the blog posts is installed and connected.
2. 2 ### Step 2: Set up the overview page

   Open the blog overview page in Studio and add the **Blog Post Listing** section. Phrase title and subline so that they name the topic of the blog.
3. 3 ### Step 3: Set the featured post

   Decide which post appears above the grid as the featured post, for example the most important guide of the season.
4. 4 ### Step 4: Design the article page

   Open the article page and choose a real post in the **Preview Data** field. Add the **Article Detail** section and add further sections below the article, such as a banner or matching products.
5. 5 ### Step 5: Set sharing and table of contents

   Switch on the sharing row and the table of contents as needed. The table of contents only appears for posts with second-level subheadings.
6. 6 ### Step 6: Save and publish

   Use **Save** to store the draft and **Publish** once everything looks right.

## Check the result

Open the overview in the preview, page through the list and click a post. On the article page, check that cover image, body, sharing row and table of contents appear and that a click in the table of contents jumps to the right section.

## Frequently asked questions

Where are blog posts written?

In the connected system, for example the blog of the commerce system or a CMS. Laioutr reads the posts through the app and presents them. Studio designs the pages, not the post body.

How is the table of contents created?

Automatically from the second-level subheadings in the post body. Nothing needs to be maintained. Posts without such headings simply show no table of contents.

How are blog posts optimised for search engines?

Every post carries its own SEO fields: meta title, meta description and robots directive. They are maintained in the source system and output on the article page.

Can the article view be used for other content?

Yes. Article Detail is the shared reading view for long-form text and is also used for glossary entries, for example, there without the sharing row.

## Related

- [Find, install and configure apps](https://academy.laioutr.com/en/artikel/find-install-and-configure-apps)6 min

  Apps are listed in the Cockpit catalogue under Apps, installed per environment and set up under Configuration. The storefront uses them from the next deployment onwards.
- [Page type recipes: home, product listing, product detail, content](https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content)6 min

  The main page types have proven recipes: which path applies, which data the page loads and which sections it typically contains. This overview helps to build a complete and consistent storefront.
- [Structured data with Schema.org](https://academy.laioutr.com/en/artikel/structured-data-schema-org)6 min

  Every Laioutr page carries exactly one Schema.org graph as JSON-LD, with no extra module. The SEO app provides website, page and organisation, and sections add breadcrumbs, FAQ, products and product lists.
- [Manage content in Content Collections](https://academy.laioutr.com/en/artikel/manage-content-in-content-collections)6 min

  Content Collections are the place for structured content such as blog posts, recipes or authors in Cockpit. Under Content › Collections, entries are created, maintained per language, linked and published without a deployment.
- [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min

  Laioutr UI ships ready-made content sections such as Hero Slider, CTA banners, card grids, testimonials, USP Banner, Logo Slider, gallery and Promotion Banner. Editors place them in Studio, fill them with their own content and adjust size, alignment and background.

## Learn it in a lesson

- [Maintain content in content collections](https://academy.laioutr.com/en/lektionen/frontend-manager-content-collections)10 min

## [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)

Search this guide

1. [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min
2. [Images and video, popups, notifications and in-page navigation](https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation)7 min
3. [Set up shop navigation and footer](https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer)10 min
4. [Build a blog with overview and article pages](https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages)8 min
5. [Set up the store locator and store pages](https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages)8 min
6. [Build a pricing page with plan cards and a comparison table](https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table)9 min

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "en",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "translationOfWork": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#/schema/question/3"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#/schema/question/4"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Storefront features",
          "item": "https://academy.laioutr.com/en/bereiche/storefront-features",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Content and navigation",
          "item": "https://academy.laioutr.com/en/leitfaeden/content-and-navigation",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Build a blog with overview and article pages",
          "item": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#/schema/question/1",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Where are blog posts written?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>In the connected system, for example the blog of the commerce system or a CMS. Laioutr reads the posts through the app and presents them. Studio designs the pages, not the post body.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#/schema/question/2",
      "@type": "Question",
      "inLanguage": "en",
      "name": "How is the table of contents created?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Automatically from the second-level subheadings in the post body. Nothing needs to be maintained. Posts without such headings simply show no table of contents.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#/schema/question/3",
      "@type": "Question",
      "inLanguage": "en",
      "name": "How are blog posts optimised for search engines?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Every post carries its own SEO fields: meta title, meta description and robots directive. They are maintained in the source system and output on the article page.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages#/schema/question/4",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Can the article view be used for other content?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Yes. Article Detail is the shared reading view for long-form text and is also used for glossary entries, for example, there without the sharing row.</p>"
      }
    }
  ]
}
```