---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/en/lektionen/ux-designer-layout-system"
locale: en
meta:
  "og:title": "Academy Lesson"
---

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

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

- [Understand sections, blocks and slots](https://academy.laioutr.com/en/lektionen/ux-designer-layout-system)

Layout system: sections, blocks, slots

# Understand sections, blocks and slots

12 min

The Laioutr layout system has three levels: sections form the areas of a page, slots are the places inside a section and blocks fill these places. This lesson shows how a section defines which blocks fit into which slot, which properties exist for content and design and how global sections cover recurring areas.

## Key takeaways

- Sections define the allowed blocks per slot.
- Properties separate content, design and rules.
- Global sections cover recurring areas.

## Read more

- [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.
- [Global sections for header, footer and recurring content](https://academy.laioutr.com/en/artikel/global-sections-for-header-footer-and-recurring-content)5 min

  A global section is created once and referenced on any number of pages. Changing its content changes it on every page that uses it, which is typical for headers, footers or a USP bar.
- [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.

## 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/ux-designer-layout-system#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/en/lektionen/ux-designer-layout-system",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-layout-system#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/lektionen/ux-designer-layout-system"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-layout-system#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic UX Designer",
          "item": "https://academy.laioutr.com/en/lernpfade/ux-designer-learning-path",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Understand sections, blocks and slots",
          "item": "https://academy.laioutr.com/en/lektionen/ux-designer-layout-system",
          "position": 3
        }
      ]
    }
  ]
}
```