Topics

All topics

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. 
    design nav
  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: 

design nav 2

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?