# Manage page builder

From the page builder you can define the layout and content of page versions.

## Access the page builder

You can access the page builder by editing a page version from the following Studio areas:

- [**Site builder**](/frontend-studio/using-the-site-builder.md)
- [**Dynamic pages**](/frontend-studio/using-dynamic-pages.md)
- [**Templates > Page templates**](/frontend-studio/page-templates.md)

## Page builder interface

The page builder interface consists of four parts:

- The [menu bar](/frontend-studio/using-the-page-builder.md#menu-bar) at the top
- The [components pane](/frontend-studio/using-the-page-builder.md#components-pane) on the left
- The [layout section](/frontend-studio/using-the-page-builder.md#layout-section) in the middle
- The [preview section](/frontend-studio/using-the-page-builder.md#preview-section) on the right

![The main interface of the page builder](https://docs.commercetools.com/frontend-studio/images/empty-page-builder-overview-new.png)

### Menu bar

The menu bar displays the following commands:

- Back arrow: closes the page builder and navigates to the previous page.

- Page versions drop-down: lets you switch from one page version to another, either in the same page folder or in a different one.

- Device drop-down: lets you see the page version configuration for the selected device. For example, if a Frontend component is [configured](/frontend-studio/using-the-page-builder.md#edit-a-component) to be displayed only on mobile and tablet devices and you select desktop from the drop-down, the component is greyed out in the layout section because it is not active for desktop devices.

- **Undo**: reverts your last change.

- **Redo**: reverts your last undo action.

- **Preview**: opens the **Preview page version** dialog that displays a link and QR code to the preview. The QR code is useful when previewing your page version on a mobile device. You can also access the preview link and QR code from the [preview section](/frontend-studio/using-the-page-builder.md#preview-section).

- **Save**: saves your changes. For additional options, click the drop-down arrow and select from the following options:

  - **Save and duplicate**: saves the page version and creates a duplicate page version.
  - **Save and schedule**: saves the page version and opens the **Schedule page version** dialog.
  - **Save and make live**: saves the page version and publishes it immediately.
  - **Save and make default**: saves the page version and makes it **Default**.
  - **Save and save as template**: saves the page version and opens the **Create new page template** dialog, where you can enter the name of the page template and save the page version as a page template. To edit the page template, from the Studio home page or from the left menu, go to [**Templates**](/frontend-studio/page-templates.md#edit-a-page-template).
  - **Save and assign for review**: saves the page version and lets you assign a team member to review the changes. To learn more about page version reviews, see [Reviews](/frontend-studio/collaboration.md#reviews).

  If you edit a live page version, you cannot save changes but only publish them.

- **Publish**: directly publishes the page version. For additional options, click the drop-down arrow and select from the following options:

  - **Publish and duplicate**: publishes the page version and creates a duplicate page version.

- Comment icon: opens the [comments](/frontend-studio/collaboration.md#comments) pane.

- Version history icon: opens the [**Version history** pane](/frontend-studio/using-the-page-builder.md#version-history-pane).

### Components pane

The pane displays the [Frontend components](/frontend-development/development-concepts.md#components) that you can [add to the layout section](/frontend-studio/using-the-page-builder.md#add-a-component) to design the page version. In the pane, Frontend components are grouped by category for easier access. You can also search for a Frontend component by entering its name in the search box.

### Layout section

The layout section is divided into the **HEAD**, **MAIN**, and **FOOTER** sections. From here you can create the structure of the page version by adding layout elements, [component groups](/frontend-studio/component-groups.md), and Frontend components.

Layout elements are containers for Frontend components, they have predefined breakpoints for different devices: mobile, tablet, and desktop. The following table shows how the layout element is displayed on each device.

| Layout element | Mobile | Tablet | Desktop |
| --- | --- | --- | --- |
| 1/1 | 1/1 | 1/1 | 1/1 |
| 1/2 | 1/1 | 1/2 | 1/2 |
| 1/3 | 1/1 | 1/2 | 1/3 |
| 2/3 | 1/1 | 1/2 | 2/3 |
| 1/4 | 1/1 | 1/2 | 1/4 |
| 1/6 | 1/2 | 1/6 | 1/6 |

#### Add a layout element or a component group

To add a layout element or a component group, click **Add layout element** in the respective section and select the layout element or component group from the dialog.

![The dialog to select layout elements and component groups.](https://docs.commercetools.com/frontend-studio/images/page-builder-select-layout-element-dialog-new.png)

#### Edit a layout element

To edit a layout element, select the layout element in the layout section. Then, in the **Component settings** pane, set the configuration values in the **General settings** section:

- In the **Name** field, enter the name to be displayed on the layout element in the layout section, it helps identifying the layout element.
- From the **Layout element width** drop-down, select the [width](/frontend-studio/using-the-page-builder.md#layout-section) of the layout element.
- Set the layout element visibility by clicking the following toggles:

  - **Show on mobile**: makes the layout element visible on mobile devices.
  - **Show on tablet**: makes the layout element visible on tablets.
  - **Show on desktop**: makes the layout element visible on desktop devices.

![Entering the name of a layout element in the Name field of the Layout element settings. The layout element name is displayed in the layout section.](https://docs.commercetools.com/frontend-studio/images/page-builder-layout-element-name-settings-new.png)

#### Reorder a layout element

To reorder a layout element, drag it to the new location.

#### Duplicate or delete a layout element

To duplicate or delete a layout element, hold the pointer over it, click **More**, and select **Duplicate** or **Delete**.

#### Add a component

To add a Frontend component, you first need to [add](/frontend-studio/using-the-page-builder.md#add-a-layout-element-or-a-component-group) the layout element to contain the component if it is not present. Then, select the component from the **Components** pane and drag it to the layout element.

#### Edit a component

To edit a Frontend component, follow these steps:

1. Select the component in the layout section. Then, in the **Component settings** pane, set the configuration values in the **General settings** section:

   - In the **Name** field, enter the name to be displayed on the component in the layout section, it helps identifying the component.
   - Set the component visibility by clicking the following toggles:

     - **Show on mobile**: makes the component visible on mobile devices.
     - **Show on tablet**: makes the component visible on tablets.
     - **Show on desktop**: makes the component visible on desktop devices.

     Frontend components are fetched on the client side, even when they are hidden for the type of device in use. Components are included in the DOM, but the hidden ones are not rendered on the screen. Hiding DOM elements using CSS is a common approach to create responsive websites and the hidden DOM elements [don't affect your website's performance](https://web.dev/articles/howbrowserswork#the_render_tree_relation_to_the_dom_tree).

2. Set the configuration values in the other sections that vary depending on the selected component's [schema](/frontend-development/creating-a-frontend-component.md#create-a-frontend-component-schema).

For information on the configuration fields of Frontend components, see [Component settings](/frontend-studio/frontend-component-settings.md).

![A Frontend component selected from the layout section and the related Component settings pane open.](https://docs.commercetools.com/frontend-studio/images/page-builder-component-settings-new.png)

#### Reorder a component

To reorder a Frontend component, drag it within the same layout element or to another layout element.

#### Duplicate or delete a component

To duplicate or delete a Frontend component, hold the pointer over it, click **More**, and select **Duplicate** or **Delete**.

### Preview section

The preview is rendered from the API hub. Any restrictions set there also apply to the preview. If you have issues with your preview, check the restrictions of your site and your project's API hub.

The preview section displays the page version's preview URL and QR code. The QR code is useful when previewing your page version on a mobile device. You can also access the preview link and QR code from the [menu bar](/frontend-studio/using-the-page-builder.md#menu-bar).

The page version's preview is not related to the device you selected from the device drop-down in the menu bar, but it is related to the device you are viewing it on. For example, if you selected desktop from the device drop-down but you are displaying the preview on a mobile device, the preview will display the page version for mobile devices.

You can work from the page builder with the preview open, the changes will be reflected instantly on the preview. When you click on a Frontend component from the page builder, the component is highlighted on the preview.

When integrating a CDN with Netlify, we recommend that you set a caching rule to exclude any URL from the cache that contains `/preview/`. By doing so, your Studio page version previews are never loaded from the CDN's cache. This ensures that the Studio correctly displays the Studio preview page version content directly from the origin server.

### Version history pane

The version history pane displays previously saved versions of the page version from the last 90 days.
To restore a version, select it from the list and click **Duplicate Version**. You can then edit the duplicated version from the **Draft** section on the [Site builder](/frontend-studio/page-versions.md#manage-a-page-version).
When the version history pane is open, the page builder is locked and you cannot make any changes to the page version layout and content.

![Page builder with the version history pane expanded](https://docs.commercetools.com/frontend-studio/images/page-builder-version-history-pane.png)

## Related pages

- [Area overview page with navigation](/frontend-studio.md)
- [Previous page: Configure Project settings](/frontend-studio/managing-project-settings-in-the-studio.md)
- [Next page: Component settings](/frontend-studio/frontend-component-settings.md)