--- title: "Academy Area" canonical_url: "https://academy.laioutr.com/en/bereiche/studio" locale: en meta: "og:title": "Academy Area" --- [Go to home](https://academy.laioutr.com/en) - [Studio](https://academy.laioutr.com/en/bereiche/studio) # Studio **Studio** is the visual editor of Laioutr with live preview. Pages are built from Sections and Blocks, filled with shop data and content from content collections and adapted for markets and campaigns through variants. The area explains page types, global sections, preview and publishing, content and media, design tokens, the Figma kit, accessibility and rules for delivery. It is written for content managers, editorial teams and Agentic UX Designers who build and maintain pages. ## [Building pages](https://academy.laioutr.com/en/leitfaeden/building-pages) 9 articles This guide is the introduction to Studio. It shows page types, pages and variants, adding Sections and Blocks, global sections for header and footer, filling sections with shop data, and landing pages, campaigns and page type recipes for home, product listing, product detail and content. - [Studio at a glance](https://academy.laioutr.com/en/artikel/studio-at-a-glance)5 min - [Create pages and variants from page types](https://academy.laioutr.com/en/artikel/create-pages-and-variants-from-page-types)6 min - [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min - [Find sections: library, Growth Kits, tags and search](https://academy.laioutr.com/en/artikel/find-sections-library-growth-kits-tags-search)4 min - [Global sections for header, footer and recurring content](https://academy.laioutr.com/en/artikel/global-sections-for-header-footer-and-recurring-content)5 min - [Fill sections with shop data](https://academy.laioutr.com/en/artikel/fill-sections-with-shop-data)7 min - [Build a landing page from existing sections](https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections)10 min - [Run campaigns with page variants](https://academy.laioutr.com/en/artikel/run-campaigns-with-page-variants)7 min - [Page type recipes: home, product listing, product detail, content](https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content)6 min ## [Publishing and approvals](https://academy.laioutr.com/en/leitfaeden/publishing-and-approvals) 1 article This guide explains how changes from Studio go live. It covers preview and publishing, the page states draft, in review and live, the approval workflow, publishing pages and entries together and on a schedule, publishing without a deployment, and the history. It is written for editorial teams. - [Preview and publish changes in Studio](https://academy.laioutr.com/en/artikel/preview-and-publish-changes-in-studio)5 min ## [Content and media](https://academy.laioutr.com/en/leitfaeden/content-and-media) 4 articles This guide shows how to work with content: maintaining content collections, checking drafts in the preview, editing CMS entries directly on the page, seeing where each piece of content comes from and using a section as a CMS entry. It also covers media in Cockpit and Studio, and markets and translations. - [Manage content in Content Collections](https://academy.laioutr.com/en/artikel/manage-content-in-content-collections)6 min - [Check drafts in the preview before publishing](https://academy.laioutr.com/en/artikel/check-drafts-in-the-preview)5 min - [Manage media in Cockpit and Studio](https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio)5 min - [Maintain markets and translations in Studio](https://academy.laioutr.com/en/artikel/maintain-markets-and-translations-in-studio)6 min ## [Design and brand](https://academy.laioutr.com/en/leitfaeden/design-and-brand) 4 articles This guide explains how the brand gets into the storefront. It covers design tokens and themes, UI kit settings for colour scales, fonts and icons, custom themes, colour pickers limited to brand colours, the Figma kit with handover to development, and accessibility to WCAG 2.1 AA. - [Understanding design tokens and themes](https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes)6 min - [UI Kit settings: colours, fonts, icons and versions](https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions)7 min - [Work with the Figma Kit and hand off to development](https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development)10 min - [Accessibility according to WCAG 2.1 AA](https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa)6 min ## [Interaction and rules](https://academy.laioutr.com/en/leitfaeden/interaction-and-rules) 0 articles This guide shows how elements react to visitors. It explains how actions are defined per element, such as opening a popup or jumping to a section, and how the Rule Builder shows pages, sections and blocks based on conditions such as market, language or region. All without code. ## 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/bereiche/studio#webpage", "@type": "WebPage", "name": "Academy Area", "url": "https://academy.laioutr.com/en/bereiche/studio", "breadcrumb": { "@id": "https://academy.laioutr.com/en/bereiche/studio#breadcrumb" }, "isPartOf": { "@id": "https://academy.laioutr.com/#website" }, "potentialAction": [ { "@type": "ReadAction", "target": [ "https://academy.laioutr.com/en/bereiche/studio" ] } ] }, { "@id": "https://academy.laioutr.com/en/bereiche/studio#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 } ] } ] } ```