---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/en/lektionen/frontend-manager-build-a-landing-page"
locale: en
meta:
  "og:title": "Academy Lesson"
---

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

- [Agentic Frontend Manager](https://academy.laioutr.com/en/lernpfade/frontend-manager-learning-path)

- [Build a landing page from existing sections](https://academy.laioutr.com/en/lektionen/frontend-manager-build-a-landing-page)

Landing page from existing sections

# Build a landing page from existing sections

12 min

A landing page is built in Studio from sections the project already has: hero, card grid, testimonials, CTA or product slider. This lesson shows how a briefing becomes a page structure, how suitable sections are found in the library and how the page is finished without development work.

## Key takeaways

- A briefing is first translated into a sequence of sections.
- The library offers filters by tags and Growth Kits.
- A landing page needs no development work.

## Read more

- [Build a landing page from existing sections](https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections)10 min

  A landing page is created in Studio as a Landing Page type page with its own path and is assembled from installed sections: hero, content, a product slider with shop data, and header and footer as global sections.
- [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.
- [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.

## 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/frontend-manager-build-a-landing-page#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/en/lektionen/frontend-manager-build-a-landing-page",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/lektionen/frontend-manager-build-a-landing-page#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/lektionen/frontend-manager-build-a-landing-page"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/frontend-manager-build-a-landing-page#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic Frontend Manager",
          "item": "https://academy.laioutr.com/en/lernpfade/frontend-manager-learning-path",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Build a landing page from existing sections",
          "item": "https://academy.laioutr.com/en/lektionen/frontend-manager-build-a-landing-page",
          "position": 3
        }
      ]
    }
  ]
}
```