---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/studio-im-ueberblick"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Studio](https://academy.laioutr.com/bereiche/studio)
- [Seiten bauen](https://academy.laioutr.com/leitfaeden/seiten-bauen)
- [Studio im Überblick](https://academy.laioutr.com/artikel/studio-im-ueberblick)
# Studio im Überblick
Studio ist der visuelle Editor im Cockpit: Dort baut das Team Seiten aus Sections und Blocks, sieht jede Änderung in einer Live-Vorschau der echten Storefront und veröffentlicht, wenn alles passt.
## Bevor du startest
- Tarif
- Alle Pläne
- Rolle
- Mitglied mit Zugriff auf das Projekt und Recht, Projektinhalte zu bearbeiten
- Dauer
- 5 Min.
### Voraussetzungen
- Projekt im Cockpit angelegt
- Erreichbares Frontend, damit die Vorschau lädt
Zuletzt geprüft am 15. Oktober 2026
**Studio** ist der Editor im Cockpit, mit dem das Team die Storefront visuell aufbaut. Geöffnet wird Studio über die Seitenleiste des Projekts. Gearbeitet wird an **Seiten**, **Sections** und **Blocks**, während die Mitte eine Live-Vorschau des echten Frontends zeigt.
### Aufbau
- **Obere Leiste**: Seitenkontext, Auswahl von Markt und Sprache, Gerätemodi der Vorschau, **Save** und **Publish**.
- **Linke Seitenleiste (Layers)**: der Seitenbaum mit Header, Body und Footer. Hier werden Sections und Blocks hinzugefügt, dupliziert, gelöscht und ein- oder ausgeblendet.
- **Mitte**: die Vorschau der Storefront.
- **Rechte Seitenleiste (Properties)**: die Eigenschaften der gewählten Seite, Section oder des gewählten Blocks.
Unten bietet die **Command Bar** weitere Befehle. Welche Seitentypen, Sections und Blocks zur Auswahl stehen, bestimmen die im Projekt installierten Apps. Produkt- und Inhaltsdaten liefert Orchestr, die Datenschicht von Laioutr. Mehrere Personen arbeiten gleichzeitig im selben Dokument, KI-Agenten über den Laioutr MCP ebenso. Veröffentlicht wird immer durch einen Menschen.
## Schritt für Schritt
1. 1 ### Schritt 1: Studio öffnen
Im Cockpit das Projekt wählen und in der Seitenleiste **Studio** öffnen.
2. 2 ### Schritt 2: Seite und Kontext wählen
In der oberen Leiste die Seite sowie Markt und Sprache wählen. Studio merkt sich die Auswahl in der URL, ein geteilter Link öffnet dieselbe Ansicht.
3. 3 ### Schritt 3: Element auswählen
Eine Section oder einen Block im Layers-Baum oder in der Vorschau anklicken. Die **Properties** rechts zeigen die passenden Felder.
## Häufige Fragen
Braucht das Team Programmierkenntnisse für Studio?
Nein. Seiten werden aus vorhandenen Sections und Blocks zusammengesetzt und über Formularfelder gepflegt. Neue Sections, Blocks oder Seitentypen entwickeln Developer in Apps, danach stehen sie in Studio zur Auswahl.
Können mehrere Personen gleichzeitig an einer Seite arbeiten?
Ja. Studio ist ein Echtzeit-Editor, Änderungen anderer Personen erscheinen sofort. Auch über den Laioutr MCP verbundene KI-Agenten tauchen als Teilnehmer auf und bearbeiten dasselbe Dokument.
Warum lädt die Vorschau nicht?
Die Vorschau zeigt das deployte Frontend des Projekts. Ist es nicht erreichbar, zeigt Studio einen Lade- oder Fehlerzustand mit der Option, es erneut zu versuchen. Bei einem geschützten Deployment muss der Bypass-Schlüssel in den Hosting-Einstellungen hinterlegt sein.
Wann sehen Besucher eine Änderung?
Erst nach **Publish**. **Save** speichert den Entwurf, die Storefront bleibt unverändert.
## Passend dazu
- [Seiten und Varianten aus Seitentypen anlegen](https://academy.laioutr.com/artikel/seiten-und-varianten-aus-seitentypen-anlegen)6 Min.
Jede Seite in Studio basiert auf einem Seitentyp wie Home, Produktdetail oder Landing Page. Das Team wählt beim Anlegen den Typ, prüft Name und URL-Pfad und legt bei Bedarf weitere Varianten derselben Seite an.
- [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.
- [Vorschau prüfen und in Studio veröffentlichen](https://academy.laioutr.com/artikel/vorschau-pruefen-und-in-studio-veroeffentlichen)5 Min.
Studio speichert Änderungen als Entwurf und zeigt sie sofort in der Live-Vorschau. Publish in der oberen Leiste bringt den gespeicherten Stand über ein Deployment der Umgebung auf die Storefront.
- [Larry Co-Pilot in Studio nutzen](https://academy.laioutr.com/artikel/larry-co-pilot-in-studio-nutzen)6 Min.
Larry Co-Pilot ist der KI-Assistent in Studio. Über die Schaltfläche Larry neben Publish entstehen neue Sections, Layouts für eine Seite und überarbeitete Texte als Entwurf; live geht erst, was eine Person veröffentlicht.
- [Laioutr MCP mit einem KI-Assistenten verbinden](https://academy.laioutr.com/artikel/laioutr-mcp-mit-ki-assistenten-verbinden)5 Min.
Laioutr MCP verbindet Claude, ChatGPT, Cursor oder einen anderen MCP-Client per OAuth mit den eigenen Laioutr-Projekten. Nach der Freischaltung durch Laioutr genügt die Anmeldung mit dem Laioutr-Konto, ein API-Key ist nicht nötig.
## In einer Lektion lernen
- [Seitentypen, Seiten und Varianten](https://academy.laioutr.com/lektionen/foundations-seitentypen-seiten-varianten)9 Min.
- [Studio im Überblick](https://academy.laioutr.com/lektionen/live-gang-studio-im-ueberblick)6 Min.
## [Seiten bauen](https://academy.laioutr.com/leitfaeden/seiten-bauen)
In diesem Leitfaden suchen
1. [Studio im Überblick](https://academy.laioutr.com/artikel/studio-im-ueberblick)5 Min.
2. [Seiten und Varianten aus Seitentypen anlegen](https://academy.laioutr.com/artikel/seiten-und-varianten-aus-seitentypen-anlegen)6 Min.
3. [Sections und Blocks einsetzen](https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen)7 Min.
4. [Sections finden: Bibliothek, Growth Kits, Tags und Suche](https://academy.laioutr.com/artikel/sections-finden-bibliothek-growth-kits-tags-suche)4 Min.
5. [Globale Sections für Header, Footer und wiederkehrende Inhalte](https://academy.laioutr.com/artikel/globale-sections-fuer-header-footer-und-mehr)5 Min.
6. [Sections mit Shopdaten füllen](https://academy.laioutr.com/artikel/sections-mit-shopdaten-fuellen)7 Min.
7. [Landingpage aus vorhandenen Sections bauen](https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen)10 Min.
8. [Kampagnen mit Varianten steuern](https://academy.laioutr.com/artikel/kampagnen-mit-varianten-steuern)7 Min.
9. [Seitentyp-Rezepte: Home, Produktliste, Produktdetail, Content](https://academy.laioutr.com/artikel/seitentyp-rezepte-home-produktliste-produktdetail-content)6 Min.
## 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/artikel/studio-im-ueberblick#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/studio-im-ueberblick",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/studio-im-ueberblick"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Seiten bauen",
"item": "https://academy.laioutr.com/leitfaeden/seiten-bauen",
"position": 3
},
{
"@type": "ListItem",
"name": "Studio im Überblick",
"item": "https://academy.laioutr.com/artikel/studio-im-ueberblick",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Braucht das Team Programmierkenntnisse für Studio?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Nein. Seiten werden aus vorhandenen Sections und Blocks zusammengesetzt und über Formularfelder gepflegt. Neue Sections, Blocks oder Seitentypen entwickeln Developer in Apps, danach stehen sie in Studio zur Auswahl.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Können mehrere Personen gleichzeitig an einer Seite arbeiten?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ja. Studio ist ein Echtzeit-Editor, Änderungen anderer Personen erscheinen sofort. Auch über den Laioutr MCP verbundene KI-Agenten tauchen als Teilnehmer auf und bearbeiten dasselbe Dokument.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Warum lädt die Vorschau nicht?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Die Vorschau zeigt das deployte Frontend des Projekts. Ist es nicht erreichbar, zeigt Studio einen Lade- oder Fehlerzustand mit der Option, es erneut zu versuchen. Bei einem geschützten Deployment muss der Bypass-Schlüssel in den Hosting-Einstellungen hinterlegt sein.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/studio-im-ueberblick#/schema/question/4",
"@type": "Question",
"inLanguage": "de",
"name": "Wann sehen Besucher eine Änderung?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Erst nach Publish. Save speichert den Entwurf, die Storefront bleibt unverändert.
"
}
}
]
}
```