Skip to navigation

Page layout component in Experience Builder

View as Markdown

The page layout component in Experience Builder is a reusable wrapper that provides shared structure, behavior, and styling across pages in an app project.

When you create an app project in Experience Builder, a default page layout component is created automatically. The page layout acts as a shared wrapper for pages in the project, providing common structure and behavior around page content.

By default, pages are rendered inside the page layout component. Changes made to the layout are reflected across all pages that use it.

Because the page layout is a standard component, you can customize it to match your experience design, navigation requirements, and branding.

What the default page layout provides

The default page layout component provides a foundation that can be reused across pages in a project. Depending on your implementation, the layout can include capabilities such as:

  • Responsive layout behavior
  • Dark and light theme support
  • Shared navigation elements
  • Common page structure
  • Customizable loading states

Using a shared page layout helps ensure a consistent user experience across pages.

How page layouts relate to pages and components

In Experience Builder, pages represent user-facing destinations within an experience. Components are reusable UI elements that can be shared across multiple pages.

The page layout component is a reusable component that wraps page content and provides shared functionality for pages in the project. Instead of configuring the same structure on every page, you can define it once in the page layout and reuse it throughout the experience.