---
title: Widgets and Page Builder
related:
  - https://docs.kentico.com/documentation/business-users/digital-marketing/widget-personalization.md
  - https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder.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).

**Page Builder** is a user-friendly UI feature that allows users to build pages using configurable widgets prepared by developers. Page Builder lets you easily display various types of content using widgets directly from within the Xperience administration.

![Adding content through widgets using the page builder](https://docs.kentico.com/docsassets/documentation/widgets-and-page-builder/page_builder.png "Adding content through widgets using the page builder")

**Page Builder** is available in website channel applications in the page menu of pages that have the [Page Builder enabled](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder.md).

> **Note:** **Prerequisite**
>
> A developer needs to set up the [Page Builder feature](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder.md) and [prepare pages with editable areas](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder/create-pages-with-editable-areas.md), before you can create and manage content using this approach.

## Page Builder workflow

When working with Page Builder, you'll often use the following workflow:

1. Open a website channel application.
2. In the content tree, select the page that you want to edit.
3. Select **Page Builder** in the page menu on the right side of the interface.

   ![Page's Page Builder tab](https://docs.kentico.com/docsassets/documentation/widgets-and-page-builder/pb_tab.png "Page's Page Builder tab")
4. Make sure the page is in the _Draft_ status or another [custom workflow step](https://docs.kentico.com/documentation/developers-and-admins/configuration/workflows.md).
   - If a page is already _Published_ select **Edit page**. This transitions the page to the _Draft_ step and enables editing and re-publishing.

     ![Editing a published page](https://docs.kentico.com/docsassets/documentation/widgets-and-page-builder/create_new_version_button.png "Editing a published page")
   - When a page is _Unpublished_, you first need to select **Create new version**. This transitions the page to the _Draft_ step and enables editing and publishing.
5. [Adjust sections](#adjust-sections) to achieve your desired visual layout of the page.
6. [Add widgets](#edit-widgets) to the page to define the content.

## Adjust sections

On a page where Page Builder is set up, you can do the following actions with sections. You can watch a video or read about the actions below.

🎬 [Video](https://www.youtube.com/embed/OIhBFdRjCLQ?si=pvnEySgFtWhsCv-U)

UI elements that allow you to modify sections are gray:

- **Add sections** – Click a gray _plus_ button located on the left side of an editable area to insert a new section. The list of available sections depends on the implementation of your website.
- **Move sections** – Hover over a section and drag it by the drag handle.
- **Change section type** – You can change the type of a section to adjust the arrangement of a page. To do so, hover over the section you want to modify, click the section type button, and select the section type you want to use.
- **Configure sections** (only displayed for configurable sections) – Click the configure button, edit the section properties in the configuration dialog, and click _Apply_. Check with your site's administrators or developers for more information about the section types on your website and their properties.
- **Copy sections** – Select a section you want to copy and click the copy button in the upper right corner of the section to copy a section with all widgets in the section.
  - You can paste the copied sections onto any page that uses the Page Builder using the _Add section_ button.
  - A section can only be pasted into an editable area if all widgets in the copied section and the section itself are allowed in the area.
  - The copy feature allows you to store up to 10 sections for 12 hours.
- **Delete sections** – Hover over the section you want to remove and click the delete button in the upper right corner of the section.

![Section management UI elements](https://docs.kentico.com/docsassets/documentation/widgets-and-page-builder/sections_UI.png "Section management UI elements")

Each section defines one or more zones, where you can add widgets.

After making any changes on the page, do not forget to click the **Save** button. Changes made to the sections can be previewed in the **Preview** mode.

## Edit widgets

On a page where Page Builder is set up, you can do the following actions with widgets. UI elements that allow you to modify widgets are purple:

- **Add widgets** – Click a purple _plus_ button to insert a widget to the desired location. The list of available widgets depends on the implementation of your website.
- **Move widgets** – Click on a widget and drag it by its handle or full header to a different position.
- **Personalize widgets** – See [Personalize Page Builder widgets](https://docs.kentico.com/documentation/business-users/digital-marketing/widget-personalization.md).
- **Configure widgets** (only displayed for configurable widgets) – Click the configure button, edit the widget properties in the configuration dialog, and click _Apply_.
  - **Note**: Widget configuration options and property editors are implemented individually with each widget. For more information, visit your project's documentation or contact your developer.
- **Copy widgets** – Click on a widget you want to copy and click the copy button in the upper right corner of the widget. You can then paste copied widgets on pages built using Page Builder via the _Add widget_ functionality. This feature allows you to store up to 10 widgets for 12 hours.
- **Delete widgets** – Click on a widget you want to remove and click the delete button in the upper right corner of the widget.

![Widget management UI elements](https://docs.kentico.com/docsassets/documentation/widgets-and-page-builder/widgets_UI.png "Widget management UI elements")

Watch a short video about how you can work with Page Builder widgets.

🎬 [Video](https://www.youtube.com/embed/48suJPKWAy4?si=oABq3OK_5QRF2sod)