--- title: "Academy Area" canonical_url: "https://academy.laioutr.com/bereiche/studio" locale: de meta: "og:title": "Academy Area" --- [Zur Startseite](https://academy.laioutr.com/) - [Studio](https://academy.laioutr.com/bereiche/studio) # Studio **Studio** ist der visuelle Editor von Laioutr mit Live-Vorschau. Seiten entstehen aus Sections und Blocks, werden mit Shopdaten und Inhalten aus Content Collections gefüllt und über Varianten für Märkte und Kampagnen angepasst. Der Bereich erklärt Seitentypen, globale Sections, Vorschau und Veröffentlichen, Inhalte und Medien, Design-Tokens, das Figma-Kit, Barrierefreiheit und Regeln für die Ausspielung. Er richtet sich an Content Manager, Redaktionen und Agentic UX Designer, die Seiten bauen und pflegen. ## [Seiten bauen](https://academy.laioutr.com/leitfaeden/seiten-bauen) 9 Artikel Dieser Leitfaden ist der Einstieg in Studio. Er zeigt Seitentypen, Seiten und Varianten, das Einsetzen von Sections und Blocks, globale Sections für Header und Footer, das Füllen mit Shopdaten sowie Landingpages, Kampagnen und Seitentyp-Rezepte für Home, Produktliste, Produktdetail und Content. - [Studio im Überblick](https://academy.laioutr.com/artikel/studio-im-ueberblick)5 Min. - [Seiten und Varianten aus Seitentypen anlegen](https://academy.laioutr.com/artikel/seiten-und-varianten-aus-seitentypen-anlegen)6 Min. - [Sections und Blocks einsetzen](https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen)7 Min. - [Sections finden: Bibliothek, Growth Kits, Tags und Suche](https://academy.laioutr.com/artikel/sections-finden-bibliothek-growth-kits-tags-suche)4 Min. - [Globale Sections für Header, Footer und wiederkehrende Inhalte](https://academy.laioutr.com/artikel/globale-sections-fuer-header-footer-und-mehr)5 Min. - [Sections mit Shopdaten füllen](https://academy.laioutr.com/artikel/sections-mit-shopdaten-fuellen)7 Min. - [Landingpage aus vorhandenen Sections bauen](https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen)10 Min. - [Kampagnen mit Varianten steuern](https://academy.laioutr.com/artikel/kampagnen-mit-varianten-steuern)7 Min. - [Seitentyp-Rezepte: Home, Produktliste, Produktdetail, Content](https://academy.laioutr.com/artikel/seitentyp-rezepte-home-produktliste-produktdetail-content)6 Min. ## [Veröffentlichen und Freigaben](https://academy.laioutr.com/leitfaeden/veroeffentlichen-und-freigaben) 1 Artikel Dieser Leitfaden erklärt, wie Änderungen aus Studio live gehen. Er behandelt Vorschau und Veröffentlichen, die Seitenstatus Entwurf, Zur Freigabe und Live, den Freigabe-Workflow, gemeinsames und zeitgesteuertes Veröffentlichen von Seiten und Einträgen, Veröffentlichen ohne Deployment und den Verlauf. Er richtet sich an Redaktionen. - [Vorschau prüfen und in Studio veröffentlichen](https://academy.laioutr.com/artikel/vorschau-pruefen-und-in-studio-veroeffentlichen)5 Min. ## [Inhalte und Medien](https://academy.laioutr.com/leitfaeden/inhalte-und-medien) 4 Artikel Dieser Leitfaden zeigt die Arbeit mit Inhalten: Content Collections pflegen, Entwürfe in der Vorschau prüfen, CMS-Einträge direkt auf der Seite bearbeiten, die Herkunft jedes Inhalts erkennen und eine Section als CMS-Eintrag nutzen. Dazu kommen Medien in Cockpit und Studio sowie Märkte und Übersetzungen. - [Inhalte in Content Collections pflegen](https://academy.laioutr.com/artikel/inhalte-in-content-collections-pflegen)6 Min. - [Entwürfe vor dem Veröffentlichen in der Vorschau prüfen](https://academy.laioutr.com/artikel/entwuerfe-in-der-vorschau-pruefen)5 Min. - [Medien in Cockpit und Studio verwalten](https://academy.laioutr.com/artikel/medien-in-cockpit-und-studio-verwalten)5 Min. - [Märkte und Übersetzungen in Studio pflegen](https://academy.laioutr.com/artikel/maerkte-und-uebersetzungen-in-studio-pflegen)6 Min. ## [Design und Marke](https://academy.laioutr.com/leitfaeden/design-und-marke) 4 Artikel Dieser Leitfaden erklärt, wie die Marke in die Storefront kommt. Er behandelt Design-Tokens und Themes, UI-Kit-Einstellungen für Farbskalen, Schriften und Icons, eigene Themes, Farbwähler mit Markenfarben, das Figma-Kit mit der Übergabe an die Entwicklung und Barrierefreiheit nach WCAG 2.1 AA. - [Design-Tokens und Themes verstehen](https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen)6 Min. - [UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen](https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen)7 Min. - [Mit dem Figma-Kit arbeiten und an die Entwicklung übergeben](https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben)10 Min. - [Barrierefreiheit nach WCAG 2.1 AA](https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa)6 Min. ## [Interaktion und Regeln](https://academy.laioutr.com/leitfaeden/interaktion-und-regeln) 0 Artikel Dieser Leitfaden zeigt, wie Elemente auf Besucher reagieren. Er erklärt, wie je Element Aktionen festgelegt werden, etwa ein Popup oder ein Sprung zu einer Section, und wie der Rule Builder Seiten, Sections und Blocks nach Bedingungen wie Markt, Sprache oder Region ausspielt. Alles ohne Code. ## 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/bereiche/studio#webpage", "@type": "WebPage", "name": "Academy Area", "url": "https://academy.laioutr.com/bereiche/studio", "breadcrumb": { "@id": "https://academy.laioutr.com/bereiche/studio#breadcrumb" }, "isPartOf": { "@id": "https://academy.laioutr.com/#website" }, "potentialAction": [ { "@type": "ReadAction", "target": [ "https://academy.laioutr.com/bereiche/studio" ] } ] }, { "@id": "https://academy.laioutr.com/bereiche/studio#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 } ] } ] } ```