Layout Templates — How to Use Framer Templates #5

What are layout templates?

Layout templates work similarly to components, but instead of individual elements, they are used for entire pages.

They allow you to define a shared structure that can be reused across multiple pages — for example, a navigation bar, footer, or overall page layout.

If you want the same navigation bar and footer on every page, layout templates are the best solution.

Instead of copying these elements to every page, you place them inside a layout template and assign that template to each page.

This way

• You edit the layout once

• Changes apply to all pages using that template

This saves time and helps keep your website consistent.

Using a layout template

To use a layout template, open a page and assign the template to it. You can do this by selecting the page element and finding Layout Templates at the top of the right panel.

Once applied, the page will inherit the structure from the layout template, including all elements that are part of the layout template, such as the navigation bar and footer.

The page’s own content will be placed into the placeholder areas defined inside the layout template.

Editing layout templates

When you need to change the layout globally, edit the layout template itself.

To do this

• Open the Assets panel

• Find the layout template

• Click on it to open and edit it

You edit a layout template just like a normal page. The main difference is that it contains placeholder elements, which are replaced by the content of individual pages.

Any changes you make to the layout template automatically update all pages using it.

Using variables in layout templates

Layout templates can also use variables.

Variables allow you to change specific parts of the layout per page, while keeping the overall structure the same.

For example, you can

• Switch between different navigation variants

• Change the background color for a specific page

• Hide or show sections from the layout template

This gives you flexibility without breaking the shared layout.

Now you know how to use layout templates to manage shared page structure efficiently. You can update layouts globally and keep pages consistent with ease.