---
title: Editing page layouts
related:
- https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/creating-portal-engine-page-templates.md
- https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/using-and-configuring-web-parts.md
- https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/adding-custom-code-to-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 structure of every [Portal Engine page template](https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/creating-portal-engine-page-templates.md) is determined by a _page layout_. Page layouts consist of **layout code** and **web part zones** that specify regions where designers can place [web parts](https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/using-and-configuring-web-parts.md). Page layouts allow you to define the basic **layout and design of your website**.
There are two general types of page layouts:
- **Custom** - used only by one specific page template.
- **Shared** - stored as separate objects that you can assign to any number of page templates. Modifying a shared layout affects all templates that use it.
## Editing layouts
To edit the layout of a page:
1. Open the **Pages** application.
2. Select the page in the content tree.
3. Switch to the **Design** tab.
4. Right-click the green template header and click **Edit layout** in the menu.
5. Modify the layout code as required.
> **Note:** **Note**
>
> When removing web part zones from a layout, make sure you remove all the web parts in the zone first.
The **Layout type** selector allows you to choose between two types of layout code:
| Layout type | Description |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ASCX | This type of layout code supports both HTML and ASP.NET markup, i.e. the same syntax that you would use to edit a standard web form or user control, including inline code and embedded controls.**Note:** **Important**: For security reasons, ASCX layouts may only be edited by users who have the _Edit ASCX_ code [permission](https://docs.kentico.com/k12sp/managing-users/configuring-permissions/configuring-design-permissions.md) for the _Design_ module. Only users with the Global administrator [privilege level](https://docs.kentico.com/k12sp/managing-users/user-management.md) can assign this permission.
You can **Insert** web part zones as control tags:
`
`
The _ZoneID_ value must be unique for every web part zone within the given layout. |
| HTML | The system processes the layout code as basic HTML. ASP.NET markup, such as controls or inline code, is not supported.
HTML layouts do not require compilation, which brings the following benefits:
Faster initial load time than ASCX layouts
You can create and modify HTML layouts even in environments where compilation of virtual objects is not possible, for example on [precompiled](https://docs.kentico.com/k12sp/deploying-websites/publishing-projects-from-visual-studio.md) websites
**Insert** web part zones into HTML layouts through the following expressions:
`
{^WebPartZone\|(id)zoneA^}
`
The value of the _id_ parameter must be unique for every web part zone within the given layout.
If you need to insert dynamic values into HTML layouts, use Kentico [macro expressions](https://docs.kentico.com/k12sp/macro-expressions.md). |
> **Tip:** **Previewing layouts**
>
> You can preview page layouts by clicking **Preview** in the header of their editing dialog. You can then write the layout code side-by-side with a preview of how the changes affect the live site version of the page.
>
> **See also**: [Previewing design changes](https://docs.kentico.com/k12sp/developing-websites/previewing-design-changes.md)
## Example - Layout code
Page layouts are composed of standard HTML elements, which means **you have full control over how the system renders the page**. You can choose between table and CSS‑based layouts.
The following sample page layout uses a table to define a two-column structure:
```html
```
The following layout code defines the same two-column structure, but using DIV elements and CSS styles:
```html
```
## Adding CSS styles to layouts
Page layouts allow you to directly define any CSS classes used within the layout code.
**Requirement**: Enable the **Allow CSS from components** setting in **Settings -> System -> Performance**.
1. Click **Add CSS styles** below the page layout's code. The **CSS styles** editor appears.
2. Enter the definitions of the required CSS classes.
3. Click **Save**.
All pages that use the layout automatically load the specified styles (in addition to the website or page‑specific stylesheet).
**See also**: [Adding CSS to page components](https://docs.kentico.com/k12sp/developing-websites/designing-websites-using-css/adding-css-to-page-components.md)
## Creating conditional layouts
When editing the code of ASCX page layouts, you can **Insert** _Conditional layout_ elements. This allows you to create flexible layouts that display content based on certain criteria. The page layout renders the content between the _CMSConditionalLayout_ tags only if the conditions specified by the properties are fulfilled.
For example:
```html
```
> **Info:** This sample layout displays one of three possible web part zones based on the roles of the user viewing the page. Gold partners see the content of the _zGold_ zone, Silver partners see the _zSilver_ zone and all other users see _zDefault_.
You can configure the following properties for conditional layouts:
| Property | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| GroupName | Allows you to group conditional layout elements together. When multiple conditional layouts use the same group name, the page only displays the first one (from the top of the code) that has its visibility condition fulfilled. |
| VisibleForDocumentTypes | Adds a visibility condition that checks if the current page is of a specific page type. Enter the value as a list of [page type](https://docs.kentico.com/k12sp/developing-websites/defining-website-content-structure/creating-and-configuring-page-types.md) code names separated by semicolons.
For example: _VisibleForDocumentTypes="CMS.MenuItem;CMS.News"_ |
| VisibleForRoles | Adds a visibility condition that checks if the user viewing the page belongs to specific [roles](https://docs.kentico.com/k12sp/managing-users/role-management.md). Enter the value as a list of role code names separated by semicolons.
For example: _VisibleForRoles="MarketingManager;ChatSupportEngineers"_
Note that users with the 'Global administrator' Privilege level bypass the condition and will always see the first layout. |
| VisibleForDeviceProfiles | Adds a visibility condition that checks if the user viewing the page matches a specific device profile. Enter the value as a list of [device profile](https://docs.kentico.com/k12sp/developing-websites/developing-websites-for-mobile-devices/creating-device-profiles.md) names separated by semicolons.
For example: _VisibleForDeviceProfiles="iPad;iPhone"_ |
| VisibleForDomains | Adds a visibility condition that checks if the site is being accessed under a specific [domain name](https://docs.kentico.com/k12sp/configuring-kentico/managing-sites/setting-domain-names-for-sites.md). Enter the value as a list of domain names separated by semicolons. |
| ActiveInDesignMode | If set to _true_, the conditional layout also evaluates its visibility condition in _Design_ mode.
**Note**: This may prevent you from working with web part zones inside the conditional layout.
_False_ by default. |
## Creating pages with shared layouts
When creating a new page, you can select the **Create a blank page with layout** option and choose from a number of predefined page layouts.
If you leave the **Copy this layout to my page template** option at the bottom of the selection dialog checked, the system creates a custom copy of the layout specifically for the page template. Otherwise the template uses the shared layout directly. If you disable the option and then modify the layout code, the changes affect all pages with templates that use the shared page layout. Leave the option enabled unless you wish to create pages with a shared layout that can be edited in one place.
### Managing shared page layouts
You can manage the pre-defined (shared) page layouts in the **Page layouts** application. When editing a layout on the **General** tab, you can modify its code and also configure the following properties:
| Property | Description |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Display name | Name of the layout displayed in the page layout list. |
| Code name | A unique name that serves as an identifier for the page layout (e.g. in the API). |
| Description | Allows you to enter an optional text description of the page layout. |
| Thumbnail | Upload field for the layout preview image. Users see this image in the page layout selection dialog when creating new blank pages. |
| Is convertible | If enabled, you can use [automatic mapping](https://docs.kentico.com/k12sp/developing-websites/developing-websites-for-mobile-devices/mapping-shared-mobile-layouts.md) to assign replacement layouts that the system loads for specific [device profiles](https://docs.kentico.com/k12sp/developing-websites/developing-websites-for-mobile-devices/creating-device-profiles.md) instead of the current layout. |
| Number of zones | Indicates how many web part zones the layout uses. The number of zones helps users find appropriate matches when mapping layouts for device profiles.
The system automatically counts the number of zones in the layout code, but you can manually override the value (for example in the case of conditional layouts or layouts that load web part zones dynamically). |
On the **Page templates** tab, you can check which templates currently use the given layout. Templates with a custom page layout are not included here, even if they were created as a copy based on the currently edited shared layout.
## Using layout web parts
You can alternatively define the layout of page templates by adding special web parts designed for this purpose — [Layout web parts](https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/working-with-layout-web-parts.md).
This approach allows you to set up the structure of page templates and add web part zones without writing or editing the page layout code. Simply create a page containing a single zone, add a layout web part, and then configure the required layout via the web part's properties dialog or even directly on the **Design** tab.