---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/lektionen/entwickler-eigene-sections-und-blocks"
locale: de
meta:
  "og:title": "Academy Lesson"
---

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

- [Agentic Developer](https://academy.laioutr.com/lernpfade/lernpfad-entwickler)

- [Eigene Sections und Blocks definieren](https://academy.laioutr.com/lektionen/entwickler-eigene-sections-und-blocks)

Eigene Sections und Blocks

# Eigene Sections und Blocks definieren

14 Min.

Eigene Sections und Blocks erweitern die Bibliothek eines Projekts. Diese Lektion zeigt, wie eine Section mit Slots, Eigenschaften und Datenanbindung definiert wird, damit Redaktionen sie in Studio nutzen können. Klare Namen, Beschreibungen und Grenzen helfen zudem Agenten, die Section sinnvoll zu platzieren und zu füllen.

## Das Wichtigste in Kürze

- Slots und Eigenschaften bestimmen, was in Studio möglich ist.
- Beschreibungen helfen Redaktionen und Agenten.
- Eine Section wird nach dem Deployment in Studio nutzbar.

## Weiterlesen

- [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.
- [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.
- [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.

## 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/entwickler-eigene-sections-und-blocks#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/lektionen/entwickler-eigene-sections-und-blocks",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/lektionen/entwickler-eigene-sections-und-blocks#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/lektionen/entwickler-eigene-sections-und-blocks"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/lektionen/entwickler-eigene-sections-und-blocks#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic Developer",
          "item": "https://academy.laioutr.com/lernpfade/lernpfad-entwickler",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Eigene Sections und Blocks definieren",
          "item": "https://academy.laioutr.com/lektionen/entwickler-eigene-sections-und-blocks",
          "position": 3
        }
      ]
    }
  ]
}
```