---
title: Configuring wireframe templates
related:
  - https://docs.kentico.com/k81/developing-websites/managing-page-templates.md
  - https://docs.kentico.com/k81/developing-websites/developing-websites-using-the-portal-engine/creating-portal-engine-page-templates.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

The system stores the content of wireframes in page templates. Wireframe templates are standard [portal engine page templates](https://docs.kentico.com/k81/developing-websites/developing-websites-using-the-portal-engine.md). Each template is defined by a layout, which contains one or more zones representing separate wireframe sections. Individual zones save the content, positions, and configuration of the wireframe components.

When creating a new wireframe, users must always assign a template. There are two kinds of wireframe templates:

- **Ad-hoc** - every wireframe has its own unique ad-hoc page template. To start with a blank ad-hoc template when creating a new wireframe, choose the _Create a blank page_ option in the template selection dialog. The system automatically deletes ad-hoc templates if their associated wireframe is removed.
- **Re-usable** - allow you to store predefined wireframe content. Individual wireframes cannot use these templates directly. When a user selects a re‑usable template for a new wireframe, the system automatically creates an ad-hoc copy of the template for the given wireframe. This allows users to modify the wireframe without changing the default content of the re‑usable template.

> **Note:** [Combined pages](https://docs.kentico.com/k81/developing-websites/wireframing/managing-wireframes.md#combining-wireframes-with-standard-pages) with both standard page content and a wireframe have two separate templates assigned — one for the wireframe and the other for the actual page. These two templates are completely unrelated.

To manage the template of a wireframe:

1. Open the **Pages** application.
2. Select the wireframe page in the content tree.
3. Switch to the **Wireframe** tab.
4. Right-click the green template header at the top of the wireframe and choose one of the template‑related options in the menu:
   - **Edit layout** - allows you to modify the [layout code](#wireframe-template-layouts) of the wireframe's template.
   - **Edit template** - opens a new window where you can configure the properties of the template.
   - **Save as new template** - allows you to save the current template as a new re-usable page template, which users can then select when creating wireframes.

![Page template menu on the Wireframe tab](https://docs.kentico.com/docsassets/k81/configuring-wireframe-templates/Wireframe_Template_Menu.png "Page template menu on the Wireframe tab")

## Creating a re-usable wireframe template

By preparing custom templates, you can store frequently used patterns of wireframe content. Users can then select an appropriate template as a starting point for new wireframes, instead of building each wireframe completely from scratch.

1. Open the **Page templates** application.
2. Select the **Wireframes** category.
3. Click **New template** above the catalog tree.
4. Enter a name and description for the template.
5. Click **Save**. The template's **General** tab opens:

   - The **Template type** must be set to _Portal page_ for wireframe templates. This is the default option for new templates.
   - The **Clone as ad-hoc for new pages** checkbox does not affect the behavior of wireframe templates. The system always clones templates as ad-hoc when creating wireframes, even if this setting is disabled for the assigned template.
6. Switch to the **Layout** tab.
7. Type the template's [layout code](#wireframe-template-layouts). Include at least one wireframe zone.
8. Switch to the **Design** tab.
9. Define the template's [wireframe content](https://docs.kentico.com/k81/developing-websites/wireframing/managing-wireframes.md#defining-wireframe-content).
10. On the **Sites** tab, add all websites for which you wish to make the template available.

Users can now select the new template from the catalog when creating wireframes on the specified sites.

![Selecting a custom template for a new wireframe](https://docs.kentico.com/docsassets/k81/configuring-wireframe-templates/Wireframe_New_Template.png "Selecting a custom template for a new wireframe")

### Changing the wireframe template default category

By default, all wireframes must use templates from the _Wireframes_ category. To allow templates from another category:

1. Open the **Page types** application.
2. Edit the **Wireframe** (CMS.Wireframe) page type.
3. On the **General** tab, select a different category in the **Root page template category** property.
4. Click **Save**.

When creating wireframes, users can now select templates from the specified category and its sub­‑categories.

## Wireframe template layouts

You can create layouts for wireframe templates in the same way as standard [portal page layouts](https://docs.kentico.com/k81/developing-websites/developing-websites-using-the-portal-engine/editing-page-layouts.md). The only difference is that you need to define the web part zones in the layout as wireframe zones. Include an additional attribute according to the selected **Layout type**.

- With **ASCX** type layouts, zones are inserted as controls. To designate a zone as a wireframe section, add the _WireFrame="true"_ property to the corresponding control:

  ```html

  <cms:CMSWebPartZone runat="server" ZoneID="zoneA" Wireframe="true" />

  ```
- In the case of **HTML** layouts, web part zones are represented by special macro expressions. Wireframe zones must have the _(Wireframe)true_ parameter in addition to their _(id)_:

  ```html

  {^ WebPartZone|(id)zoneA|(Wireframe)true ^}

  ```

You can combine standard web part zones and wireframes zones within a single template layout.