Design new page templates

You can modify the design of an existing page template by creating your own grid and content blocks configuration. You can do so in page editing mode by clicking the Layout button and dragging layout elements in or outside the predefined template boxes. Thus, you modify the design of just the individual page that you opened for editing.

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

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. 
   The Layout editor appears. In the right pane, there is a list of predefined layout elements.
   Depending on the type of template you are modifying, 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 layout elements 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.

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.