---
title: "Layout"
slug: "layout"
abstract: "How to use the Layout tab when designing the page layout."
---
# Layout

Use the **Layout** tab to view a schematic representation of the page layout. Each layout contains zones (such as the *header zone*, *main zone*, and *footer zone*). The zones available, and their default contents, depend on the master layout associated with the page and the [layout settings](https://doc.sitecore.com/ch/en/users/content-hub/use-a-master-layout.html "Use a master layout") applied. The *Basic* layout, for example, contains three zones: the *Header zone (left)*, the *Header zone (right)*, and the *Main zone*.

A zone is a container for [page components](https://doc.sitecore.com/ch/en/users/content-hub/page-components.html "Page components"), which represent content shown on a page. A zone can contain many components.

![Page zones](https://doc.sitecore.com/api/markdown-image/ch/en/users/content-hub/images/page_zones.png)

Each zone has the following options:

- :mdiPlus: **Component** - to add a [component](https://doc.sitecore.com/ch/en/users/content-hub/add,-modify,-or-delete-page-components.md "Add, modify, or delete page components") to the zone.
- :mdiPlus: **Row** - to add a row to the zone.
- :mdiDrag: - to drag a component to a new location.
- :mdiCogOutline: - to change row settings, column layout, and content alignment.
- :mdiContentCopy: - to create a new section within the same zone that is an exact copy of the layout settings. All values in the original layout are copied over.
- :mdiDelete: - to remove a row.

If the master layout includes zones that contain rows, those rows will be present on the page by default.

For each component, there are three additional options:

- :mdiEye: - to show or hide a component.
- :mdiCogOutline: - to lock the component settings and use the system values.
- :mdiAccount: - to specify custom component settings.
- :mdiDotsHorizontal: - to edit, duplicate, or remove a component, or to open the component settings dialog box.

To modify a page's layout:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages**.
3. On the **Pages** page, in the left pane, select the page you want to configure.
4. Click the **Layout** tab and update the layout as required.