---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks"
locale: en
meta:
  "og:title": "Academy Lesson"
---

[Go to home](https://academy.laioutr.com/en)

- [Agentic Developer](https://academy.laioutr.com/en/lernpfade/developer-learning-path)

- [Define custom sections and blocks](https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks)

Custom sections and blocks

# Define custom sections and blocks

14 min

Custom sections and blocks extend the library of a project. This lesson shows how a section is defined with slots, properties and data binding so editorial teams can use it in Studio. Clear names, descriptions and limits also help agents place and fill the section sensibly.

## Key takeaways

- Slots and properties define what is possible in Studio.
- Descriptions help editorial teams and agents.
- A section becomes usable in Studio after deployment.

## Read more

- [Define custom Sections and Blocks for Studio](https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio)15 min

  Every Section and Block is a Vue file with an exported definition, created with defineSection or defineBlock. It sets the component name, Studio metadata, fields and slots, and Studio builds its picker and sidebar from it.
- [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min

  Sections are the large areas of a page in header, body or footer, and blocks are content units inside a section's slots. Both are added and arranged in the layers tree and edited in the properties panel.
- [Fill sections with shop data](https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data)7 min

  Sections with a data field show products, categories or posts from connected systems. The team picks a data query in Studio, sets input, limit and sorting, and Orchestr delivers the data at render time.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "en",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "translationOfWork": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic Developer",
          "item": "https://academy.laioutr.com/en/lernpfade/developer-learning-path",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Define custom sections and blocks",
          "item": "https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks",
          "position": 3
        }
      ]
    }
  ]
}
```