Using Layout Templates

Layout Templates let you reuse shared page structures across multiple pages. When you update a template, every page using it updates automatically.

What Layout Templates are for

Layout Templates are ideal for elements that repeat across your site, including navigations, footers or announcement banners. They also support shared page transitions and layout animations between pages.

Create a Layout Template

To create a Layout Template:

1. Select a page in the Pages panel.

2. In the properties panel, click the + icon next to Template.

3. Enter a name for the template.

4. Click Create.

If you create the template from the Home page, Framer automatically applies it to all compatible pages.

Apply a Layout Template to a page

To apply or change a Layout Template:

1. Select a page in the Pages panel.

2. Open the Template section in the properties panel.

3. Use the Layout dropdown to select a template.

To remove a template, click the − icon next to Template.

Understand the content slot

The content slot defines where each page’s unique content appears inside the shared layout.

Anything placed outside the content slot becomes shared across all pages using the template, such as navigations or footers.

Design responsive Layout Templates

Layout Templates support responsive breakpoints just like regular pages.

To make a template responsive:

1. Open the Layout Template from the Templates section in the Assets panel.

2. Add Tablet and Mobile breakpoints.

3. Customize each breakpoint independently.

For example, you can replace a desktop navigation with a hamburger menu on mobile devices.

Use Variables in Layout Templates

Variables let you customize templates on a per-page basis.

To add a Variable:

1. Open the Layout Template.

2. Add a Variable from the Variables panel.

3. Select a page using the template.

4. Adjust the Variable value in the Template section of the properties panel.

This is useful for layouts where certain pages need different configurations, such as hiding a sidebar.

Manage Layout Templates

You can manage all templates from the Templates section in the Assets panel.

Available actions include:

• Rename templates

• Duplicate templates

• Delete templates

When a template is deleted, pages using it revert to having no template.