---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/lektionen/ux-designer-layoutsystem"
locale: de
meta:
  "og:title": "Academy Lesson"
---

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

- [Agentic UX Designer](https://academy.laioutr.com/lernpfade/lernpfad-ux-designer)

- [Sections, Blocks und Slots verstehen](https://academy.laioutr.com/lektionen/ux-designer-layoutsystem)

Layoutsystem: Sections, Blocks, Slots

# Sections, Blocks und Slots verstehen

12 Min.

Das Layoutsystem von Laioutr hat drei Ebenen: Sections bilden die Bereiche einer Seite, Slots sind die Plätze in einer Section, Blocks füllen diese Plätze. Diese Lektion zeigt, wie eine Section festlegt, welche Blocks in welchen Slot passen, welche Eigenschaften für Inhalt und Design es gibt und wie globale Sections wiederkehrende Bereiche abbilden.

## Das Wichtigste in Kürze

- Sections legen die erlaubten Blocks je Slot fest.
- Eigenschaften trennen Inhalt, Design und Regeln.
- Globale Sections bilden wiederkehrende Bereiche ab.

## Weiterlesen

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

  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.
- [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.
- [Eigene Sections und Blocks für Studio definieren](https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren)15 Min.

  Jede Section und jeder Block ist eine Vue-Datei mit einer exportierten definition, erstellt mit defineSection oder defineBlock. Die definition legt Komponentenname, Studio-Metadaten, Felder und Slots fest, und Studio baut daraus Auswahl und Seitenleiste.

## 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/lektionen/ux-designer-layoutsystem#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/lektionen/ux-designer-layoutsystem",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/lektionen/ux-designer-layoutsystem#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/lektionen/ux-designer-layoutsystem"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/lektionen/ux-designer-layoutsystem#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic UX Designer",
          "item": "https://academy.laioutr.com/lernpfade/lernpfad-ux-designer",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Sections, Blocks und Slots verstehen",
          "item": "https://academy.laioutr.com/lektionen/ux-designer-layoutsystem",
          "position": 3
        }
      ]
    }
  ]
}
```