---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen"
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)

- [Sections und Blocks einsetzen](https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen)

# Sections und Blocks einsetzen

Sections sind die großen Bereiche einer Seite in Header, Body oder Footer, Blocks sind Inhaltseinheiten in den Slots einer Section. Beide werden im Layers-Baum hinzugefügt und angeordnet und in den Properties bearbeitet.

## 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>7 Min.</dd></dl>

### Voraussetzungen

- Eine Seite ist in Studio angelegt

Zuletzt geprüft am 15. Oktober 2026

**Sections** sind die großen Bereiche einer Seite, etwa Hero, Produktslider, Bild und Text oder Footer. Jede Seite hat drei Bereiche für Sections: **Header**, **Body** und **Footer**. **Blocks** sind kleinere Inhaltseinheiten wie Überschrift, Bild, Button oder Produktkachel. Blocks liegen in benannten **Slots** einer Section: Ein Slot legt fest, welche Blocks er annimmt, ein Slider-Slot nimmt zum Beispiel nur Slides an. Blocks enthalten keine weiteren Blocks.

Die Felder in den Properties kommen aus der Definition der Section: Texte, Medien, Links, Farben, Icons oder Datenabfragen. Texte, Links und Medien sind übersetzbar und werden je Sprache gepflegt. Layout, Farben und Abfragen gelten für alle Sprachen. Manche Sections bieten beim Einfügen einen Assistenten, der eine vorkonfigurierte Layout-Variante setzt.

Findet Studio für ein Element keine Definition, ist die Bearbeitung eingeschränkt und die gespeicherten Werte sind nur lesbar. Welche Sections und Blocks verfügbar sind, bestimmen die installierten Apps und Growth Kits.

## Schritt für Schritt

1. 1 ### Schritt 1: Bereich wählen

   Die Seite öffnen und im Layers-Baum den Bereich **Header**, **Body** oder **Footer** wählen.
2. 2 ### Schritt 2: Section hinzufügen

   Über **Add section** die Auswahl öffnen, eine Section wählen und per Doppelklick einfügen. Bietet die Section einen Assistenten, dort die gewünschte Layout-Variante wählen.
3. 3 ### Schritt 3: Felder füllen

   Die Section auswählen und in den **Properties** Texte, Medien, Links und Gestaltung setzen. Die Vorschau aktualisiert sich sofort.
4. 4 ### Schritt 4: Block in einen Slot einfügen

   Am gewünschten Slot **Add block** wählen. Studio bietet nur Blocks an, die der Slot erlaubt.
5. 5 ### Schritt 5: Anordnen, duplizieren, ausblenden

   Sections und Blocks im Layers-Baum in die gewünschte Reihenfolge bringen. Über die Aktionen am Element duplizieren, löschen oder ausblenden.
6. 6 ### Schritt 6: Sprachen pflegen

   In der oberen Leiste die Sprache wechseln und übersetzbare Felder je Sprache füllen. Studio zeigt an, wenn ein Feld lokalisiert ist oder aus einer Fallback-Sprache kommt.
7. 7 ### Schritt 7: Speichern

   Mit **Save** den Entwurf sichern.

## Ergebnis prüfen

Die Section erscheint in der Vorschau an der gewählten Stelle, die Blocks zeigen die gepflegten Inhalte. Nach einem Sprachwechsel stehen die übersetzten Texte an derselben Stelle.

## Häufige Fragen

Warum wird ein Block für einen Slot nicht angeboten?

Jeder Slot legt fest, welche Blocks er annimmt. Ein Block, der dort nicht erlaubt ist, erscheint nicht in der Auswahl. Ein anderer Slot oder eine andere Section ist dann die Lösung.

Was heißt der Hinweis, die Bearbeitung sei eingeschränkt?

Studio findet für das Element keine Definition, meist weil die App fehlt oder die Section umbenannt wurde. Die Werte bleiben gespeichert und lassen sich ansehen, aber nicht über Formularfelder bearbeiten.

Ausblenden oder löschen?

Ausblenden behält Section und Inhalte, zeigt sie aber nicht an, praktisch für saisonale Inhalte. Löschen entfernt das Element aus der Variante.

Welche Felder werden je Sprache gepflegt?

Standardmäßig Texte, Rich Text, Links und Medien. Layout-Optionen, Farben, Icons und Datenabfragen gelten für alle Sprachen gemeinsam.

## Passend dazu

- [Sections finden: Bibliothek, Growth Kits, Tags und Suche](https://academy.laioutr.com/artikel/sections-finden-bibliothek-growth-kits-tags-suche)4 Min.

  Der Dialog zum Hinzufügen einer Section ordnet alle installierten Sections nach Paketen, filtert nach Growth Kit und Tags und bietet eine Suche, damit die passende Section schnell gefunden ist.
- [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.
- [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.
- [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

- [Sections und Blocks einsetzen, verschieben, füllen](https://academy.laioutr.com/lektionen/foundations-sections-und-blocks)10 Min.
- [Sections, Blocks und Slots verstehen](https://academy.laioutr.com/lektionen/ux-designer-layoutsystem)12 Min.
- [Eigene Sections und Blocks definieren](https://academy.laioutr.com/lektionen/entwickler-eigene-sections-und-blocks)14 Min.
- [Sections und Blocks einsetzen](https://academy.laioutr.com/lektionen/live-gang-sections-und-blocks)8 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/sections-und-blocks-einsetzen#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#/schema/question/3"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#/schema/question/4"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#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": "Sections und Blocks einsetzen",
          "item": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Warum wird ein Block für einen Slot nicht angeboten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Jeder Slot legt fest, welche Blocks er annimmt. Ein Block, der dort nicht erlaubt ist, erscheint nicht in der Auswahl. Ein anderer Slot oder eine andere Section ist dann die Lösung.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Was heißt der Hinweis, die Bearbeitung sei eingeschränkt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Studio findet für das Element keine Definition, meist weil die App fehlt oder die Section umbenannt wurde. Die Werte bleiben gespeichert und lassen sich ansehen, aber nicht über Formularfelder bearbeiten.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Ausblenden oder löschen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Ausblenden behält Section und Inhalte, zeigt sie aber nicht an, praktisch für saisonale Inhalte. Löschen entfernt das Element aus der Variante.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen#/schema/question/4",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Welche Felder werden je Sprache gepflegt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Standardmäßig Texte, Rich Text, Links und Medien. Layout-Optionen, Farben, Icons und Datenabfragen gelten für alle Sprachen gemeinsam.</p>"
      }
    }
  ]
}
```