Using Pages

Create web pages for your website, design mockups and assets on canvas pages, and generate dynamic content like blog posts using CMS pages.

Creating a page

When starting a new project, the Home page (index page) is the first page you see. This non-deletable page serves as the starting point for your website. Framer uses a desktop-first workflow, with a default width of 1200 pixels as the starting point.

Content on the Desktop page is visible on your website, while the surrounding Canvas remains hidden. Use the Canvas for freeform exploration, rapid iteration, or storing assets for later use.

Screenshot of a design interface displaying the 'Pages' tab. The sidebar shows a list of pages with a single entry labeled 'Home,' accompanied by a home icon.

Page options

Hover over a page to reveal a three-dot icon. Clicking this icon or right-clicking the page opens a menu with additional options:

  • Customize the URL.

  • Duplicate pages with all their content.

  • Delete a page.

To rename a page and update its URL, double-click the page name. Framer automatically converts page names to valid paths, so there's no need to manually add a slash (/).

Screenshot of a website editor's page menu, showing options like 'Settings,' 'Draft,' 'Rename,' 'Duplicate,' 'Copy,' 'Delete,' and 'Set Home Page' for the '/about-us' page.

Page types

Framer offers three types of pages to organize your project:

  • Web Pages

    • Used for designing and publishing websites.

    • Includes a desktop breakpoint and allows custom breakpoints, effects, links, and more.

    • Acts as a sitemap, providing structure for your website.

  • CMS Pages

    • Generated from CMS content.

    • Use collections (e.g., blogs or updates) to add individual entries.

    • Each collection appears as a separate canvas for designing specific layouts, such as blog detail pages.

    • Use the Canvas Bar to switch between individual posts. For details, see the CMS guide.

  • Canvas Pages

    • Versatile canvases for creating mockups and assets.

    • Ideal for designing and exporting custom assets, such as social media banners or other visual elements.

Still experiencing the issue after following the steps above? Create a support ticket in the Community.