Insert Menu, Layout & Design

Using the Insert Panel in Framer (Fundamentals Lesson 13)

Joseph

5:14

25K views

Jan 9, 2025

About this lesson

The Insert Panel in Framer is an absolute gold mine of premade layouts, elements, and interactive components to level up your sites in just a few clicks. Let’s take a quick tour to get familiar with all the great stuff at our disposal.

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

https://www.youtube.com/watch?v=gvm9HiKCeew&t=18s Accessing the insert panel

https://www.youtube.com/watch?v=gvm9HiKCeew&t=51s Basics category: page layouts and sections

https://www.youtube.com/watch?v=gvm9HiKCeew&t=97s CMS elements

https://www.youtube.com/watch?v=gvm9HiKCeew&t=125s Creative elements

https://www.youtube.com/watch?v=gvm9HiKCeew&t=148s Media elements

https://www.youtube.com/watch?v=gvm9HiKCeew&t=168s Forms

https://www.youtube.com/watch?v=gvm9HiKCeew&t=194s Icons

https://www.youtube.com/watch?v=gvm9HiKCeew&t=222s Interactive elements

https://www.youtube.com/watch?v=gvm9HiKCeew&t=256s Social elements

https://www.youtube.com/watch?v=gvm9HiKCeew&t=267s Utility components

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

🌞 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:00the insert panel and framer is an 0:02absolute Gold Mine of pre-made layouts 0:04elements and interactive components to 0:07level up our sites in just a few clicks 0:10let's take a quick tour to get familiar 0:12with all the great stuff we have right 0:13here at our 0:16[Music]0:17fingertips there are a couple of ways to 0:19get to the insert panel in framer we can 0:22either go to the very first icon on our 0:24toolbar and click insert which brings up 0:26the panel on the left hand side or at 0:29any time you can just press the letter i 0:31on the keyboard which not only brings up 0:33the insert panel but it also focuses the 0:35little search bar at the top of the 0:37insert panel so you could quickly press 0:39I and then just start typing what you're 0:41looking for so if I start typing YouTube 0:43Boom there's that YouTube component so 0:46that's a really handy way to access 0:48something if you're looking for 0:49something specific now in terms of 0:52what's available to us here in the 0:54insert panel we have a few different 0:56categories we have Basics where you'll 0:58find entire page P layouts that are 1:00pre-made for you you can click or click 1:03and drag and boom you get this entire 1:06three breakpoint page layout for desktop 1:09tablet and mobile all predesigned for 1:12you all you have to do is go in and edit 1:14the content or shift things around so 1:17way easier to start with than just 1:19having a blank page back to the insert 1:21panel if you don't need an entire page 1:23you can also grab an individual section 1:27and in addition to sections you'll also 1:29find navigation bars as well as menus 1:31that you can use either in conjunction 1:33with those navigation bars or by 1:35themselves now the CMS we haven't really 1:39dug into in this course we're going to 1:40have a whole other course dedicated to 1:43working with framers built-in content 1:44management system but here you will find 1:47collections and fields which might not 1:49mean anything to you now but once you 1:51start digging into the CMS and you have 1:53some content in there this is where you 1:55can go to pull content directly onto the 1:58canvas and start designing with your own 2:00real data again we'll get into that in 2:03another course then down below we get 2:06into the fun stuff in the creative 2:09category you'll find some pre-made 2:11components that let you do things that 2:13would otherwise take a few extra steps 2:15or require some code you'll find 2:17components like fit text an animated Arc 2:20of text that spins around and around 2:22some pre-made scribbles as well as a 2:24countdown timer and some other creative 2:27fun stuff then we have the media 2:29category where you'll find images and 2:31videos as well as components to embed 2:34third-party video players like Vimeo 2:37YouTube Etc you'll also find lot 2:40animations in here you can embed a 2:42Spotify player you can embed Apple music 2:45you can even embed an MP3 file of your 2:47own next we have forms and the very 2:50first thing you'll find in here is our 2:52own native form Builder which allows you 2:55to build a form without any code without 2:57any third party Integrations and we have 2:59a dedicated course on how to build 3:01awesome forms using framer but if you 3:04are working with a third party service 3:06like Loops or kit or MailChimp we've 3:09also got some of those thirdparty 3:11components in here that you can drag 3:12onto the canvas then we have icons and 3:16what's awesome about icons is that each 3:17of these is not an individual icon these 3:20are entire icon libraries so for example 3:22if I grab a phospher icon and drag it 3:25onto the canvas gives me a little house 3:27sure that is one icon but this 3:29represents the entire library of 3:31phosphor icons that we can toggle 3:33between using the properties panel on 3:36the right hand side and the same goes 3:38for all of these each one is a total 3:40jackpot of its own then we have 3:43interactive where you'll find a bunch 3:45more framer native components that you 3:47would otherwise need code to pull off so 3:50here we've got a local selector if 3:53you're working with multiple locals and 3:54you want folks to be able to choose 3:56between different languages on your site 3:58we have a framer native search bar where 4:00you get a sitewide search without 4:03writing any code we've got a cookie 4:05Banner to stay gdpr compliant we've got 4:08a ticker slideshow and even a carousel 4:11if you want images or logos that cycle 4:14by automatically pretty cool stuff then 4:17in the social category we have things 4:19like Instagram and Facebook embeds and 4:21we even have Google Maps so if you need 4:23a Google map for your contact page this 4:25is where you'll find it then finally we 4:28have our utility category which has a 4:30few more of those third party embeds you 4:32might be looking for like lemon squeezy 4:34and gum road but we also have some 4:36really handy native components like 4:38embed to embed your own snippet of HTML 4:40code we have a button to copy specific 4:42code or text to the clipboard we have a 4:45download button which you can attach 4:46your own file to as well as some 4:48additional thirdparty 4:50Integrations and there you have it like 4:52I said the insert panel is a total gold 4:55mine with everything from basic layouts 4:57to Advanced interactive components and 4:59it's all Dragon drop I'll see you in the 5:02next one

TeachesLayout Templates Components

Also coversBreakpoints Collections Keyboard Shortcuts

Watch on YouTube ↗

‹ What you might have missed in 2024

5 Powerful Design Features You Didn't Know Existed in Framer ›