Version
Sitefinity 14.4 Sitefinity 14.3 Sitefinity 14.2 Sitefinity 14.1 Sitefinity 14.0 Sitefinity 13.3

Topics

All topics

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.

Want to learn more?

Sign up for our free beginner training. Boost your credentials through advanced courses and certification.
Register for Sitefinity training and certification.

Was this article helpful?

Next article

Custom themes and templates: Add and configure the content widgets