---
title: Using the Kentico page builder
---

> 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).

> **Info:** This page is a part of a tutorial, which you should follow sequentially, from the beginning to the end. [Go to the first page: Getting started with Kentico](https://docs.kentico.com/k12sptutorial/getting-started-with-kentico.md).

## You will learn about:

> **Info:** **Important note**
>
> Dancing Goat is a specific sample website used for the purposes of the tutorial. Your company’s website will be different, and some functionalities may also be changed.

### Page builder on Kentico MVC websites

The page builder allows you to create and manage the content of your MVC site directly in the Kentico administration interface. Page builder's UI is easy to use, and its _drag-and-drop_ editor gives you a lot of possibilities to work with your pages. You access the **page builder** on the **Page** tab.

### Creating pages with the page builder

Page builder gives you **more control over the content** than the structured content. It allows you to **build pages** or **adjust their content** as well as **layout** using configurable _MVC widgets_. Working with the _page builder_, you immediately see what the content will look like once it's published on the live site.

Developers set up the _page builder feature_ and prepare all the _MVC widgets_ you need to create a compelling website. We recommend that the **page builder** is used **on high-traffic pages** where you need to **tailor** both **content** and the **design**, such as _campaign landing pages_. With the page builder, you don't have to ask developers when you need to change the structure of the page. You **drag-and-drop** the piece of content where you need it, save the page, and you are done.

Based on your business requirements, developers enable the page builder for **the whole page** as you can see on the Dancing Goat's _Coffee samples_ page. The page builder gives you **full control over** a page's **layout and content**.

Developers can also add the page builder to a **specific part of the page**. You can see this in action on the Dancing Goat's _Home_ page. While you can adjust most of the page's content in the _page builder_ on the **Page** tab, to edit the _Our Story_ part, you need to switch to the **Content** tab and use the _structured content editor_. This setting is convenient when there is a part of your page that does not change that often and you want its layout to remain the same.

🎬 [Editing page content on the Page and Content tabs](https://docs.kentico.com/docsassets/k12sptutorial/using-the-kentico-page-builder/PageBuilder_text.webm)

The Kentico **Page builder** consists of _Editable areas, Sections_, _Page templates,_ and _Widgets_.

- All the _editable areas_ are defined by your developers. They choose which parts of the page are locked and which parts of the page the content editors can edit.
- Content _sections_ help you to pre-define the visual aspect of your website. When creating a new section, you choose how many columns you want it to have. Only after you add your section, you can start adding _widgets_.
- _Page templates_ make it easy to choose and switch between page layouts. They are suitable for creating pages with a predesigned or repeating structure, such as landing or product pages.
- _Widgets_ are components with a pre-defined structure that help you create your content. Using widgets you can upload images, edit text, or insert a call-to-action. Each _section_ can contain _multiple widgets_ in any configuration. You adjust widgets' position within the section by drag-and-dropping.

### Working with the Page builder

🎬 [Video](https://www.youtube.com/embed/OmdFp_PVVs4)

 **Task:**

You want to make your landing page more interesting for your customers. You have decided on the following updates:

- Change the text in the _Hero_ _image_ widget to "_Your weekly coffee samples are just a few clicks away!_"
- Change the call-to-action button text to _"Sign up"_.
- Bold the text _"Our previous batches"_.
- Move the _Testimonial_ widget right under the _Hero image_ widget.

 **Need help?**

Use the following steps to update your landing page.

1. Navigate to the **Pages** application, and open the _Coffee samples_ in the content tree.
2. Switch to the **Page** tab if necessary.
3. Edit your text in the _Hero image_ widget
4. Type in "_Sign up_" into the _Hero image_ CTA button.
5. Highlight the text "_Our previous batches_" to open the text editor and make it bold.
6. Click anywhere in the _Testimonial_ widget to display its properties.
7. Drag and drop the _Testimonial_ widget under the _Hero image_ widget, into the same section
8. Delete the empty section
   1. Scroll down to the _One column_ section which used to contain the _Testimonial_ widget.
   2. Hover your mouse over the section to display its properties.
   3. Click the **Delete section** button to remove the empty _One column_ section from the page.
9. Click the **Save** button.

The process described above is also illustrated by the following clip:

🎬 [Editing widgets and sections on a page in the page builder](https://docs.kentico.com/docsassets/k12sptutorial/using-the-kentico-page-builder/PageBuilderTask.webm)

**Previous page:** [Using the Pages application](https://docs.kentico.com/k12sptutorial/mvc-business-tutorial/using-the-pages-application.md) — **Next page:** [Working with files](https://docs.kentico.com/k12sptutorial/mvc-business-tutorial/working-with-files.md)

**Completed pages:** 3 of 6