> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/page-layout-component-in-experience-builder/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://zuora.ferndocs.com/_mcp/server.

# Page layout component in Experience Builder

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

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.

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

## Docs

- [Page layout customization and replacement](https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/page-layout-component-in-experience-builder/page-layout-customization-replacement.md): Customize the page layout or replace the default page layout to control shared navigation, structure, and styling across pages in your project.