Developing the Home page

✖
Copy to clipboard

To create the Home page of the tutorial website.

  1. In the Pages application, select the root page (My website).

  2. Click New ().

  3. Choose the Page (menu item) page type.

  4. Type Home as the Page name and choose the Create a blank page option.

    Adding the Home page

  5. Click Save to create the page.

Designing the Home page

  1. Switch to the Design tab.

  2. Click the menu icon () in the green page template header and select Edit layout in the menu.

  3. Replace the default code with the following:

    


 <table style="width:100%;height:500px;border: 0px">
         <tr valign="top">
             <!-- left column -->
             <td style="width:280px" class="HomePageLeftColumn">
             </td>
             <!-- center column -->
             <td style="padding: 3px 5px 0px 5px;width:450px;">
               <cms:CMSWebPartZone ZoneID="zoneCenter" runat="server" />
          </td>
             <!-- right column -->
             <td style="padding: 3px 0px 0px 5px;width:270px">
              <cms:CMSWebPartZone ZoneID="zoneRight" runat="server" />
             </td>
         </tr>
 </table>

  4. Click Save & Close.

  5. Add the Editable text web part into the zoneCenter web part zone.

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

    • Editable region title: Main text
    • Editable region height: 450

  7. Add another Editable text web part into the zoneRight web part zone. Set its properties:

    • Editable region title: Contact text
    • Editable region height: 100

  8. Open the Page tab. The page now contains two editable regions. Enter the following text:

    • Main text: Welcome to the website.
    • Contact text: Call 800 111 2222

  9. Click Save.

To view the public appearance of your website’s new Home page, switch to Preview mode.

Previewing the Home page

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

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