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.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?