---
title: Developing the Home page (ASPX)
---

> 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).

This page describes how to create the home page of the website. The process consists of the following steps:

## Preparing the ASPX source file

1. Edit your web project in Visual Studio
2. Right-click the **CMSTemplates/MySite** folder in the Solution Explorer and click **Add -> Add New Item**.
3. Create a **Web Form** named _**Home.aspx**_ and check **Select master page**.
4. Click **Add** and choose the _**MyMaster.master**_ page from the **CMSTemplates/MySite** folder.
5. Open the **home.htm** file (from the sample web template) and copy the HTML code from inside the **** section. Paste this code inside the **** element of the **Home.aspx** file.
6. Remove the static text content from the page:
   - The "Welcome to Our Business, Inc. Web Site..." text inside the table in the **** section
   - The "Our Business, Inc. ..." text in the **** section

The content of the web form should now match the following:

```html

<asp:Content ID="Content1" ContentPlaceHolderID="plcMain" Runat="Server">

<!-- main content -->
        <table style="width:100%;height:500px;border: 0px">
            <tr style="vertical-align:top;">
                <!-- left column -->
                <td style="width:280px" class="HomePageLeftColumn">
                </td>
                <!-- center column -->
                <td style="padding: 3px 5px 0px 5px;width:450px;">
                    <!-- center box -->
                    <table cellspacing="0" cellpadding="0" border="0" class="ContainerWithCorners" width="100%">
                        <tr class="ContainerWithCornersRow">
                            <td class="ContainerWithCornersTopLeft">&nbsp;</td>
                            <td class="ContainerWithCornersTop">&nbsp;</td>
                            <td class="ContainerWithCornersTopRight">&nbsp;</td>
                        </tr>
                        <tr>
                            <td class="ContainerWithCornersLeft">&nbsp;</td>
                            <td class="ContainerWithCornersContent" valign="top">

                            </td>
                            <td class="ContainerWithCornersRight">&nbsp;</td>
                        </tr>
                        <tr class="ContainerWithCornersRow">
                            <td class="ContainerWithCornersBottomLeft">&nbsp;</td>
                            <td class="ContainerWithCornersBottom"></td>
                            <td class="ContainerWithCornersBottomRight">&nbsp;</td>
                        </tr>
                    </table>
                </td>
                <!-- right column -->
                <td style="padding: 3px 0px 0px 5px;width:270px">
                    <!-- text box -->
                    <table cellpadding="0" cellspacing="0" style="width: 100%;margin-bottom: 10px;" class="Blue">
                        <tr>
                            <td class="BoxTitle">Contact us
                            </td>
                        </tr>
                        <tr>
                            <td class="BoxArea">

                            </td>
                        </tr>
                    </table>                    
                </td>
            </tr>
        </table>
<!-- /main content -->

</asp:Content>

```

Replace the text with editable regions so that content editors can manage the page in the Kentico administration interface.

1. Modify the code of the table in the **** section according to the following:

   ```html

   <!-- center box -->
   <table cellspacing="0" cellpadding="0" border="0" class="ContainerWithCorners" style="width: 100%;">
       <tr class="ContainerWithCornersRow">
           <td class="ContainerWithCornersTopLeft">&nbsp;</td>
           <td class="ContainerWithCornersTop">&nbsp;</td>
           <td class="ContainerWithCornersTopRight">&nbsp;</td>
       </tr>
       <tr>
           <td class="ContainerWithCornersLeft">&nbsp;</td>
           <td class="ContainerWithCornersContent" valign="top">
               <cms:CMSPagePlaceholder ID="plcZone" runat="server">
                   <LayoutTemplate>
                       <cms:CMSWebPartZone ID="zoneMain" runat="server" />
                   </LayoutTemplate>
               </cms:CMSPagePlaceholder>
           </td>
           <td class="ContainerWithCornersRight">&nbsp;</td>
       </tr>
       <tr class="ContainerWithCornersRow">
           <td class="ContainerWithCornersBottomLeft">&nbsp;</td>
           <td class="ContainerWithCornersBottom"></td>
           <td class="ContainerWithCornersBottomRight">&nbsp;</td>
       </tr>
   </table>

   ```

   > **Info:** The **CMSPagePlaceholder** control (added to the center cell of the middle row) defines an area of the page that users can modify through their browser. Later, you will configure this area to allow content editors to customize the design of the Home page.
2. Switch to the **Design** tab and drag a **CMSEditableRegion** control from the toolbox into the bottom cell of the table on the right of the page.
3. Set the following properties of the **CMSEditableRegion** control:
   - **ID**: txtRight
   - **DialogHeight**: 280
   - **RegionTitle**: Right content
   - **RegionType**: HtmlEditor
4. Switch to the code behind of the home page (**Home.aspx.cs**) and add a reference to the **CMS.UIControls** namespace:

   ```csharp

   using CMS.UIControls;

   ```
5. Change the class definition so that it inherits from the **TemplatePage** class:

   ```csharp

   public partial class CMSTemplates_MySite_Home : TemplatePage

   ```
6. Save the home page files.

## Registering the page template in the system

The source files of the home page are ready. Now you need to register the home page template in Kentico.

1. Open Kentico in a web browser and log in to the administration interface (default username **administrator** with an empty password).
2. Open the **Page templates** application.
3. Click **...** next to the **New template** button and select **New category**.
4. Type _**My website**_ into the **Category display name** field.
5. Click **Save.**
6. Click **New template** and type _**Home page**_ into the **Template display name** field.
7. Click **Save**.
8. Set the following values on the **General** tab:
   - **Template type**: ASPX + Portal page
   - **File name**: \~/CMSTemplates/MySite/Home.aspx
9. Click **Save**.
10. Switch to the **Sites** tab and assign the page template to **My website**.

![Registering the ASPX page template of the Home page](https://docs.kentico.com/docsassets/k81tutorial/developing-the-home-page-aspx/ASPX_Home_Template.png "Registering the ASPX page template of the Home page")

## Adding the Home page

1. Open the **Pages** application.
2. Select the root of the content tree (**My website**).
3. Click **New** ().
4. Choose the **Page (menu item)** page type.
5. Type in _**Home**_ as the **Page name** and choose the **Use existing page template** option. Select the **My website** category and the **Home page** template.
6. Click **Save** to create the page.

## Editing the content of the Home page

1. With the Home page selected, switch to the **Design** tab. Here you can see the editable area that you defined in the code of the page template.
2. Right-click the header of the **zoneMain** zone and select  **Configure** in the menu.

   ![Viewing the Home page on the Design tab](https://docs.kentico.com/docsassets/k81tutorial/developing-the-home-page-aspx/ASPX_Home_Design.png "Viewing the Home page on the Design tab")
3. Switch the value of the **Widget zone type** property from _**None**_ to _**Customization by page editor**_ and click **Save & Close**.
4. Open the **Page** tab, expand the widget zone's menu () and click **Add new widget**. 
   1. Select the **General -> Text** widget.
   2. Click **Select**.
   3. Type _**Welcome to our website!**_ into the **Text** property
   4. Click **Save & Close**.

![Editing the Home page on the Page tab](https://docs.kentico.com/docsassets/k81tutorial/developing-the-home-page-aspx/ASPX_Home_Page.png "Editing the Home page on the Page tab")

> **Info:** You can modify the design of the page directly through the browser by adding and configuring widgets. This approach can be useful once the website has some more content or features to be displayed.

5. Type the following text into the **Right content** editable region: _**Call 800 111 2222**_
6. Click **Save**. You always need to click _Save_ to confirm changes made to the text of editable regions or widget content on the _Page_ tab.

Switch to **Preview** mode to see how the home page of your website appears to visitors.

## Choosing the website's home page

When a visitor arrives at the root URL of the website (i.e. its domain name, for example _http://www.example.com_), the system needs to know which page to display as the home page.

To set the path of the website's default home page:

1. Open the **Settings** application.
2. Select the **Content** category in the settings tree.
3. Select **My website** in the **Site** drop-down.
4. Clear the **Inherit from global settings** check box next to the **Default alias path** setting.
5. Type in _**/Home**_, which is the alias path of your new home page.
6. Click **Save**.

![Setting the default alias path for your website](https://docs.kentico.com/docsassets/k81tutorial/developing-the-home-page-aspx/Settings_Default_Path.png "Setting the default alias path for your website")

When visitors access the website without specifying the URL of a particular page, the system automatically displays the **Home** page.
