Design the site layout

• Sign in with an account that can open the layout builder. It needs admin:dashboard:runtime:layout or admin:dashboard:code. See How permissions work.
• Every site already has a layout named site-main, which draws, from top to bottom, the header, the section bar of a section such as the blog, the page and the footer. The header shows a language switcher for a page in two or more languages. You can edit it instead of making a new one.
• A layout with no site belongs to every site, and only a master can edit it. A site account can pick it for its pages and edit its own site's layouts. See Sites, masters and global records.

The site-main layout draws the header, the section bar, the page and the footer.

1. In the admin sidebar, under Runtime, click Layouts.
2. Click + Add Layout. The editor opens with the Name your layout dialog.
3. Enter a Name and a Path. The path must differ from every other layout path on the site. The starter layout uses /layouts/site-main.
4. If you are signed in as a master, choose the Site, or leave it on Global (no site) for a layout every site can use.
5. Click Create.

A new layout is saved as inactive and starts as one centred container that already holds the place where the page goes. Publishing makes it active.

A layout draws a page through one expression, @inner_content. On the canvas it appears as a chip. If that chip is gone, every page that uses the layout shows the header and footer and no content.

• Build the header and footer around the chip. In the left panel, the Blocks tab has the Header, Nav and Footer elements and the Footer block, and the Components tab has the site's own components.
• To put the chip back, open the Blocks tab, search for Page content, click it, then click the canvas or a row in Layers to say where it goes. It lands at the end of the container you click. You can also drag the card onto the canvas. The element is only offered in the layout builder.
• Keep it visible. If you hide the element that holds it from visitors, the layout stops drawing the page.

The Audit tab checks this. Its Structure group reads The page renders inside this layout when all is well and This layout renders no page when it is not.

The chip in the middle is where each page appears.

1. Click Draft at the top right, then choose Published. The button changes to Publish.
2. Click Publish. The editor confirms with Layout published.

The CMS compiles the layout in a background job, and the pages that use it update.

1. Open the page in the visual editor.
2. Click the page's name at the top left, shown as a file name such as about.heex. It carries the tooltip Name and path. The Page settings window opens on its General tab.
3. In Layout, search for the layout and pick it. The list holds No Layout, the page's own site's layouts and the shared ones. Every site starts with two layouts, auth for its sign-in pages and site-main for every other page, so a fresh site lists No Layout, auth, site-main and any layout you made. No Layout draws the page inside the application's default layout.
4. Click Save Changes.

In the Pages list you can do the same: click View on the row, then Edit, or click the pencil icon, Edit, on the row itself. Then set Layout in the form.

The Layout field lists the site's layouts and the shared ones.

1. Click + Add Layout. Name it main and give it the path /layouts/main.
2. In the Blocks tab, click the Header element, then click the container on the canvas. Click the Footer block, then click the container again. Each lands at the end of the container, below the @inner_content chip, so drag the header's row in Layers above the chip. Edit their words on the canvas.
3. Check that the Audit tab reads The page renders inside this layout. Publish the layout.
4. Open a page, click its name at the top left and set Layout to main. Save Changes.
5. Open the page's address. The header and footer wrap its content.

• Build a page in the visual editor: what goes inside the layout.
• Draw an extension's pages in the site layout: for developers, hang an extension's pages on site-main.
• Customize error pages: error pages are drawn in their own shell, not in a layout.
• Add custom CSS, JS hooks and components: styles and components for the header.