---
title: Creating page types
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

> **Info:** This page is a part of a tutorial, which you should follow sequentially from beginning to end. [Go to the first page: Using the Xperience interface](https://docs.kentico.com/13tutorial/using-the-xperience-interface.md).

## You will learn about:

In [step 1](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-mvc-5-development-tutorial/installing-xperience.md) and [step 2](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-mvc-5-development-tutorial/configuring-the-mvc-application.md) of this tutorial, you have set up your environment for development. Let's now start building your tutorial website. 

The website will have two pages and a simple navigation menu. The _Home_ page will have content structured into a _header_, a _text heading,_ and the _text_ itself. The _Medical center_ page will have a _header_ text field and a content field that can be formatted using HTML. To give content editors full control over the menu, the page types will use the navigation feature, which allows users to hand-pick which pages are displayed in the website's navigation.

In this tutorial step, you will create page types for the pages that will store the content of the site.

## Page types in Xperience

Page types define a data structure and other configuration options, which are then reusable for any number of individual pages. The pages are organized within a hierarchical content tree for each site. Pages may represent actual pages available on the live site, serve as data containers (used by other pages), or folders used to organize the site's content tree.

### How is page data stored?

Page types use fields to define a data structure. Content editors use these fields to edit website content. Each page type has a separate database table storing the values of the defined fields, and also uses two general tables to store additional page information.

For example, your _Home_ page type for the tutorial website will have three fields. The first two _Text_fields will hold the page header and the heading, and the third field will be a _Text area_. Any page based on this new page type will have its content stored in the _MEDIO\_Home_ database table. Additional data, such as general page properties, is stored in the _CMS\_Document_ table, and data related to the page's position in the content tree hierarchy is stored in the _CMS\_Tree_ table.

## Creating the page type for the Home page

1. Return to the Xperience administration interface in your browser (running under _http://localhost/Xperience13\_Admin_).
2. In the **Page types** application, click the **New page type** button to start the wizard.

   ![Creating a new page type](https://docs.kentico.com/docsassets/13tutorial/creating-page-types/create_new_mvc_page_type.png "Creating a new page type")
3. In **Step 1** of the wizard, fill in the following values:
   - **Page type display name**: Home(MEDIO Clinic)
   - **Namespace**: MEDIO
   - **Name**: Home

     ![Setting basic page type properties](https://docs.kentico.com/docsassets/13tutorial/creating-page-types/new_mvc_page_type_wizard_1.png "Setting basic page type properties")
4. Click **Next**.
5. In **Step 2**, select the **Page builder**, **URL** and **Navigation item** features for the page type.

   ![Selecting page type features](https://docs.kentico.com/docsassets/13tutorial/creating-page-types/new_mvc_page_type_wizard_2.png "Selecting page type features")
6. Click **Next**.
7. In **Step 3**, leave the default database table values and click **Next**.
8. In **Step 4**, click the **New field** button to create a field for the _page header_.
9. Fill in the following values:
   - **Field name**: HomeHeader
   - **Data type**: Text
   - **Size**: 1000
   - **Field caption**: Header
   - **Form control**: Text area

     ![Setting up new text field properties in a page type](https://docs.kentico.com/docsassets/13tutorial/creating-page-types/new_mvc_page_type_wizard_3_2.png "Setting up new text field properties in a page type")
10. Click **Save**.
11. Click the **New field** button to create the second field for the _page heading_ with the following values:

    - **Field name**: HomeTextHeading
    - **Data type**: Text
    - **Size**: 200
    - **Field caption**: Text heading
    - **Form control**: Text box

      ![Creating a new field for the heading text](https://docs.kentico.com/docsassets/13tutorial/creating-page-types/new_mvc_page_type_wizard_3_3.png "Creating a new field for the heading text")
12. Click **Save**.
13. Create the third field for the page text with the following values:
    - **Field name**: HomeText
    - **Data type**: Long text
    - **Field caption**: Text
    - **Form control**: Text area

      ![Creating a long text field](https://docs.kentico.com/docsassets/13tutorial/creating-page-types/new_mvc_page_type_wizard_3_4.png "Creating a long text field")
14. Click **Save**.
15. Click **Next**.
16. In **Step 5**, do not change anything, and click **Next**.
17. In **Step 6**, click **Finish** to complete the new page type wizard.

    ![Final step of the wizard](https://docs.kentico.com/docsassets/13tutorial/creating-page-types/new_mvc_page_type_wizard_4.png "Final step of the wizard")

### Preparing the page type's wrapper classes

Before you start adding new pages and their content, let's make sure you'll be able to work with this page type in your MVC application. Xperience allows you to generate code for your page type directly from the user interface.

1. To generate code for the _Home (MEDIO Clinic)_ page type, switch to the **Code** tab.
2. Verify the **Save path** (by default, the path is set to _\~/Old\_App\_Code/CMSClasses_), and click **Save code**.

   ![Generating code for a page type](https://docs.kentico.com/docsassets/13tutorial/creating-page-types/new_mvc_site_generating_code.png "Generating code for a page type")

The code generator creates the **Item** and **Provider** wrapper classes – _Home_ and _HomeProvider._ We're only interested in the _Item_ wrapper class – _Home._ The class contains properties matching the page type fields you have defined when creating the page type – _HomeHeader_, _HomeTextHeading_, _HomeText_ – as well as other properties shared by all pages in the system. It allows strongly-typed access to all data stored by the page.

Later in the tutorial, you will use the _Home_ class to display content on the website. But first, let's finish creating all the page types you will need to build your tutorial website.

## Creating the page type for the Medical center page

1. In the **Page types** application, click the **New page type** button to start the wizard.
2. In **Step 1** of the wizard, fill in the following values:
   1. **Page type display name**:Medical center (MEDIO Clinic)
   2. **Namespace**: MEDIO
   3. **Name**: MedicalCenter
3. In **Step 2**, select the **URL** and **Navigation item** features for the page type.
4. In **Step 3**, leave the default database table values and click **Next**.
5. In **Step 4**, create two fields with the following values:
   1. The field for the _Medical center_ header
      - **Field name**: MedicalCenterHeader
      - **Data type**: Text
      - **Size**: 200
      - **Field caption**: Header
      - **Form control**: Text box
   2. The field for the _Medical center_ text
      - **Field name**: MedicalCenterText
      - **Data type**: Long text
      - **Field caption**: Text
      - **Form control**: Rich text editor
6. Finish the page type wizard, leaving the rest of the steps at their default values.
7. Click **Save**.
8. Switch to the **Code** tab.
9. Verify that the **Save path** is set to _\~/Old\_App\_Code/CMSClasses_ and save the code of the page type.

## Page types and content tree-based routing

Because we've enabled _content tree-based routing_ in the previous step and now enabled the _URL feature_ for our created page types, all pages based on our page types will be automatically accessible under URLs that reflect their position in the site's content tree. We only need to provide a view (.cshtml) file to format the page's content.

For example, let's say we create a page called **Home** (based on our _Home (MEDIO Clinic)_ page type) and place it under the root of our website in Xperience. The created page will automatically be accessible under _/home_ in the connected MVC application.

We'll see the true benefit of this approach once we get to designing the live site MVC application.

**Previous page:** [Configuring the MVC application](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-mvc-5-development-tutorial/configuring-the-mvc-application.md) — **Next page:** [Adding pages to the site](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-mvc-5-development-tutorial/adding-pages-to-the-site.md)

**Completed pages:** 4 of 10