Templates, Navigation

Layout Templates: Mobile Menus, Page Effects, and Sidebars

Layout Templates: Mobile Menus, Page Effects, and Sidebars

Layout Templates: Mobile Menus, Page Effects, and Sidebars

Benjamin

·

5:02

·

8.5K views

·

Feb 12, 2025

About this lesson

This release introduces new Layout Template workflows and fixes. First, we’ve made it easier to design mobile menus in Layout Templates that work consistently across all platforms, like Safari on iOS. No custom workarounds needed. Next, layers in Layout Templates can now be excluded from Page Effects. And finally, in this video, learn how to make a Layout Template customizable with Variables to support unique layouts, like documentation pages with sidebars. https://www.framer.com/updates/layout-template-updates

🌞 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:00yo my name is Benjamin and in this video 0:03I'd like to show you some extra layout 0:06template use cases starting with mobile 0:10navigations here on desktop our 0:13navigation switches back to its default 0:15State when we switch Pages now let's 0:19have a look at the mobile version as we 0:21switch Pages the navigation stays open 0:25this is something we don't want on the 0:27phone breakpoint so let's go ahead and 0:30fix in the navigation you'll see we use 0:33interactions to switch between the phone 0:36closed and the phone open variants with 0:39layout templates we have full control 0:41over these states meaning we can decide 0:43what happens when we switch pages so to 0:46fix the previous issue I can select 0:49these links and add interactions that 0:52say onclick go back to the closed 0:55variant so for each link I'm adding an 0:58interaction back to the closed variant 1:02and there we go so this should do the 1:04trick let's go back and give this 1:06another 1:08preview so let's open our menu and now 1:12when I click any of these links our menu 1:14gently animates back to its default 1:18State and we have full control over the 1:21transition and animation settings here 1:24for example if we wanted this to be 1:26instant we can go back to the component 1:30select this variant and set the 1:33transition property to 1:35instant and then our links will behave 1:38just as if there were no layout 1:39templates applied at all this is up to 1:42you you have full 1:46control next we have a new property 1:48allowing you to define whether or not a 1:51layer should be included or excluded 1:53from page effects sometimes you don't 1:57want elements like this navigation to be 2:00included in the page effect transition 2:04so I will select the layers I wish to 2:06exclude go to the Styles menu select 2:09page effect and this will be set to 2:11exclude by default now if I go back you 2:14can see that these elements ignore the 2:18existing page 2:19effects finally let's have a look at 2:22using a single layout template with 2:25properties to adapt to different use 2:27cases on this website we have a layout 2:31template with a top bar and a footer but 2:34we also have documentation Pages where 2:37we wish to add a sidebar so we can add 2:40this sidebar to our layout template and 2:43I have it right here with position set 2:46to fixed but it's overlapping our footer 2:50and if we go back to the homepage you 2:52can see it's now visible on every single 2:55page this is not ideal so we could use m 2:59multiple templates but in this case I 3:01want documentation to be a part of our 3:04top bar navigation with a shared layout 3:07animation so it benefits from being in a 3:09single template so what I'll do instead 3:12is I'll add a new toggle variable and 3:14I'll call it sidebar and we can use this 3:17to control multiple properties within 3:20our layout template most pages won't 3:23have this sidebar so I'll set the 3:25default to no then I'll first connect it 3:28to the visible property of my sidebar 3:31component to make sure it's hidden when 3:34the sidebar is set to know then I'll 3:36select the entire desktop breakpoint 3:38here and I'll connect this variable to 3:41padding allowing us to convert the yes 3:43or no value to Unique combinations of 3:46padding simply put when this sidebar 3:49value is set to yes I want to make sure 3:51padding left is set to 200 pixels and 3:54when it's set to no use our default 3:57padding values and that should do the 4:00trick just like that we made a 4:02customizable layout template we have 4:05this sidebar property set to no on all 4:08pages and I can go to the documentation 4:11index and CMS detail pages and set it to 4:15yes so first the index page and then our 4:19detail pages and that's it everything is 4:22set up 4:24correctly and now if we give this a 4:26preview you can see we get the correct 4:29layout for our sub Pages we get an 4:31active State animation to the 4:33documentation pages and we have a custom 4:36sbar layout on these docks that's it for 4:41this video thank you so much for 4:43watching I hope it was helpful and stay 4:46tuned for more updates coming soon 4:57[Music]

TeachesLayout Templates

Also coversBreakpoints CMS Pages / Dynamic Content Component Variants Components Links Sizing Spacing Templates Transitions & Easing Variables

Watch on YouTube ↗

‹ Link and Color Styles in Framer (Fundamentals Lesson 18)

2024 Framer Awards: Announcing the Winners ›

More in this topic

How to get the most out of Framer for Free

How to get the most out of Framer for Free

Animations15K views · 8 months ago

Framer Marketplace: Introducing Components

Framer Marketplace: Introducing Components

Announcement9K views · 10 months ago

Framer Update: Linking with Rel, Parameters, and more

Framer Update: Linking with Rel, Parameters, and more

Framer Update8K views · 1 year ago

Framer Update: Layout Templates

Framer Update: Layout Templates

Framer Update100K views · 1 year ago

Framer Marketplace Update: Creator Dashboard

Framer Marketplace Update: Creator Dashboard

Framer Update6K views · 1 year ago

The New Framer Marketplace

The New Framer Marketplace

Announcement6K views · 1 year ago

AI Startup Website Kit - Free for Framer and Figma

AI Startup Website Kit - Free for Framer and Figma

Templates448K views · 1 year ago

Framer Update: App History

Framer Update: App History

Framer Update4K views · 2 years ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.