Using Layout Templates in Framer

Components and styles make larger projects infinitely more manageable. But even still, when we have tens or even hundreds of pages, the pages themselves can share a lot of repeating structure.

Think things like navigation bars, footers, and even properties of a page itself like width, padding, and background color.

One: it’s a shame to have to repeat the same work every time we create a new page.

And Two: Making a simple change — like switching your navbar to fixed positioning could mean having to tweak page after page after page.

This is where Layout Templates in Framer come in, allowing us to take repeating global elements and properties, and save them as a template.

Which not only makes creating new pages much faster and keeps pages more consistent, but also gives us a central place to make global changes to pages across our entire site.

[plantbasedguerilla]

Joseph does a great job explaining features! 👌

[matinkabiri]

Very useful!
Thanks for the video. You explain everything better than any other YouTuber—and even Framer’s own engineers! You should take over all of Framer’s videos.

[maddada]

This is awesome, I used to have to add the header and footer on every page when I was working with framer last year.

Great job!

[safa]

Very clear Video! Thanks for the great work!!!

[PaoloLunardon]

Great, but should implement the possibility to create a fixed footer that is revealed by the contet above (classic style now a days) within the template (maybe there's a way but i didnt find it)

[overgronE]

Is it possible to connect a layout template variable to a cms item? For example, on a blog post, show an image specific to that single post?

[jacobalexander]

Can you add a function so that mobile navigation closes when clicking a link? This is one flaw I see when using layouts, unfortunately.

[miprimerdepa]

Layout templates need to include breakpoints, right?