Page Basics
Create web pages for your website, canvas pages for your prototypes, mockups and assets, and CMS pages for your generated content, like blog posts.
Creating Pages
If you create a new project, you’ll be presented with your Home (index) page first. This is a page that cannot be deleted, and represents the starting point of your website. Framer is optimized for a desktop-first workflow, and your starting point is 1280 pixels wide by default. Our default project also contains a few sub-pages for you, like /about and /content. These are already linked to from within the top bar component that comes with the project.
Anything you draw within the Desktop page will be visible on your page. Anything you draw on the surrounding Canvas will not. This means you can use this space for freeform exploration, quick iteration or referencing assets you’d like to use later.
Page Options
If you hover over any page, a three-dot icon will appear. Clicking on this icon (or right-clicking on the page) will give you a menu with additional options. This allows you to customize the URL, duplicate existing pages (including all of their content within) or delete a page.
To change the URL (rename a page) you can also double-click on a page. You don’t have to worry about adding the slash (/) manually, Framer makes sure your page names get converted to valid paths automatically.
Page Types
There are three types of Pages in Framer. Web Pages are likely the ones you’ll use the most: this is where you can design and publish websites. CMS Pages are pages that are generated from a collection in the CMS. And Canvas Pages are used for Prototyping or quick visual explorations, like exporting a custom social image for your website.
Web Pages
Web Pages give you an infinite canvas with a Desktop Breakpoint. This is where you can design your web pages, add breakpoints, effects, links, and more. You can consider this your sitemap, too. All web pages within a Framer site will be visible here.
CMS Pages
CMS Pages are special pages that are generated from the content you design in your CMS. In the CMS, you can define collections, like "blog" or "updates". Then, you can add individual entries to your collection. All collections will appear as separate canvases, so you can design your "blog detail page" at once, and cycle between individual posts via the Canvas Bar. Learn more about the CMS in the CMS guide.
Canvas Pages
Canvas Pages are freeform, classic design tool canvases. In Framer, they are optimized for prototyping use cases, but they can be used for your website assets, too. You could design and export a custom social banner for your website, for example. Or, you can use our interactive tools to create high fidelity interactive prototypes.
