---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen"
locale: de
meta:
  "og:title": "Academy Article"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Storefront-Funktionen](https://academy.laioutr.com/bereiche/storefront-funktionen)

- [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)

- [Blog mit Übersicht und Artikelseiten aufbauen](https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen)

# Blog mit Übersicht und Artikelseiten aufbauen

Ein Blog in Laioutr besteht aus der Section Blog Post Listing für die Übersicht und der Section Article Detail für einzelne Beiträge. Die Beiträge kommen über eine App aus dem angebundenen System, Studio legt Darstellung, Featured Post, Teilen-Leiste und Inhaltsverzeichnis fest.

## Bevor du startest

<dl>

<dt>Tarif</dt>
<dd>Alle Pläne</dd>

<dt>Rolle</dt>
<dd>Editor oder Admin im Projekt</dd>

<dt>Dauer</dt>
<dd>8 Min.</dd></dl>

### Voraussetzungen

- App eines Systems mit Blogfunktion installiert und verbunden
- Mindestens ein veröffentlichter Beitrag im Quellsystem
- Seiten für Blog-Übersicht und Artikel im Projekt

Zuletzt geprüft am 15. Oktober 2026

Der Blog in Laioutr besteht aus zwei Sections: einer Übersichtsseite und einer Artikelseite. Die Beiträge selbst entstehen im angebundenen System, etwa im Blog des Shop-Systems oder in einem CMS, und kommen über eine App in die Storefront. Laioutr übernimmt die Darstellung.

### Übersicht

**Blog Post Listing** zeigt oben einen hervorgehobenen Beitrag und darunter ein Raster aus Beitragskarten mit Seitenumschaltung. Ein optionaler Titel und eine Unterzeile rahmen die Liste.

### Artikelseite

**Article Detail** zeigt Titelbild, Überschrift und den formatierten Beitragstext. Optional kommen eine Leiste zum Teilen in sozialen Netzwerken und ein Inhaltsverzeichnis dazu, das aus den Zwischenüberschriften entsteht: auf Desktop als mitlaufende Seitenleiste, mobil als Akkordeon über dem Text.

Jeder Beitrag bringt Titel, URL-Slug, Veröffentlichungsdatum, Autor, Anreißer, Titelbild, Tags und eigene SEO-Angaben mit. Die Artikelseite ist eine dynamische Seite: Eine Gestaltung gilt für alle Beiträge.

## Schritt für Schritt

1. 1 ### Schritt 1: Blog-Quelle prüfen

   Im Cockpit unter Apps prüfen, ob die App des Systems installiert und verbunden ist, das die Blogbeiträge liefert.
2. 2 ### Schritt 2: Übersichtsseite anlegen

   In Studio die Blog-Übersichtsseite öffnen und die Section **Blog Post Listing** einfügen. Titel und Unterzeile so formulieren, dass sie das Thema des Blogs benennen.
3. 3 ### Schritt 3: Hervorgehobenen Beitrag festlegen

   Den Beitrag bestimmen, der über dem Raster als Featured Post erscheint, zum Beispiel den wichtigsten Ratgeber der Saison.
4. 4 ### Schritt 4: Artikelseite gestalten

   Die Artikelseite öffnen und im Feld **Preview Data** einen echten Beitrag wählen. Die Section **Article Detail** einfügen und unter dem Artikel weitere Sections ergänzen, etwa ein Banner oder passende Produkte.
5. 5 ### Schritt 5: Teilen und Inhaltsverzeichnis einstellen

   Die Teilen-Leiste und das Inhaltsverzeichnis nach Bedarf einschalten. Das Inhaltsverzeichnis erscheint nur bei Beiträgen mit Zwischenüberschriften der zweiten Ebene.
6. 6 ### Schritt 6: Speichern und veröffentlichen

   Mit **Save** den Entwurf sichern und mit **Publish** veröffentlichen, wenn alles passt.

## Ergebnis prüfen

Die Übersicht in der Vorschau öffnen, durch die Seiten blättern und einen Beitrag anklicken. Auf der Artikelseite prüfen, ob Titelbild, Text, Teilen-Leiste und Inhaltsverzeichnis erscheinen und ob ein Klick im Inhaltsverzeichnis zum richtigen Abschnitt springt.

## Häufige Fragen

Wo werden Blogbeiträge geschrieben?

Im angebundenen System, zum Beispiel im Blog des Shop-Systems oder in einem CMS. Laioutr liest die Beiträge über die App aus und stellt sie dar. Studio gestaltet die Seiten, nicht den Beitragstext.

Wie entsteht das Inhaltsverzeichnis?

Automatisch aus den Zwischenüberschriften der zweiten Ebene im Beitragstext. Es muss nichts gepflegt werden. Beiträge ohne solche Überschriften zeigen einfach kein Inhaltsverzeichnis.

Wie werden Blogbeiträge für Suchmaschinen optimiert?

Jeder Beitrag bringt eigene SEO-Angaben mit: Meta-Titel, Meta-Beschreibung und Robots-Angabe. Diese werden im Quellsystem gepflegt und auf der Artikelseite ausgegeben.

Lässt sich die Artikelansicht auch für andere Inhalte nutzen?

Ja. Article Detail ist die gemeinsame Leseansicht für lange Texte und dient zum Beispiel auch für Glossareinträge, dort ohne Teilen-Leiste.

## Passend dazu

- [Apps finden, installieren und konfigurieren](https://academy.laioutr.com/artikel/apps-finden-installieren-und-konfigurieren)6 Min.

  Apps stehen im Cockpit unter Apps als Katalog bereit, werden je Umgebung installiert und unter Configuration eingerichtet. Die Storefront nutzt sie ab dem nächsten Deployment.
- [Seitentyp-Rezepte: Home, Produktliste, Produktdetail, Content](https://academy.laioutr.com/artikel/seitentyp-rezepte-home-produktliste-produktdetail-content)6 Min.

  Für die wichtigsten Seitentypen gibt es bewährte Rezepte: welcher Pfad gilt, welche Daten die Seite lädt und welche Sections sie typischerweise enthält. Die Übersicht hilft, eine Storefront vollständig und konsistent aufzubauen.
- [Strukturierte Daten nach Schema.org](https://academy.laioutr.com/artikel/strukturierte-daten-schema-org)6 Min.

  Jede Laioutr-Seite enthält genau einen Schema.org-Graph als JSON-LD, ohne zusätzliches Modul. Die SEO-App liefert Website, Seite und Organisation, Sections ergänzen Breadcrumbs, FAQ, Produkte und Produktlisten.
- [Inhalte in Content Collections pflegen](https://academy.laioutr.com/artikel/inhalte-in-content-collections-pflegen)6 Min.

  Content Collections sind der Bereich für strukturierte Inhalte wie Blogartikel, Rezepte oder Autoren in Cockpit. Unter Content › Collections werden Einträge angelegt, je Sprache gepflegt, verknüpft und ohne Deployment veröffentlicht.
- [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.

  Laioutr UI bringt fertige Inhalts-Sections wie Hero Slider, CTA-Banner, Card Grids, Testimonials, USP Banner, Logo Slider, Galerie und Promotion Banner mit. Redaktionen platzieren sie in Studio, füllen sie mit eigenen Inhalten und passen Größe, Ausrichtung und Hintergrund an.

## In einer Lektion lernen

- [Inhalte in Content Collections pflegen](https://academy.laioutr.com/lektionen/frontend-manager-content-collections)10 Min.

## [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)

In diesem Leitfaden suchen

1. [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.
2. [Bild und Video, Popups, Hinweise und Navigation in der Seite](https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation)7 Min.
3. [Shop-Navigation und Footer einrichten](https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten)10 Min.
4. [Blog mit Übersicht und Artikelseiten aufbauen](https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen)8 Min.
5. [Standortsuche und Filialseiten einrichten](https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten)8 Min.
6. [Preisseite mit Plan Cards und Vergleichstabelle bauen](https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle)9 Min.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "de",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "workTranslation": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#/schema/question/3"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#/schema/question/4"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Storefront-Funktionen",
          "item": "https://academy.laioutr.com/bereiche/storefront-funktionen",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Inhalt und Navigation",
          "item": "https://academy.laioutr.com/leitfaeden/inhalt-und-navigation",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Blog mit Übersicht und Artikelseiten aufbauen",
          "item": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wo werden Blogbeiträge geschrieben?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Im angebundenen System, zum Beispiel im Blog des Shop-Systems oder in einem CMS. Laioutr liest die Beiträge über die App aus und stellt sie dar. Studio gestaltet die Seiten, nicht den Beitragstext.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wie entsteht das Inhaltsverzeichnis?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Automatisch aus den Zwischenüberschriften der zweiten Ebene im Beitragstext. Es muss nichts gepflegt werden. Beiträge ohne solche Überschriften zeigen einfach kein Inhaltsverzeichnis.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wie werden Blogbeiträge für Suchmaschinen optimiert?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Jeder Beitrag bringt eigene SEO-Angaben mit: Meta-Titel, Meta-Beschreibung und Robots-Angabe. Diese werden im Quellsystem gepflegt und auf der Artikelseite ausgegeben.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen#/schema/question/4",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Lässt sich die Artikelansicht auch für andere Inhalte nutzen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Ja. Article Detail ist die gemeinsame Leseansicht für lange Texte und dient zum Beispiel auch für Glossareinträge, dort ohne Teilen-Leiste.</p>"
      }
    }
  ]
}
```