Modify page templates

The Layout editor is an easy and intuitive way to create grid-like layouts for your website pages. With the Layout editor, you create and modify page templates by defining new content placeholders and reordering and resizing the elements of a page template. Thus, you modify the design of just the individual page template that you opened for editing. Since you do this in Sitefinity CMS backend, there is no need to download any layout files, edit, and re-upload them.

NOTE: When modifying a template in page editing mode, you can reorder and resize only the extra layout elements you add on the canvas and not the ones that are defined by the template.

This procedure describes how to work with the Layout editor. You can use the Layout editor to design pages and templates that use the MVC and the Hybrid mode. If you оpen for editing a .NET Core page, it will open in The new page editor.

To modify the template and thus affect the design of all pages, based on this template, you need to directly open it to modify and design it: 

1. Navigate to Design » Page Templates.
2. Click the template that you want to modify.
3. Click Layout button in the upper-right corner. 
   In the right pane of the Layout editor, there is a list of predefined layout elements.
   Depending on the type of template you are designing, you work with different types of elements.

   IMPORTANT: When working with MVC-only templates, you can only use the Grid widgets that correspond to a specific framework, and only on pages or page templates based on this framework. For example, to use the widgets from the Bootstrap grid widgets panel, the page or page template needs to be based on the Bootstrap framework. When using a hybrid template, you can use both Web Forms and MVC widgets. For more information, see Dependencies when working with hybrid page templates.

4. Drag the predefined grid widgets (MVC) or layout elements (Web Forms and hybrid) in the pink area.
   The pink area becomes yellow to suggest where you can drop a predefined element. You can use as many elements as you need to achieve the configuration you desire. You can nest layout elements. You can also edit existing elements.

   NOTE: When you create a template, you must define all the placeholders in advance. Later, when you use the template in a page, you can only drop new layout elements and widgets in already existing placeholders. For example, if in the template you want to define the header and the footer of the page, but you want to leave the main section to be designed later, you must add the placeholder for the main section when you define the template. Otherwise, you will not be able to add the main when you create the page in between the header and the footer.

   IMPORTANT: When working with MVC only templates, you can only use the grid widgets that correspond to a specific framework, and only on pages or page templates based on this framework. For example, to use the widgets from the Bootstrap grid widgets panel, the page or page template needs to be based on the Bootstrap framework. 

5. Drag the widgets inside the layout elements.
   After you define the layout, you can add widgets inside the layout elements. 
   For example, you can add the Image widget with your logo to the base template or you can add the Google Analytics widget.
   For more information, see Add widgets on pages and templates.

   NOTE: 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.

   NOTE: The widgets that you add in a template cannot be edited in the pages that use the template. If you want to be able to edit widgets, added in the template from a page that uses the template, you must branch the widgets. To do this, when you add a widget in a template, in the upper-right corner of the widget, click More » Make editable on pages.

   For more information, see Template widgets editable in pages.
6. To save your work, click Publish.

NOTE: When working with Web Forms or hybrid templates, you can resize columns, edit spaces, and apply CSS classes. For more information, see Edit layout elements in Web Forms and hybrid templates.