Overview: Page templates

Before you populate your page with content, you create the layout that defines how and where content is positioned and displayed on pages. For example, you allocate space for the navigation, the header, and the content blocks. To do this, you use predefined or customized page templates, which you can modify further, if needed. By setting and applying the page template, you basically define the appearance and style of an individual page or all pages.

To see and manage the list of all templates that your website pages are based on, navigate to Design » Page templates.

In Sitefinity CMS, you can work with three types of page templates, depending on the technology you use and the widgets you place on pages. The mode you use depends on your development process as well as the functionality you want to implement.

The following sections summarize the template types, along with an overview when and how you use them.

Pure MVC mode

In pure MVC mode, you directly control the markup of templates. You work with Razor layout files and leverage the set of grid widgets, provided by the resource package, which help you customize your layout by dropping them on your pages. Once you need to modify and style your MVC page templates, you do it in the resource package since it groups and organizes all your resources, templates, front-end assets, CSS files, and so on. When working with MVC-only templates, you do not need to work with the Responsive and Mobile design module since the MVC framework is mobile-first. Responsive design is provided by the CSS framework, used in the Bootstrap package, shipped with Sitefinity CMS out-of-the-box.

For more information, see:

• Resource packages
• Base existing page templates on layout files
• Add customizable grid widgets

Pure Web Forms mode

When working with Web Forms, you base your page templates on .master files and define the appearance and style of the page by setting the template and the theme.

For more information, see Create hybrid or Web Forms template using a Master page.

For more information about setting WebForms and hybrid templates through the code, see For developers: Apply page templates. 

Hybrid mode

Hybrid mode lets the template and all pages, based on it, use both MVC widgets and Web Forms widgets on the same page. Thus, if you have legacy pages with Web Forms widgets, say with Forums, you can still take advantage of MVC technology benefits.

When you create a hybrid template, Sitefinity CMS creates a page object, but also routes to all MVC controllers that you have on the page and inserts their markup into the output. This works in exactly the same way that ASP.NET MVC does, so you can fully expect your widgets to behave like they would normally.

However, you need to be aware of the specifics and dependencies the two technologies entail.

For more information, see Dependencies when working with hybrid page templates.

Each website has a one or more default layout file that defines the general structural division of pages into sections. A layout file and its section placeholders serve as the basis, on which Sitefinity CMS and the view engines construct views and render the proper markup.

Depending on which mode you are working in, the layout files can be:

• .cshtml layout files (MVC only templates)
• .master file or .ascx page template files (hybrid and Web Forms only templates)

RECOMMENDATION:  Working in MVC mode is the recommended way to work in Sitefinity CMS, especially for new projects. Development process is optimized and modification of your website functionality and appearance – quick and easy.

Once Sitefinity CMS detects there is a new .cshtml layout file in the respective project folder, for example, ~/ResourcePackages/YourPackageName/Mvc/Views/Layouts, upon application restart, it automatically generates a new page template, based on the layout file. At a later point in time, you can modify the page template to add grid and layout widgets.

If you have a package that includes multiple layout files, corresponding page templates are automatically created for each layout file in Sitefinity CMS under Design » Page templates.

If you delete the generated page template, it is not generated again, unless you delete and then re-add the layout file while you have the Sitefinity CMS instance up and running as a process. Another option is to manually create a pure MVC page template in Sitefinity CMS that follows the naming convention. For example, if you have a ~/MVC/Views/Layouts/MyMvcLayout.chtml file, the Developer name of the template must be MyMvcLayout. If the file is inside a package named MyPackage, ~/ResourcePackages/YourPackageName/MVC/Views/Layouts/MyMvcLayout.chtml the Developer name of the template must be MyPackage.MyMvcLayout.

If you delete the layout file, the generated page template continues to exist, but is not based on anything. Later, if you add a layout file that matches the naming convention for that template, additional template is not generated and the previous template uses this layout again.

For more information about how page templates and layout files are associated to each other and some best practices, see Map page templates and layout files. //LINK

In Sitefinity CMS, pages are based on page templates. You can apply a default template to all pages on your site, or, apply specific templates to individual pages. For example, pages that serve different purposes or scenarios and therefore need different design, require different layout elements and content block configuration. Say, each page on your website has common elements, such as header with a logo and with contact information. The body contains the copy, and any sliders, sidebars, and so on. You may need a page with a sidebar navigation for browsing products in a catalog, or, you may need a specific layout for pages to downloading a trial of your products, and so on. Thus, for pages with diverse purposes and design, you use different page templates.

You can apply page templates to pages in several ways:

• Most commonly, you create and base a page template to an existing template and you modify it according to your needs. You then apply it to pages.
  For more information, see:
  • Modify page templates.
  • Create page templates in the Layout editor 
• You can apply the built-in MVC only and hybrid templates to pages but you would usually do this for demo purposes and to get acquainted with designing pages in Sitefinity CMS.
  For more information, see the Apply built-in page templates section below.

You can also create personalized versions of pages with different layout and widgets to serve different content to different types of users (user segments). For more information, see Create a personalized version of a page.  

You can base a page on a page template in one of the following ways:

• When creating the page, you choose from the set of Sitefinity CMS page templates
  For more information, see Create a page.

  NOTE: You can only select from hybrid and MVC only templates.

• Change the template of a page later

You change a template of a page in one of the following ways:

• On Pages page, click the Actions link of the page, whose template you want to change, click Template.
• In page content editing mode, click Layout button in the toolbar and, in the lower-right corner of the page, click Select another template... button.

1. Click one of the templates displayed.
   Both predefined and custom page templates are listed and you can further customize or change the layout template later.

   NOTE: MVC templates are designated with an MVC label.

2. In case you are using hybrid or Web Forms templates, you can upload your own .master file by clicking Use your own .master file.
   Select a master file from the App_Master folder and click Use Selected.
3. Click Done.
   The template is applied to the page.

You can change between different templates of the same type, for example, MVC. Placeholders with the same name or ID get the same widgets. If there is no such placeholder, new template widgets will be orphaned and you need to manually place them in another placeholder.

IMPORTANT: If you want to change the existing page template of a page, the system replaces the old template with the new one. All modifications of layout and content are preserved, and the new layout is appended to the existing.

To view and manage all templates that your website pages are based on, navigate to Design » Page templates. The Templates list provides you with details about each template, including:

You can filter the list with page templates to view just the templates for the current site, for example, or the templates you created.