---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections"
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)

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

# Build a landing page from existing sections

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.

## Before you start

<dl>

<dt>Plan</dt>
<dd>All plans</dd>

<dt>Role</dt>
<dd>Member with access to the project and permission to edit project content</dd>

<dt>Duration</dt>
<dd>10 min</dd></dl>

### Prerequisites

- Header and footer exist as global sections
- Images are in the media library or the connected DAM

Last reviewed on October 15, 2026

Campaigns, promotions and seasonal topics quickly need their own page. In Laioutr this is a task for the content team, not a development task, as long as the required sections are installed in the project.

**Landing Page** is a static page type. Each landing page is its own page with its own path, such as `/summer-sale`, and can be limited to specific markets. Header and footer are added as global sections so navigation and legal links stay the same everywhere.

A proven structure:

1. Hero with message, image and call to action
2. Benefits or USPs
3. Product slider with live data from a category
4. Image and text or testimonials for trust
5. Closing call to action

All sections from Laioutr UI come with accessibility, structured data and fast loading. The sections are designed for the Laioutr target values: LCP under 1.2 s, INP under 80 ms and CLS under 0.02.

## Step by step

1. 1 ### Step 1: Create the page

   Choose the **Landing Page** type via **Add page** and set name and path, such as `/summer-sale`.
2. 2 ### Step 2: Insert header and footer

   Insert the existing global sections as references in the header and footer areas.
3. 3 ### Step 3: Build the hero

   Insert a section tagged **Heroes** in the body and set heading, image and button. Pick the button target in the link field directly as a page, product or category.
4. 4 ### Step 4: Add content

   Insert and fill in sections for benefits, image and text or testimonials.
5. 5 ### Step 5: Add products

   Insert a product slider and choose the campaign category in its data field.
6. 6 ### Step 6: Maintain SEO

   Select the page and fill in meta title and meta description per language in the properties.
7. 7 ### Step 7: Review

   Check the page in the desktop, tablet and mobile device modes, also in landscape, and in all languages and markets.
8. 8 ### Step 8: Save and publish

   Save the changes with **Save** and go live with **Publish**.

## Check the result

After publishing, the landing page is reachable under its path, the product slider shows products from the chosen category, and the meta title and description appear in the page source.

## Frequently asked questions

Can the landing page appear in only one market?

Yes. The page properties can limit the page to specific markets. In other markets, the route then does not exist.

What is the difference to a content page?

Both types are static. A content page usually sits under a fixed path pattern such as `/pages/...`, while a landing page gets a freely chosen path, which suits campaigns.

Can an AI agent build the page?

Through Laioutr MCP, an agent can insert sections on an existing page, set text and arrange them. The team reviews the result in Studio and publishes itself.

What if a suitable section is missing?

Search the catalogue with filters and tags and check whether a Growth Kit provides the section. Otherwise, developers build it as a new section in an app.

## Related

- [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.
- [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.
- [Run campaigns with page variants](https://academy.laioutr.com/en/artikel/run-campaigns-with-page-variants)7 min

  For a campaign, the team adds another variant of an existing page, builds the campaign content there and controls through rules and publishing when and where the variant applies. The previous version stays untouched.
- [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.
- [Preview and publish changes in Studio](https://academy.laioutr.com/en/artikel/preview-and-publish-changes-in-studio)5 min

  Studio saves changes as a draft and shows them instantly in the live preview. Publish in the top bar takes the saved state to the storefront through a deployment of the environment.

## Learn it in a lesson

- [Build a landing page from existing sections](https://academy.laioutr.com/en/lektionen/frontend-manager-build-a-landing-page)12 min
- [The Agentic Frontend Manager role](https://academy.laioutr.com/en/lektionen/frontend-manager-introduction)4 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/build-a-landing-page-from-existing-sections#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#/schema/question/3"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#/schema/question/4"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#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": "Build a landing page from existing sections",
          "item": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#/schema/question/1",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Can the landing page appear in only one market?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Yes. The page properties can limit the page to specific markets. In other markets, the route then does not exist.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#/schema/question/2",
      "@type": "Question",
      "inLanguage": "en",
      "name": "What is the difference to a content page?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Both types are static. A content page usually sits under a fixed path pattern such as <code>/pages/...</code>, while a landing page gets a freely chosen path, which suits campaigns.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#/schema/question/3",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Can an AI agent build the page?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Through Laioutr MCP, an agent can insert sections on an existing page, set text and arrange them. The team reviews the result in Studio and publishes itself.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections#/schema/question/4",
      "@type": "Question",
      "inLanguage": "en",
      "name": "What if a suitable section is missing?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Search the catalogue with filters and tags and check whether a Growth Kit provides the section. Otherwise, developers build it as a new section in an app.</p>"
      }
    }
  ]
}
```