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.

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

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. 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?

Next article

Custom themes and templates: Add and configure the content widgets