Layout & Design

Using Layout Templates in Framer (Fundamentals Lesson 22)

Joseph

12:22

52K views

Mar 12, 2025

About this lesson

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.

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=0s Intro

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=11s Why use layout templates in Framer

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=34s How layout templates save time and keep pages consistent

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=76s Creating your first layout template

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=113s Understanding the template canvas and placeholder frame

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=175s Adding a footer to your template

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=210s Applying and managing templates across pages

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=278s Switching, adding, and removing templates

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=326s Managing templates in the assets panel

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=364s Making templates flexible with variables

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=421s Adjusting padding with variables

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=529s Adding a variable for nav style variants

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=591s Using toggle variables for padding

https://www.youtube.com/watch?v=ew1m1OmrHM4&t=710s Wrap up

Benjamin's Layout Templates video: https://www.youtube.com/watch?v=B3_Ps0Oo1pU

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00components and styles make larger 0:02projects infinitely more manageable but 0:04even still when we have tens or even 0:06hundreds of pages the pages themselves 0:08can share a lot of repeating structure 0:11think things like navigation bars 0:13Footers or even properties of the page 0:15itself like wi padding or background 0:17color one it's a shame to have to repeat 0:20the same work every time we create a new 0:22page and two making a simple change like 0:25switching your Navar to fixed 0:27positioning could mean having to tweak 0:29page after page after page this is where 0:33layout templates and framer come in 0:34allowing us to take repeating Global 0:36elements and properties and save them as 0:39a template which not only makes creating 0:41new pages much faster and keeps Pages 0:44more consistent but also gives us a 0:46central place to make Global changes to 0:49Pages across our entire site let's take 0:52a look at how layout templates and 0:53framer 0:56work before we jump in layout templates 0:59have some awesome tricks up their sleeve 1:01when it comes to more advanced 1:03interactions and animations and we have 1:05an awesome video by Benjamin where he 1:07digs into that stuff in this video we'll 1:10just hit the basics but I'll put a link 1:12to Benjamin's video in the description 1:14below for when you're ready to get into 1:15the crazy stuff let's start by creating 1:18our first layout template there are a 1:20few different ways to create a layout 1:22template but I'll start with the little 1:23trick that I use most often I know I 1:26want my Navar to be part of my template 1:28since I want it on every page of my site 1:31so I'll right click on the nav bar 1:32itself and choose create layout template 1:36I'll give it a name like main layout and 1:39before I click create I want to point 1:40out that this modal gives us a heads up 1:42that this first template will be applied 1:44to all pages automatically which is 1:47great saves us a step just like 1:49components we edit a layout template in 1:51a dedicated canvas view let's take a 1:54look at the anatomy of this whole thing 1:55we have our breakpoint or break points 1:58which we'll get into in a later lesson 1:59and with my desktop breakpoint selected 2:02I can see on the properties panel we 2:04have our width set to 1,200 fixed and we 2:07have a height that's set to a th000 now 2:10the height is automatically going to 2:12adapt to the content of each page that 2:14our templates applied to so we can 2:16largely disregard this we can just 2:18increase or decrease the height as we're 2:20editing the template if we need more or 2:22less space for ourselves here and within 2:24our breakpoint we have the nav bar 2:26because I right-clicked on it and 2:27created this layout template from the 2:29Navar which adds it automatically and we 2:31have arguably the most important part we 2:34have this placeholder frame here and the 2:36placeholder frame here represents all of 2:39the content that's going to be populated 2:41from each page that this template is 2:43applied to so right now we're not going 2:45to see anything but when we go to our 2:47Pages after we're done here we're going 2:49to see the content of the pages appear 2:51within or in place of this placeholder 2:55so let's make sure our layout template 2:57has everything that we want to apply to 2:59every page we have our navbar I want 3:02that on every page we have the content 3:04which is going to replace the 3:05placeholder and we're just missing our 3:07footer but I do have a footer component 3:10that I've created so I'll head to the 3:12assets panel I will grab the footer and 3:14I will drag it here to the bottom to 3:16insert it and it might look like the 3:18placeholder area got squashed but again 3:21this is going to expand or contract to 3:23fit the content of the page once the 3:26template's applied so let's take a look 3:28and see what happened I'm going to head 3:29back to the homepage and there is my 3:31Navar and now you can see this little 3:33dash line around it which reminds me 3:35that it's part of the template and not 3:36part of this page and in fact when we go 3:39look at the layers panel we no longer 3:41see the Navar as part of the page 3:44content it's no longer here so it's kind 3:47of out of sight out of mind it gets 3:48inherited from the template that's 3:50applied and we can see the template 3:52that's applied by selecting the 3:53breakpoint itself you'll see the name of 3:55it at the top of the properties panel 3:58but I do see my footer here and that's 4:00because I had the footer included as 4:02part of this page content when I applied 4:05the template so applying a template to 4:07an existing page you may have to clean 4:09up some of that duplicated content so 4:12I'll just delete the footer since it's 4:13getting inherited from the layout 4:14template and now you can see that really 4:16the only content on this page is the 4:19hero section up here and the featur 4:22section down here the rest of it is 4:24coming directly from that layout 4:26template and if I head to my pages we 4:28can look at pricing we can look at blog 4:30they've all got that navbar and they've 4:32all got that footer again our first 4:35layout template gets applied to all of 4:36our Pages automatically but we can also 4:39apply or remove templates on a page by 4:41Page basis to choose which layout 4:43template is applied we can select the 4:45breakpoint and here at the top of the 4:47properties panel we see the name of the 4:50template that's applied we can click to 4:52switch to a different template if we 4:53have several of them that we've created 4:55or we can hit the minus sign here to 4:58disconnect this page from the template 5:00and in doing so all the elements that 5:02were part of the template will disappear 5:05and similarly if you have a page that 5:07doesn't have a template applied you can 5:08click the plus sign to add a template 5:10and you can choose which one you want to 5:12have applied from the little drop- down 5:14menu here you can also edit a template 5:16from here or you can just double click 5:18on any element that's part of the layout 5:19template on the canvas and it'll bring 5:21you back into that dedicated canvas view 5:24where we can make edits to the template 5:25itself and when it's time to manage our 5:28layout templates we head to the same 5:29place we manage all of our other assets 5:31the assets panel you'll see a list of 5:34all of the layout templates in the 5:35project at the very top from here you 5:37can create new layout templates too by 5:39clicking on the plus icon or create 5:41folders to organize your templates as 5:44you create more and more of them and 5:46from the overflow menu for each template 5:48you can edit which you can also do by 5:50just clicking once on the name rename 5:53which you can also do by double clicking 5:55on the name duplicate this whole 5:57template or delete it you'll of course 6:00run into situations where your first 6:02layout template doesn't mesh perfectly 6:04with the content of a page on this last 6:06page of my site the navbar is above the 6:09hero area just like it sits above the 6:11page content on every other page but on 6:13this page I'd really rather the Navar 6:16overlap this blue background and be an 6:18inverted variant with white text and a 6:21white CTA button your first instinct 6:24might be to create another layout 6:25template for this page and other Pages 6:27like it but much like we learned 6:29components in the previous lesson we can 6:31use variables to make a layout template 6:34much more flexible let's try creating 6:36some variables to make our first layout 6:38template work for this page too so again 6:41to edit our layout template I'm just 6:42going to double click on the Navar since 6:44that's an element that's part of the 6:46template and then here we are in the 6:48dedicated canvas editing the template 6:49itself now if we want the nav bar to be 6:52able to overlap the content below it we 6:54don't want it to be set to relative 6:56otherwise it's going to push everything 6:57down so I'm going to switch that from 6:59relative 7:00to Absolute and similarly if you wanted 7:03the nav bar to remain fixed in place you 7:04could do fixed instead but I'm just 7:06going to do absolute for now and you can 7:08now see immediately that the placeholder 7:10slid up and the navbar now overlaps it 7:13so we're part of the way there but we 7:14don't want that to happen on every page 7:16on most of our Pages we want the 7:19placeholder content to be pushed down by 7:2180 pixels because that's how tall our 7:23navbar is because we don't want it to 7:25accidentally overlap anything it's just 7:27that one page that we want to be able to 7:29overlap so I'm going to select the break 7:32point itself I'm going to break apart 7:35our padding into separate values here 7:37and I'm going to add that 80 pixels of 7:39padding so we're sort of back where we 7:41started and then on the Navar itself 7:44we've got a fixed pixel width here I'm 7:45also going to change that to relative so 7:48that it automatically fills 100% of the 7:50browser so now we're sort of right back 7:53where we started but now we at least 7:55have this padding value that we could 7:57play with so that we could expand or 7:59collapse that extra space at the top but 8:02currently this padding exists just 8:04within the template itself so this value 8:06of 80 is going to be shared across every 8:08page that uses this template but 8:11templates are a lot like components and 8:13if you remember from the previous lesson 8:15we can bubble this property up to be 8:17editable at the instance level by adding 8:19a variable so I can click on the padding 8:22here I can choose to create a variable 8:24it's automatically going to name it 8:25padding it's going to default to 80 8:27which I want because most of my page are 8:29going to need that padding but now I'm 8:31going to have a value to edit on the 8:33pages that need this to be different on 8:35the pages that need that Gap at the top 8:37to be zero so that the nav overlaps 8:39everything and the other thing that 8:41we're going to need to do to avoid the 8:43button and text clashing on a dark 8:45background is to allow ourselves to 8:47switch between two different variants of 8:49this nav bar at the page level and 8:51you'll find that with this nav bar 8:52selected I do have an inverted variant 8:55but if I apply that variant here again 8:57it's going to change it on every page 8:59that uses this template so instead I'll 9:01leave it on default because most pages 9:03are going to work best with this default 9:05appearance but I'm going to add a 9:07variable to this variant and variant's 9:10not a very descriptive name I'll call it 9:13nav style so now I have two variables 9:16for myself I have padding that I can 9:18adjust on individual pages and I have 9:20the nav style that I can adjust on 9:21individual pages so let's head back to 9:23that page where we want the nav bar to 9:25overlap and here see those properties 9:28get bubbled up to the page level where I 9:30can now say I would like the top padding 9:32to be zero and I would like the nav 9:35style to be inverted and there we go 9:38those properties are overwritten on this 9:39page but if we go and look at any of our 9:42other Pages they're still set to those 9:44default properties since I haven't 9:46overridden them here or here or here now 9:50another way to go about this just to 9:51push things even further is since I know 9:54I'm only ever going to want this to be 9:5680 or zero I'm not going to want it to 9:59be anything in between I'll show you a 10:01little trick I'm going to double click 10:02my navbar to go back in and edit the 10:04layout template here and I'm going to go 10:06back to variables and instead of having 10:09this padding variable that allows me to 10:11type in whatever number I want I'm 10:13actually going to get rid of that I'm 10:14going to rightclick and remove it I'm 10:17instead going to click the plus sign and 10:19I'm going to add a toggle variable and 10:22this toggle variable just gives me a yes 10:24or no question and what I'm going to do 10:27is I'm going to name this top padding do 10:31I want the top padding yes or no and 10:34right now there is no difference between 10:36choosing yes or no because it's not 10:38connected to any value yet but if I come 10:41over here to the padding property and I 10:43choose to add a variable rather than 10:45creating a new variable I'm going to set 10:47an existing variable I'm going to choose 10:49my existing top padding variable and 10:52what I'm going to do is I'm going to 10:54convert that yes or no into 0 pixels or 10:5880 pixels so I'm going to choose convert 11:02and here I can say when yes let's have 11:05that add 80 pixels of top padding 11:08because yes we want padding and when no 11:12let's have it set to zero pixels of top 11:14padding because no we don't want the top 11:16padding and that's it now we have a yes 11:19or no variable that's going to translate 11:21to 80 pixels of top padding or zero 11:23pixels of top padding so let's go back 11:25to this page and right now top padding 11:27is set to yes because that's the default 11:29and again that's what makes sense for 11:31most of our pages but if I switch it to 11:33no no equals zero top padding if I 11:35switch it to yes yes equals 80 pixels of 11:38top padding so now I don't have to worry 11:39about getting any math right I don't 11:41have to worry about getting my numbers 11:43right remembering how tall the top nav 11:45is remembering it's 80 pixels I just 11:47have one simple variable for yes or no 11:50and there you have it now you know what 11:52layout templates are for and how they 11:53work under the hood how to create them 11:55and apply them to Pages how to edit them 11:58and make global changes to potentially 12:00tens or even hundreds of pages in just a 12:02few clicks and how you can use variables 12:05to make your templat super flexible 12:08that's it for this one I'll see you in 12:10the next one

TeachesLayout Templates

Also coversAuto-Translate Breakpoints Component Variants Components Frames Links Plans & Pricing Sizing Spacing Sticky & Fixed Templates Variables

Watch on YouTube ↗

‹ Framer Update: Mobile-Friendly CMS

Framer Update: CMS Tables ›