---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen"
locale: de
meta:
  "og:title": "Academy Article"
---

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

- [Studio](https://academy.laioutr.com/bereiche/studio)

- [Seiten bauen](https://academy.laioutr.com/leitfaeden/seiten-bauen)

- [Landingpage aus vorhandenen Sections bauen](https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen)

# Landingpage aus vorhandenen Sections bauen

Eine Landingpage entsteht in Studio als Seite vom Typ Landing Page mit eigenem Pfad und wird aus installierten Sections zusammengesetzt: Hero, Inhalte, Produktslider mit Shopdaten, Header und Footer als globale Sections.

## Bevor du startest

<dl>

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

<dt>Rolle</dt>
<dd>Mitglied mit Zugriff auf das Projekt und Recht, Projektinhalte zu bearbeiten</dd>

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

### Voraussetzungen

- Header und Footer liegen als globale Sections vor
- Bilder liegen in der Mediathek oder im angebundenen DAM

Zuletzt geprüft am 15. Oktober 2026

Kampagnen, Aktionen und Saisonthemen brauchen schnell eine eigene Seite. In Laioutr ist das eine Aufgabe für das Content-Team, keine Entwicklungsaufgabe, solange die nötigen Sections im Projekt installiert sind.

**Landing Page** ist ein statischer Seitentyp. Jede Landingpage ist eine eigene Seite mit eigenem Pfad, etwa `/sommeraktion`, und lässt sich auf einzelne Märkte begrenzen. Header und Footer kommen als globale Sections dazu, damit Navigation und Rechtliches überall gleich bleiben.

Ein bewährter Aufbau:

1. Hero mit Botschaft, Bild und Call to Action
2. Vorteile oder USPs
3. Produktslider mit Live-Daten aus einer Kategorie
4. Bild und Text oder Testimonials für Vertrauen
5. Abschließender Call to Action

Alle Sections aus Laioutr UI bringen Barrierefreiheit, strukturierte Daten und schnelle Ladezeiten mit. Die Sections sind auf die Zielwerte von Laioutr ausgelegt: LCP unter 1,2 s, INP unter 80 ms und CLS unter 0,02.

## Schritt für Schritt

1. 1 ### Schritt 1: Seite anlegen

   Über **Add page** den Typ **Landing Page** wählen, Namen und Pfad wie `/sommeraktion` festlegen.
2. 2 ### Schritt 2: Header und Footer einfügen

   In den Bereichen Header und Footer die vorhandenen globalen Sections als Referenz einfügen.
3. 3 ### Schritt 3: Hero aufbauen

   Im Body eine Section mit dem Tag **Heroes** einfügen, Überschrift, Bild und Button setzen. Das Button-Ziel im Link-Feld direkt als Seite, Produkt oder Kategorie wählen.
4. 4 ### Schritt 4: Inhalte ergänzen

   Sections für Vorteile, Bild und Text oder Testimonials einfügen und befüllen.
5. 5 ### Schritt 5: Produkte einbinden

   Einen Produktslider einfügen und im Datenfeld die Kategorie der Aktion wählen.
6. 6 ### Schritt 6: SEO pflegen

   Die Seite auswählen und in den Properties Meta-Titel und Meta-Beschreibung je Sprache füllen.
7. 7 ### Schritt 7: Prüfen

   Die Seite in den Gerätemodi Desktop, Tablet und Mobil, auch im Querformat, sowie in allen Sprachen und Märkten ansehen.
8. 8 ### Schritt 8: Speichern und veröffentlichen

   Mit **Save** sichern und mit **Publish** live stellen.

## Ergebnis prüfen

Die Landingpage ist nach dem Veröffentlichen unter ihrem Pfad erreichbar, der Produktslider zeigt Produkte der gewählten Kategorie und Meta-Titel sowie Beschreibung erscheinen im Quelltext der Seite.

## Häufige Fragen

Kann die Landingpage nur in einem Markt erscheinen?

Ja. In den Seiteneigenschaften lässt sich die Seite auf einzelne Märkte begrenzen. In anderen Märkten existiert die Route dann nicht.

Was ist der Unterschied zur Content Page?

Beide Typen sind statisch. Die Content Page liegt meist unter einem festen Pfadschema wie `/pages/...`, die Landingpage erhält einen frei gewählten Pfad, ideal für Kampagnen.

Kann ein KI-Agent die Seite aufbauen?

Über den Laioutr MCP kann ein Agent Sections auf einer angelegten Seite einfügen, Texte setzen und anordnen. Das Team prüft das Ergebnis in Studio und veröffentlicht selbst.

Was tun, wenn eine passende Section fehlt?

Den Katalog mit Filtern und Tags durchsuchen und prüfen, ob ein Growth Kit die Section liefert. Ansonsten entwickeln Developer sie als neue Section in einer App.

## Passend dazu

- [Globale Sections für Header, Footer und wiederkehrende Inhalte](https://academy.laioutr.com/artikel/globale-sections-fuer-header-footer-und-mehr)5 Min.

  Eine globale Section wird einmal angelegt und auf beliebig vielen Seiten referenziert. Wer ihre Inhalte ändert, ändert sie auf allen Seiten, die sie nutzen, typisch für Header, Footer oder eine USP-Leiste.
- [Sections mit Shopdaten füllen](https://academy.laioutr.com/artikel/sections-mit-shopdaten-fuellen)7 Min.

  Sections mit einem Datenfeld zeigen Produkte, Kategorien oder Beiträge aus den angebundenen Systemen. Das Team wählt in Studio eine Datenabfrage, stellt Eingabe, Anzahl und Sortierung ein, und Orchestr liefert die Daten beim Rendern.
- [Kampagnen mit Varianten steuern](https://academy.laioutr.com/artikel/kampagnen-mit-varianten-steuern)7 Min.

  Für eine Kampagne legt das Team eine weitere Variante einer bestehenden Seite an, baut dort die Kampagneninhalte auf und steuert über Regeln und Veröffentlichung, wann und wo die Variante gilt. Die bisherige Fassung bleibt unverändert erhalten.
- [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.
- [Vorschau prüfen und in Studio veröffentlichen](https://academy.laioutr.com/artikel/vorschau-pruefen-und-in-studio-veroeffentlichen)5 Min.

  Studio speichert Änderungen als Entwurf und zeigt sie sofort in der Live-Vorschau. Publish in der oberen Leiste bringt den gespeicherten Stand über ein Deployment der Umgebung auf die Storefront.

## In einer Lektion lernen

- [Landingpage aus vorhandenen Sections bauen](https://academy.laioutr.com/lektionen/frontend-manager-landingpage-bauen)12 Min.
- [Die Rolle Agentic Frontend Manager](https://academy.laioutr.com/lektionen/frontend-manager-einfuehrung)4 Min.

## [Seiten bauen](https://academy.laioutr.com/leitfaeden/seiten-bauen)

In diesem Leitfaden suchen

1. [Studio im Überblick](https://academy.laioutr.com/artikel/studio-im-ueberblick)5 Min.
2. [Seiten und Varianten aus Seitentypen anlegen](https://academy.laioutr.com/artikel/seiten-und-varianten-aus-seitentypen-anlegen)6 Min.
3. [Sections und Blocks einsetzen](https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen)7 Min.
4. [Sections finden: Bibliothek, Growth Kits, Tags und Suche](https://academy.laioutr.com/artikel/sections-finden-bibliothek-growth-kits-tags-suche)4 Min.
5. [Globale Sections für Header, Footer und wiederkehrende Inhalte](https://academy.laioutr.com/artikel/globale-sections-fuer-header-footer-und-mehr)5 Min.
6. [Sections mit Shopdaten füllen](https://academy.laioutr.com/artikel/sections-mit-shopdaten-fuellen)7 Min.
7. [Landingpage aus vorhandenen Sections bauen](https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen)10 Min.
8. [Kampagnen mit Varianten steuern](https://academy.laioutr.com/artikel/kampagnen-mit-varianten-steuern)7 Min.
9. [Seitentyp-Rezepte: Home, Produktliste, Produktdetail, Content](https://academy.laioutr.com/artikel/seitentyp-rezepte-home-produktliste-produktdetail-content)6 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/landingpage-aus-vorhandenen-sections-bauen#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#/schema/question/3"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#/schema/question/4"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Studio",
          "item": "https://academy.laioutr.com/bereiche/studio",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Seiten bauen",
          "item": "https://academy.laioutr.com/leitfaeden/seiten-bauen",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Landingpage aus vorhandenen Sections bauen",
          "item": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Kann die Landingpage nur in einem Markt erscheinen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Ja. In den Seiteneigenschaften lässt sich die Seite auf einzelne Märkte begrenzen. In anderen Märkten existiert die Route dann nicht.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Was ist der Unterschied zur Content Page?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Beide Typen sind statisch. Die Content Page liegt meist unter einem festen Pfadschema wie <code>/pages/...</code>, die Landingpage erhält einen frei gewählten Pfad, ideal für Kampagnen.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Kann ein KI-Agent die Seite aufbauen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Über den Laioutr MCP kann ein Agent Sections auf einer angelegten Seite einfügen, Texte setzen und anordnen. Das Team prüft das Ergebnis in Studio und veröffentlicht selbst.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen#/schema/question/4",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Was tun, wenn eine passende Section fehlt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Den Katalog mit Filtern und Tags durchsuchen und prüfen, ob ein Growth Kit die Section liefert. Ansonsten entwickeln Developer sie als neue Section in einer App.</p>"
      }
    }
  ]
}
```