Framer Update, Layout & Design

Framer Update: On-Page Editing 2.0

Edo

4:24

9.1K views

Jan 8, 2026

About this lesson

On-Page Editing in Framer is now more flexible and powerful for both designers and editors. Editors can rearrange content directly on the page, including text, frames, and components, making it easy to reorder elements like sublines, cards, and sections, adjust layouts, and experiment with what content should appear first or last, while also quickly swapping icons and component variants with a single click to better match the content of a page. Designers remain in full control by locking specific layers or sections in Framer using ⌘ + L, preventing accidental changes while still allowing fast, intentional edits. On-Page Editing now fully supports localization, enabling real time updates to localized text and images simply by visiting a localized page and clicking Edit. By popular demand, the Edit button can now be moved anywhere on the screen to avoid overlapping site content, and for teams using On-Page Editing extensively, managing notifications is easier with the option to unsubscribe from email updates for a specific project.

https://www.framer.com/updates/on-page-editing-2.0

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:12Hi everyone, this is Edo from Framer and 0:15today I want to show you some updates 0:16we've been adding to on page editing.0:20One popular request was the ability to 0:22move this button when it overlaps 0:24content from your site. And you can now 0:26simply drag and drop it anywhere on this 0:30side of the page, but you can also 0:32detach it and move it on the other side 0:35if you want to. You can drag it anywhere 0:38you want on the page and it will just 0:40snap on the edge to not be on the way.0:43I'm going to drag it here in my favorite 0:46spot and I'm going to click it to show 0:48you something else exciting, which is 0:50the ability to rearrange parts of the 0:53site directly on page.0:56This is especially useful for 0:58marketeteers to make quick changes like 1:01rearranging sublines or going to a 1:04series of cards and rearranging them 1:07based on what makes sense to have first 1:10or last and so on.1:13Now, of course, we fully understand that 1:16designers want full control over what 1:19editors can or cannot rearrange. For 1:22instance, you might want this block over 1:25here to always stay on the left and 1:28never rearranged. And maybe this 1:30headline also never edited. And this is 1:33why we made it easy to control this from 1:36framer. And it works in the exact same 1:38way as you do today to prevent 1:40accidental edits. So if you select one 1:44layer like this one and press command L,1:47you'll notice that that layer and all 1:50its descendants are now locked and 1:52cannot be moved and the text within 1:54cannot be edited. But let's say I want 1:57these three lines over here to still be 2:00editable. I can go in the layer panel,2:02select them and press command L to 2:05unlock them. Now, if I go back to my web 2:09page and I try to click on the headline,2:13I simply cannot because it's locked. But 2:17if I go on those three lines I unlocked,2:20I can freely rearrange them. This gives 2:23you full control over what editors can 2:26or cannot edit. And while here, I want 2:29to show you something else really handy 2:31for your editors, which is the ability 2:34to simply click on an icon to select 2:37another one from your icon sets. So, it 2:40just takes one click to update them. It 2:44makes it really fun. So, here I'm going 2:47to look for something more fitting like 2:49a gift. And there you go. My icon is 2:53insta updated. But the cool part is that 2:56this doesn't apply only to icons, but to 3:00any variance of components. So you can 3:03just go and click a component on a page 3:06and switch its variant like this. So I 3:10can look for an asset that is more 3:12fitting my copy for instance like this 3:15one. And I want to show you something 3:18else. When an editor is visiting a site 3:21in a different language, maybe their 3:23native language, it's easy to spot 3:26something that can be improved or maybe 3:28a translation that was forgotten. Well,3:31now you can simply go straight in edit 3:34mode and while on page, you can select 3:36your text and change it in real time.3:39And this is a big deal, meaning that 3:42onpage editing now fully supports 3:44localization, both for text like this 3:48and also for images. We know you'll 3:51appreciate this as it was heavily 3:54requested.3:55As a last note, for those of you that 3:58received many emails about changes made 4:01on site, you can now finally unsubscribe 4:04within the email itself. Thank you so 4:07much for watching. See you in the next 4:09update and happy on page editing.

Also coversAuto-Translate Component Variants Components Locales

Watch on YouTube ↗

‹ Scaling a clipped image on hover in Framer

Making elements revolve in Framer ›