Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Custom themes and templates: Add and configure the layout elements

After you have decided about the logical separation of the page, you must create the template for the Telerik Hospital site and add the layout elements to it. Perform the following:

Creating the template

To create the template for the Telerik Hospital site, perform the following:

  1. Go to Sitefinity’s backend (http://<yoursite>/sitefinity) 
  2. In the main menu, click Design » Page Templates. 
    design 1
  3. Click Create a Template. 
  4. In the Name input field, enter Telerik Hospital. 
  5. Select Don't use template (start from scratch). 
  6. Click Create and go to add content. 
    design 2

Adding the Menu layout element

The next step is to add the Menu block to the template layout. To do this, perform the following:

  1. After the template has been created click Layout button in the upper-right corner. 
    design 3
  2. Drag 100% layout element from the right menu and drop it in the layout area on the left. 
  3. Click Edit in the title bar of the dropped element. 
  4. In the right menu click Classes and labels. 
  5. In the Wrapper field, enter Menu. You will use this class later in your CSS file.
  6. Click Done. 

Adding the Header layout element

The next step is to add the Header block to the template layout. To do this, perform the following:

  1. Drag another 100% layout element from the right menu and drop it in the layout area on the left, under the Menu block. 
    design 4
  2. Click Edit in the title bar of the dropped element. 
  3. In the right menu click Classes. 
  4. In the Wrapper field, enter Header. You will use this class later in your CSS file. 
  5. Click Done. 

Adding the Main layout element

The next step is to add the Main block to the template layout. To do this, perform the following:

  1. Drag another 100% layout element from the right menu and drop it in the layout area on the left, under the Header block. 
  2. Click Edit in the title bar of the dropped element. 
  3. In the right menu click Classes. 
  4. In the Wrapper field, enter Main. You will use this class later in your CSS file. 
  5. Click Done. 

Adding the Footer layout element

The last step is to add the Footer block to the template layout. To do this, perform the following:

  1. Drag another 100% layout element from the right menu and drop it in the layout area on the left, under the Main block. 
  2. Click Edit in the title bar of the dropped element. 
  3. In the right menu click Classes. 
  4. In the Wrapper field, enter Footer. You will use this class later in your CSS file. 
  5. Click Done. 
  6. To save your changes click Publish. 

The final result looks like the following screenshot: 

design 5

The main wireframe is ready. Next, you must add the menu, the logo, the slogan, and the contact information in the footer – these elements will persist in all your pages.

Back To Top

Next: Custom themes and templates: Add and configure the content widgets