---
title: Using widgets in MVC
related:
  - https://docs.kentico.com/k12sp/on-line-marketing-features/managing-your-on-line-marketing-features/personalizing-widgets-in-mvc.md
  - https://docs.kentico.com/k12sp/developing-websites/page-builder-development.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 **page builder** is a user-friendly UI feature which allows non-technical users to build pages on MVC sites using configurable widgets prepared by the developers. The page builder lets you easily display content in various ways using widgets placed inside sections, directly in the Kentico administration interface.

You can also make use of [page templates](https://docs.kentico.com/k12sp/managing-website-content/using-page-templates-in-mvc.md) to create new pages based on predefined page layouts or the content of existing pages.

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

The page builder is available in the **Pages** application on the **Page** tab of pages with [content-only page types](https://docs.kentico.com/k12sp/developing-websites/defining-website-content-structure/creating-and-configuring-page-types/creating-content-only-page-types.md).

> **Note:** **Prerequisite**
>
> A developer needs to [set up](https://docs.kentico.com/k12sp/developing-websites/page-builder-development.md) the page builder feature and prepare pages with editable areas, before you can create and manage content on an MVC site.

> **Info:** **Workflow and versioning**
>
> The content of widgets and sections is included within the scope of the [workflow](https://docs.kentico.com/k12sp/managing-website-content/working-with-pages/using-workflows.md):
>
> - Editing of widgets is restricted by the rules of the defined workflow steps
> - Content changes do not appear on the live site until the page is published (after going through the workflow approval process)
> - The system tracks saved widget changes as part of [page versioning](https://docs.kentico.com/k12sp/configuring-kentico/configuring-the-environment-for-content-editors/configuring-and-using-page-versioning.md)

The usual workflow would be as follows:

1. In the **Pages** application, open a page where the page builder is set up.
2. [Adjust sections](#working-with-sections) to achieve your desired visual layout of the page.
3. [Add widgets](#working-with-widgets) to the page to define the content.

## Working with sections

On a page where the page builder is set up, you can do the following actions with sections. 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_.
- **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/k12sp/using-widgets-in-mvc/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.

## Working with widgets

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

- **Add widgets** – Click a _blue_ 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 [Personalizing widgets in MVC](https://docs.kentico.com/k12sp/on-line-marketing-features/managing-your-on-line-marketing-features/personalizing-widgets-in-mvc.md).
- **Configure widgets** (only displayed for configurable widgets) – Click the configure button, edit the widget properties in the configuration dialog, and click _Apply_.
- **Delete widgets** – Click on a widget you want to remove and click the delete button in the upper right corner of the widget.

![Wdiget management UI elements](https://docs.kentico.com/docsassets/k12sp/using-widgets-in-mvc/widgets_UI.png "Wdiget management UI elements")

> **Note:** **Configuring widgets**
>
> Widget configuration options and property editors are implemented individually with each widget. For more information, visit your project's documentation or contact your developer.

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

> **Info:** **Storing files for use in the page builder**
>
> When editing content of widgets or sections, you can [store media files](https://docs.kentico.com/k12sp/managing-website-content/working-with-files.md) either directly as [page attachments](https://docs.kentico.com/k12sp/managing-website-content/working-with-files/page-attachments.md) or using [media libraries](https://docs.kentico.com/k12sp/managing-website-content/working-with-files/media-library-files.md). These two approaches vary in different ways:
>
> - [Page attachment files](https://docs.kentico.com/k12sp/managing-website-content/working-with-files/page-attachments.md) are associated only with a specific page. You should store media files as page attachments only if the files are considered to be a content of a particular page (e.g. a language specific variant of an image).
> - [Media library files](https://docs.kentico.com/k12sp/managing-website-content/working-with-files/media-library-files.md) are available for all pages of a particular site. You should store files using media libraries when the file content is reusable or the files are more relevant to the visual of the page than to its content (e.g. a background image used on all pages with a similar layout).
>
> This is important to remember especially when creating [page templates](https://docs.kentico.com/k12sp/managing-website-content/using-page-templates-in-mvc.md) from existing pages. New pages created from templates won't display any page attachments, because the attachments stay bound to the original pages as their content. On the other hand, template based pages will display media library files automatically.