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 content widgets

After finishing the layout of the template, you must add the content controls in the layout elements. Before you begin configuring the content, you must open the template for editing.

Perform the following:

  1. Go to Sitefinity’s backend (http://<yoursite>/sitefinity)

  2. In the main menu, click Design » Page Templates.

  3. Click Telerik Hospital template.

The template opens in content editing mode. Next, you must perform the following:

Adding the Menu

To add the menu in the layout template, perform the following:

  1. Expand the Navigation section in the right. 
  2. Drag and drop the Navigation control in the first content placeholder. 
  3. Click Edit in the title bar of the dropped control. 
  4. Select Horizontal with drop down menus. 
  5. In the CSS class field, enter hospital. 
  6. To save your work, click Save. 

The menu is now added to the template. The next step is to add the logo and the slogan in the header.

Adding the content of the Logo

To add the logo in the layout template, perform the following:

  1. Expand Content section in the right. 
  2. Drag and drop the Content block control in the second content placeholder. 
  3. Click Edit in the title bar of the dropped control. 
  4. In the text editor enter Telerik Hospital. 
  5. Click More formatting options. 
  6. Make Telerik in Heading 1 (h1) title and Hospital in Heading 2 (h2) title. 
  7. Click Advanced button. 
  8. In the CssClass field, enter Logo. 
  9. To save your work, click Save » Save. 

This CSS class will be used later in the CSS file to define position and coloring rules.

Adding the content of the Slogan

To add the slogan in the layout template, perform the following:

  1. Drag and drop the Content block control in the second placeholder under the one that you have added in the previous procedure. 
  2. Click Edit in the title bar of the dropped control. 
  3. In the text editor enter Your health, our care. The newest leading hospital that improves your life. 
  4. Click More formatting options. 
  5. Make Your health, our care. in Heading 3 (h3) title and The newest leading hospital that improves your life. in Heading 4 (h4) title.. 
  6. Click Advanced button. 
  7. In the CssClass field, enter Slogan. This CSS class will be used later in the CSS file to define position and coloring rules. 
  8. To save your work, click Save » Save. 

Adding the content of the Footer

The last step is to add the contact information in the footer. Perform the following:

  1. Drag and drop the Content block control in the last content placeholder. 
  2. Click Edit on the title bar of the dropped control. 
  3. In the text editor enter the contact and the copyright information. 
  4. To save your work, click Save. 
  5. To save the layout, click Publish. 

With this last step the layout template is ready. The screenshot below shows what your layout should look like: 

Next, you must create the theme that define the rules for the position, sizes, fonts, and colors of your content. For more information, see Custom themes and templates: Assign the theme. 

Back To Top