---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Studio](https://academy.laioutr.com/en/bereiche/studio)
- [Building pages](https://academy.laioutr.com/en/leitfaeden/building-pages)
- [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)
# Add and arrange sections and blocks
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.
## Before you start
- Plan
- All plans
- Role
- Member with access to the project and permission to edit project content
- Duration
- 7 min
### Prerequisites
- A page exists in Studio
Last reviewed on October 15, 2026
**Sections** are the large areas of a page, such as a hero, product slider, image and text or footer. Every page has three areas for sections: **header**, **body** and **footer**. **Blocks** are smaller content units such as a heading, image, button or product tile. They sit in named **slots** of a section. A slot defines which blocks it accepts; a slider slot, for example, only accepts slides. Blocks do not contain further blocks.
The fields in the properties panel come from the section definition: text, media, links, colours, icons or data queries. Text, links and media are translatable and maintained per language. Layout, colours and queries apply to all languages. Some sections offer a wizard on insert that applies a preconfigured layout variant.
If Studio finds no definition for an element, editing is limited and the stored values are read-only. The installed apps and Growth Kits decide which sections and blocks are available.
## Step by step
1. 1 ### Step 1: Choose an area
Open the page and choose the **header**, **body** or **footer** area in the layers tree.
2. 2 ### Step 2: Add a section
Open the picker with **Add section**, choose a section and insert it with a double click. If the section offers a wizard, pick the desired layout variant there.
3. 3 ### Step 3: Fill in the fields
Select the section and set text, media, links and design in the **properties** panel. The preview updates immediately.
4. 4 ### Step 4: Insert a block into a slot
Choose **Add block** on the desired slot. Studio only offers blocks that the slot allows.
5. 5 ### Step 5: Arrange, duplicate, hide
Put sections and blocks in the desired order in the layers tree. Use the element actions to duplicate, delete or hide.
6. 6 ### Step 6: Maintain languages
Switch the language in the top bar and fill translatable fields per language. Studio indicates when a field is localised or shown from a fallback language.
7. 7 ### Step 7: Save
Save the draft with **Save**.
## Check the result
The section appears in the preview at the chosen position and the blocks show the content entered. After switching language, the translated text appears in the same place.
## Frequently asked questions
Why is a block not offered for a slot?
Each slot defines which blocks it accepts. A block that is not allowed there does not appear in the picker. Use another slot or another section instead.
What does the note that editing is limited mean?
Studio finds no definition for the element, usually because the app is missing or the section was renamed. The values stay stored and can be inspected, but not edited through form fields.
Hide or delete?
Hiding keeps the section and its content but does not display it, which is useful for seasonal content. Deleting removes the element from the variant.
Which fields are maintained per language?
By default text, rich text, links and media. Layout options, colours, icons and data queries are shared across all languages.
## Related
- [Find sections: library, Growth Kits, tags and search](https://academy.laioutr.com/en/artikel/find-sections-library-growth-kits-tags-search)4 min
The add-section dialog groups all installed sections by package, filters by Growth Kit and tags, and offers a search so the right section is found quickly.
- [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.
- [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.
- [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min
Laioutr UI ships ready-made content sections such as Hero Slider, CTA banners, card grids, testimonials, USP Banner, Logo Slider, gallery and Promotion Banner. Editors place them in Studio, fill them with their own content and adjust size, alignment and background.
## Learn it in a lesson
- [Add, move and fill sections and blocks](https://academy.laioutr.com/en/lektionen/foundations-sections-and-blocks)10 min
- [Understand sections, blocks and slots](https://academy.laioutr.com/en/lektionen/ux-designer-layout-system)12 min
- [Define custom sections and blocks](https://academy.laioutr.com/en/lektionen/developer-custom-sections-and-blocks)14 min
- [Add sections and blocks](https://academy.laioutr.com/en/lektionen/go-live-sections-and-blocks)8 min
## [Building pages](https://academy.laioutr.com/en/leitfaeden/building-pages)
Search this guide
1. [Studio at a glance](https://academy.laioutr.com/en/artikel/studio-at-a-glance)5 min
2. [Create pages and variants from page types](https://academy.laioutr.com/en/artikel/create-pages-and-variants-from-page-types)6 min
3. [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min
4. [Find sections: library, Growth Kits, tags and search](https://academy.laioutr.com/en/artikel/find-sections-library-growth-kits-tags-search)4 min
5. [Global sections for header, footer and recurring content](https://academy.laioutr.com/en/artikel/global-sections-for-header-footer-and-recurring-content)5 min
6. [Fill sections with shop data](https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data)7 min
7. [Build a landing page from existing sections](https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections)10 min
8. [Run campaigns with page variants](https://academy.laioutr.com/en/artikel/run-campaigns-with-page-variants)7 min
9. [Page type recipes: home, product listing, product detail, content](https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content)6 min
## 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/artikel/add-and-arrange-sections-and-blocks#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/en/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Building pages",
"item": "https://academy.laioutr.com/en/leitfaeden/building-pages",
"position": 3
},
{
"@type": "ListItem",
"name": "Add and arrange sections and blocks",
"item": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Why is a block not offered for a slot?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Each slot defines which blocks it accepts. A block that is not allowed there does not appear in the picker. Use another slot or another section instead.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "What does the note that editing is limited mean?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Studio finds no definition for the element, usually because the app is missing or the section was renamed. The values stay stored and can be inspected, but not edited through form fields.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Hide or delete?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Hiding keeps the section and its content but does not display it, which is useful for seasonal content. Deleting removes the element from the variant.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks#/schema/question/4",
"@type": "Question",
"inLanguage": "en",
"name": "Which fields are maintained per language?",
"acceptedAnswer": {
"@type": "Answer",
"text": "By default text, rich text, links and media. Layout options, colours, icons and data queries are shared across all languages.
"
}
}
]
}
```