---
title: Developing the Services 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).

Create a website section for services. The page template used for this section will contain a tree menu on the left and a single editable region.

## 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 _**LeftMenuRightText.aspx**_ and check **Select master page**.
4. Click **Add** and choose the _**MyMaster.master**_ page from the **CMSTemplates/MySite** folder.
5. Enter the following HTML layout code into the **** element on the page:

   ```html

   <table style="width: 100%;">
       <tr style="vertical-align: top;">
           <td style="width: 20%;">

           </td>
           <td style="width: 80%;">

           </td>
       </tr>
   </table>

   ```
6. Drag the **CMSTreeMenu** control into the first table cell and the **CMSEditableRegion** control into the second cell.
7. Set the following properties for the controls:\
   **CMSTreeMenu:**

   | Property             | Value                                   | Description                                                                                                                                                                                                                                                 |
   | -------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | Path                 | /{0}/%                                  | Configures the tree menu to display pages starting from the second level of the currently selected path.                                                                                                                                                    |
   | MenuItemImageURL     | \~/app\_themes/mysite/images/bullet.gif | Sets the path of the image displayed next to items in the tree menu.<br>The \~ character represents the root of the website. This relative path ensures that the control displays the image correctly even if the website's virtual directory name changes. |
   | MenuItemOpenImageURL | \~/app\_themes/mysite/images/bullet.gif | Specifies the image displayed next to items in the tree menu that belong on the path of the currently selected page.                                                                                                                                        |

   **CMSEditableRegion:**

   | Property     | Value      | Description                                                                                                                                          |
   | ------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
   | RegionType   | HTMLEditor | Determines which type of editing interface the control provides. With this option, the editable region works as a WYSIWYG HTML editor.               |
   | DialogHeight | 400        | Sets the height of the editable region in pixels.                                                                                                    |
   | RegionTitle  | Main Text  | Specifies the title displayed in the header of the editable region on the Page tab of the Pages application in the Kentico administration interface. |
8. Switch to the code behind of the services page (**LeftMenuRightText.aspx.cs**) and add a reference to the **CMS.UIControls** namespace:

   ```csharp

   using CMS.UIControls;

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

   ```csharp

   public partial class CMSTemplates_MySite_LeftMenuRightText : TemplatePage

   ```
10. **Save** the files.

## Registering the page template

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

1. Switch to the Kentico administration interface in your browser.
2. Open the **Page templates** application.
3. Select the **My website** category.
4. Click **New template** and type _**Left menu with right text**_ into the **Template display name** field.
5. Click **Save**.
6. Set the following values on the **General** tab:
   - **Template type**: ASPX page
   - **File name**: \~/CMSTemplates/MySite/LeftMenuRightText.aspx
7. Click **Save**.
8. Switch to the **Sites** tab and assign the page template to **My website**.

## Adding the services section

Now that the page template is ready, you can start adding pages based on it.

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 _**Services**_ as the **Page name** and choose the **Use existing page template** option. Select the **My website** category and the **Left menu with right text** page template.
6. Click **Save** to create the page.

The **Page** tab of the Services page opens, where you can enter text content into the editable region on the right.

![Editing the Services page (after adding 2 sub-pages)](https://docs.kentico.com/docsassets/k81tutorial/developing-the-services-page-aspx/ASPX_Services.png "Editing the Services page (after adding 2 sub-pages)")

## Creating sub-pages

You can use the same page template to add separate pages containing information about individual services under the Services page.

1. In the **Pages** application, select the **/Services** page.
2. Click **New** ().
3. Choose the **Page (menu item)** page type.
4. Type in _**Service 1**_ as the Page name and choose the **Use existing page template** option. Select the **My website category** and the **Left menu with right text** page template.
5. Click **Save and create another** and repeat the same process to add any number of pages dedicated to particular services.

All of the service pages use the same template as the main overview page (_/Services_). The page template provides the tree menu for navigation in the services section and an editable region. The system stores the text of the region separately for every page, so you can enter unique content on each page.
