Types of Pages in Framer

When building a website with Framer, creating a new page is more than just adding a canvas—it defines the page’s role and purpose within the overall project structure. This article will walk you through the different page types available in Framer, including New Page, New CMS Page, and New 404 Page. These options appear when you click the "+" button next to "Pages" in the left-hand toolbar, as shown in the image above. Each page type is suited for different content management scenarios and affects how the page sources its content, how its URL is structured, and how it’s recognized by search engines. Understanding the differences and appropriate use cases for each will help you structure your site more efficiently, improving both maintainability and user experience.

New Page

In Framer, the New Page is the most basic and standard page type, ideal for creating static pages that do not rely on dynamic content sources. When you select the New Page option from the pop-up page type menu, Framer adds an independent page node to your project structure. You can then customize its URL path, content structure, interaction logic, and layout styling according to your needs.

1 New Page Properties and Use Cases

• Customizable URL Structure: Each New Page allows you to define its own slug, such as /about or /services.

• Static Content: The content of a New Page is entirely designed and set within the Canvas, without relying on CMS data or external sources.

• Full Support for Interactions and Animations: You can freely add components and interactive animations to build a complete user experience.

• Standalone Page: Ideal for homepage, about page, contact page, services, and product pages—any page with stable structure and content that doesn't require frequent updates.

2 Comparison Between New Page and Other Page Types

Although the New Page is the most basic page type in Framer, its main characteristics, compared to a CMS Page or 404 Page, are as follows:

• Does not use a CMS Collection and does not support dynamic bulk generation.

• Does not support conditional routing or dynamic URL structures.

• Better suited for pages with fixed paths and clearly defined content structures.

New CMS Page

In Framer, the New CMS Page is a dynamic page type that integrates closely with the Content Management System (CMS). Its primary purpose is to generate pages in bulk from a CMS data collection, allowing you to use a single page template to automatically render multiple content-driven pages, such as articles, based on differences in the data.

1 Properties and Features of New CMS Page

1). Dynamic Template Bound to CMS Collection

Each New CMS Page must be linked to a CMS Collection. Framer automatically generates a separate page for each content record in that collection. These pages share the same structure and style template but dynamically populate data based on the individual content records.

For example, if you have a CMS Collection named "Articles" containing multiple items (such as "Product Instructions" and "Product Performance Comparison"), you only need to create one New CMS Page and bind it to this collection. Framer will then automatically generate individual pages for each item, with URLs like /articles/product-instructions and /articles/product-performance-comparison.

2). Automatic URL Generation and SEO Support

• Automated URL Generation: Each CMS page’s path can be automatically generated from the title field in the content, while also allowing manual input of the slug.

• SEO Support: You can configure unique meta information such as titles and descriptions for each CMS entry to enhance search engine visibility.

• Dynamic Component Binding: Text, images, links, and other elements on the page can be individually bound to CMS fields, ensuring the content accurately corresponds on each page.

2 New CMS Page Use Cases and Best Practices

1). Suitable Content Structure Requirements

New CMS Page is ideal for website content structures that require bulk page generation, such as:

• Blog System: Each blog post is a CMS entry, and a unified template automatically generates a page for each article.

• Portfolio Pages: For showcasing work, case studies, or client stories—pages with repetitive structure but different content.

• Product Catalog: Ideal for e-commerce or product showcase sites, where product detail pages are automatically generated.

2). Efficiency Gains Through Dynamic Content Updates

With the CMS, you can update content without altering the design template. Once the content is updated, all corresponding pages are automatically updated as well. This is especially valuable for websites that require frequent content updates.

3 Comparison Between New CMS Page and Other Page Types

Compared to a New Page, the New CMS Page is better suited for building web pages with large amounts of content that share a repeated structure but differ in content. It reduces the workload between designers and content managers by separating structure from content. If your website requires frequent content updates while maintaining consistent design, the New CMS Page is an essential solution.

4 The Value of New CMS Page

The New CMS Page is the core output format of the Framer CMS system, making "design once, vary by content" a reality. For content-driven websites, it not only improves page-building efficiency but also significantly reduces maintenance costs, making it an ideal solution for large-scale website deployment.

New 404 Page

In Framer, the New 404 Page is a system page specifically designed to handle access errors. When a user tries to visit a page that doesn't exist or has been deleted, this page automatically appears to display a friendly error message. It plays a key role in maintaining both user experience and website integrity.

1 Properties and Features of New 404 Page

Once you create a New 404 Page, Framer registers it as the dedicated error page for the project with the path /404, which cannot be changed. This page does not appear in the navigation structure and is not indexed by search engines, but it automatically triggers and displays whenever an invalid path is accessed.

1). Fully Visualized 404 Page Design

Unlike traditional development that requires coding to create a 404 page, Framer’s New 404 Page allows you to freely design using the full canvas and component features. You can add graphics, text explanations, navigation buttons, and even animations or redirect logic to provide users with a more user-friendly error guidance.

2). Enhancing Website Professionalism and User Retention

A customized 404 page can not only reduce user bounce rates but also indirectly convey the brand’s attention to detail. Compared to a blank error message, a tailored 404 page is more effective at guiding users back to the homepage, recommended content, or popular pages.

2 Usage Recommendations and Key Practices

• Clear error messages: such as "Sorry, this page does not exist" or "This page has been removed."

• Navigation options: such as buttons to return to the homepage, view all pages, or use the search function.

• Brand elements: such as illustrations, signature colors, and fonts to maintain a consistent visual experience.

• Moderate creativity: the 404 page is a small stage to showcase brand personality, where you can add playful illustrations, humorous copy, or interactive animations.

3 Comparison Between 404 Pages and Other Page Types

The New 404 Page is the only page type in the entire website structure that does not follow the regular navigation logic, but its existence is crucial for enhancing user experience and preventing interruptions during browsing.

4 Turning the 404 Page into a User Experience Highlight

Although a 404 page is essentially a tool for handling errors, it is also a subtle detail through which users judge how much care you put into managing your website. In Framer, the New 404 Page offers complete creative freedom in visual design, giving you the opportunity to turn a missed visit into a memorable brand interaction.

Conclusion

Through this article, you should now have a clear understanding of the differences and use cases of the three main page types in Framer — from the basic New Page, to the content-driven New CMS Page, and the specialized New 404 Page for handling error redirects. Proper use of these page types not only helps you build a well-structured website architecture but also plays a key role in improving content management efficiency, optimizing user experience, and strengthening brand expression.

If you wish to plan your Framer website structure more systematically or need professional assistance to achieve high-quality page design and development, feel free to contact Jane Framer Studio — we specialize in creativity-driven web design that makes every page a brand asset.