Layout & Design

Adding Images, Videos, and Text in Framer (Fundamentals Lesson 12)

Joseph

6:08

87K views

Dec 30, 2024

About this lesson

With the fundamentals of frames, stacks, and layout down we’re ready to add some content to our pages.

Images, videos, and text are really the name of the game.

Great content combined with great layout gets us pretty darn far in designing great sites. So let's look at how to add this stuff to our pages and the properties that come with it.

Learn more about how Framer optimizes images:

https://www.framer.com/help/articles/how-are-images-optimized-in-framer/

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

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=19s Adding images to the canvas

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=93s Supported image formats and optimization

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=152s Adjusting image fit and position

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=208s Using focal point for better composition

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=229s Adding video content

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=279s Embedding YouTube and Vimeo videos

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=281s Adding text to the canvas

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=334s Text box sizing options

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=336s Quick text box creation trick

https://www.youtube.com/watch?v=0Dtzf-EBEoQ&t=344s 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:00with the fundamentals of frames stacks 0:02and layout down we're ready to add some 0:04content to our Pages images videos and 0:08text are really the name of the game 0:10great content combined with great layout 0:12gets us pretty darn far in designing 0:14great sites so let's take a look at how 0:16to add this stuff to our pages and some 0:18of the properties that come with 0:20[Music]0:21it let's start by adding some images 0:24there are several ways to get an image 0:26on the canvas so I'll show you a few and 0:29you can use whichever one works best for 0:30you you might be familiar with the first 0:32way which is to just drag and drop an 0:34image file from your computer directly 0:36onto the framer canvas what we get is 0:39really just a frame with an image fill 0:42which is really no different from 0:43drawing a frame adding a fill set to 0:46image and choosing which image we want 0:49either by browsing or dragging an image 0:51file directly into this box you can also 0:54use plugins to grab images from sources 0:56like Lumi and unsplash if you know 0:59you're creating aame that you'll 1:00eventually fill with an image you can 1:02also head to the layout menu on the 1:03toolbar and choose image this will let 1:06us draw a frame with a placeholder image 1:09fill in one step then when we're ready 1:12we can add our own image in the fill 1:14properties one cool advantage to the 1:16first method of dragging and dropping an 1:18image file directly onto the canvas is 1:20that framer remembers the original or 1:22intrinsic size of the image which means 1:25we can quickly get back to the actual 1:28dimensions of this asset by right 1:30clicking and choosing intrinsic size 1:33while we're talking about actual assets 1:35and size let's talk file formats for a 1:37sec because framer supports a wide range 1:39of them for raster images we have jpeg 1:43PNG webp GIF or GIF whatever you want 1:48Tiff and avif and for vector graphics of 1:51course SVG one of the massive favors 1:55that framer does for us automatically is 1:58optimizing our images for the web 2:00converting them to efficient formats 2:01while keeping the quality High when our 2:04site is published in the properties of 2:06an image fill we get some options for 2:08resolution but we recommend leaving this 2:11on auto quite a bit happens behind the 2:13scenes but the tldr is that framer will 2:16automatically convert most images to 2:18avif and downscale them to match the 2:20width on the site and the screen 2:22resolution that they're being displayed 2:23on if you want to nerd out on more of 2:25the details we have a great article on 2:27framer dcom that I'll link to below 2:30back to the image properties we also get 2:32to change the way the image fits within 2:34the frame which should be familiar to 2:36you from figman sketch when the frame 2:38becomes different proportions than the 2:40image that's filling it it's important 2:42to choose how the image is positioned 2:44within the frame let's look at an 2:46example where I have a photo of this 2:49handsome young man set to fill this 2:51Frame if the frame gets shorter or wider 2:54that really great haircut will get cut 2:56off and eventually those beautiful brown 2:59eyes 3:00we can try changing the position of the 3:02image from Center to perhaps top Center 3:05but that isn't much better this is where 3:07my favorite position mode comes in focal 3:10point if I choose focal point I get a 3:13modal where I can click and drag to 3:14place this dot on the most important 3:17point of the image which in portraits is 3:19typically the nearest eye now as the 3:22image scales and repositions to fill the 3:23frame we pretty much always end up with 3:26an acceptable 3:27composition in addition to images we can 3:30also add video to our sites by either 3:32embedding a third party player like 3:33YouTube or directly embedding an mp4 3:37file let's talk MP4 files first similar 3:40to images we can drag them directly onto 3:42the canvas or add a video frame from the 3:45layout 3:47menu and either paste the URL of a 3:50hosted mp4 file or choose upload to add 3:54a video file from our own computer 3:56depending on your site plan you may run 3:58into file size limits when adding a 4:00video file directly to framer videos get 4:02pretty big which is one of the reasons 4:04you might want to host large videos 4:06elsewhere or perhaps embed from a 4:08dedicated video hosting platform like 4:10Vimeo or YouTube which offloads the 4:13burden of Hosting buffering adapting and 4:16streaming to content platforms that are 4:18built for it that way our viewers will 4:20always get quality that's optimized for 4:22their device and connection speed we'll 4:25find YouTube and Vimeo components in the 4:27insert panel under the media ceg 4:29category and we can click or click and 4:32drag them directly to the canvas then 4:35it's just a matter of pasting in the URL 4:37of your video done deal all right now 4:39let's talk text we can add text to the 4:42canvas using the text tool on the 4:44toolbar or by pressing the letter t on 4:46the keyboard then we can either click to 4:50create a text box that automatically 4:51resizes to fit the content perfect for 4:54things like headings or we can click and 4:56drag to create a fixed width text box 4:59that keeps the content confined within 5:01its bounds if you want your text box to 5:04stick around be sure to type something 5:05or paste some text in there an empty 5:08text box will disappear automatically a 5:10text box itself is very similar to a 5:12frame it has its own size and position 5:15properties in addition to the properties 5:17of the text within it you can adjust the 5:19boxes width and height manually in the 5:21properties panel or toggle between these 5:24handy grow presets to choose between 5:26Auto width and height Auto height with a 5:30fixed width or fixed height and width 5:34one last little trick before we wrap up 5:36if you double click on an empty frame 5:38you'll get a new text box centered in 5:40the frame automatically pretty sweet for 5:42labeling buttons or tags we're going to 5:44tackle formatting frames and text in 5:46another lesson but for now these Basics 5:49should get you started with getting 5:50content onto the canvas in the first 5:52place the rest is icing on the cake I'll 5:55see you in the next one

TeachesFrames

Also coversComponents Image Optimization Keyboard Shortcuts Links Plugins Sizing Stacks

Watch on YouTube ↗

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

Min and Max Sizing in Framer (Fundamentals Lesson 11) ›