Creating website pages

This page is a part of a tutorial, which you should follow sequentially, from the beginning to the end. Go to the first page: Getting started with Kentico.

When the master page is finished, it is time to create the first page that will display content. This is usually the home page.

  1. In the Pages application while in Edit mode, click New (+) above the content tree.

    Clicking the New page button.

  2. Select the Page (menu item) page type.

    Selecting the page type of a new page

  3. Type Home as the Page name and select the Create a blank page option.

    Typing the page name and selecting the page template type

  4. Click Save to create the page. 

    • The system creates the Home page under the root of the website.
  5. On the Design tab, click the page template menu and select Edit layout.

    Editing the page layout on the Design tab

  6. Delete the original layout and replace it with the two <section> elements from the index.html file.

    Sections HTML code
    
    
    
     <section class="teaser">
         <div class="col-sm-offset-3 col-sm-4">
             <p>The goal of our clinic is to provide the best medical care. To make your life healthy at all times it is also necessary to keep up with healthy way of living. </p>
         </div>
         <div class="clearfix"></div>
     </section>
     <section class="content">
         <div class="col-sm-offset-3 col-sm-5">
             <h1>Welcome to MEDIO clinic</h1>
             <p>Our clinic based in Bedford, NH, is federally qualified health center offering high-quality, comprehensive, and family-oriented primary health care and support services since 7th March 1935. We are recognized by the National Committee on Quality Assurance as a Patient-Centered Medical Home. Providing health care for a stronger community, we serve nearly 20,000 patients annually.</p>
         </div>
         <div class="clearfix"></div>
     </section>
    
    
     
  7. Replace the two <p> elements with web part zones. Rename the second web part zone so that the ZoneID values are unique.

    Final code with 2 web part zones
    
    
    
     <section class="teaser">
         <div class="col-sm-offset-3 col-sm-4">
             <cms:CMSWebPartZone ZoneID="ZoneA" runat="server" />
         </div>
         <div class="clearfix"></div>
     </section>
     <section class="content">
         <div class="col-sm-offset-3 col-sm-5">
             <cms:CMSWebPartZone ZoneID="ZoneB" runat="server" />
         </div>
         <div class="clearfix"></div>
     </section> 
    
    
     

    The page layout code of the Home page with web part zones

  8. Click Save & Close.

The system displays two web part zones and applies styles around them as defined by the HTML code and CSS code from the stylesheet. As you can see, the master page design envelops the green page template area that is unique for the Home page.

The Design tab of the Home page with two web part zones

You can now add web parts to the created web part zones to create some website content.

Add a text web part

In this example, we will add textual web parts to prepare editable text regions for content editors.

  1. Make sure you are on the Design tab.

  2. Find the Editable text web part in the right toolbar and drag it to the ZoneA zone.

  3. Configure (double-click) the web part and set the following properties: 

    • Web part title: Teaser (Editable text)

    • Editable region type: HTML Editor 

      Setting the Web part title property

  4. Click Save & Close.

  5. Drag another Editable text web part into the ZoneB zone.

  6. Configure (double-click) the web part and set the following properties: 

    • Web part title: Description (Editable text)
    • Editable region type: HTML Editor
  7. Click Save & Close.

You have configured two editable text web parts, which represent the text on the home page.

Design tab of the Home page with two Editable text web parts

Editing the text of the web parts

If you switch to the Page tab, you can see that it is now possible to add text on the page.

  1. Type some text into the fields or use the sample text.

    Sample text
    
    
    
     The goal of our clinic is to provide the best medical care. To make your life healthy at all times it is also necessary to keep up with healthy way of living.
    
     Our clinic based in Bedford, NH, is federally qualified health center offering high-quality, comprehensive, and family-oriented primary health care and support services since 7th March 1935. We are recognized by the National Committee on Quality Assurance as a Patient-Centered Medical Home. Providing health care for a stronger community, we serve nearly 20,000 patients annually.
    
    
     
  2. Try out some of the text editor’s functionality.

    Editable regions on the Page tab with text content

  3. Click Save.

Switch to Preview mode to see what the page looks like on the live site.

Switching to the preview mode.

You have created the Home page with two text areas that can be modified by content administrators.

You can define that this Home page will be displayed when a visitor arrives at your website’s root URL (i.e., its domain name, for example, http://www.example.com). 

To set the path of the website’s default homepage:

  1. Open the Settings application.

  2. Select MEDIO clinic in the Site drop-down list.

  3. Select the Content category in the Settings tree.

  4. Clear the Inherit from global settings check box next to the Default alias path setting in the Web site content section.

  5. Type  /Home to the field below, which is the alias path of your new home page.

    Setting the website’s home page.

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

Previous page: Creating the master page — Next page: Creating page templates

Completed pages: 6 of 8