---
title: Using the Xperience 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).

This page is a part of the content management tutorial, which you should follow sequentially from beginning to end. If you haven't completed it yet, go to the first page: [Using the Pages application](https://docs.kentico.com/13tutorial/business-tutorial/web-content-management/using-the-pages-application.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 Xperience websites

The page builder allows you to create and manage the content of your site directly in the Xperience 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

![](https://docs.kentico.com/docsassets/13tutorial/using-the-xperience-page-builder/Pages-icon.png)

The page builder gives you **more control over the content** than the structured content. You can **build pages or adjust their content** and **layout** using configurable _sections_ and _widgets_.

Based on your business requirements, the developers set up the _page builder feature_ and prepare all the _widgets_ you need to create a compelling website. 

The page builder gives you an almost WYSIWYG experience. You **drag-and-drop** your content where you need it using widgets and save your changes. You can then immediately see what your content will look like on the live site. You can also **copy and paste** existing **widgets** together with their content to save yourself some time.

Even when you want to adjust the page's structure, you don't need to ask developers for help. Your developers can prepare sections where you can place widgets. Each section can have different properties that you can use to change the layout and the look of the page. For example, one of the properties can give you control over the number of columns. Another property can set the section's size or background, as you can see implemented in sections on the Dancing Goat's Landing page.

We recommend that you use the **page builder on high-traffic pages** where you need to **tailor** both **content** and the **design**. Typical examples of such pages are the website's _Home_ page or campaign landing pages. 

Developers can 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 enable the page builder only **for specific parts of pages**. This is showcased on the Dancing Goat's _Home_ page. You can adjust most of the _Home_ page using the page builder on the **Page** tab. But to edit the _Our Story_ part of the page, you need to switch to the **Content** tab and use the structured content editor. Our story part will likely not change often, and you don't need to personalize it. Its layout and content will remain the same most of the time. That's why developers didn't use the page builder to display its content.

🎬 [Video](https://docs.kentico.com/docsassets/13tutorial/using-the-xperience-page-builder/Page-And-Content-Tabs-1.mp4)

The Xperience Page builder consists of _Page templates_, _Editable areas_, _Sections_, and _Widgets_.

- _Page templates_ make it easy to choose and switch between page layouts. Page templates are great for creating pages with a pre-designed or repeating structure, such as landing or product pages. You can use them when you're working with the pages that use the page builder. But developers can also use them for pages with structured content. (Later in this tutorial, you'll work with templates for Dancing Goat's articles.)
- Developers define the _editable areas_ on pages. They choose which parts of the page require editing from the **Content** tab–and which parts content editors can edit using the page builder.
- Content _sections_ help you layout the visual aspect of the page. For example, you can decide how many columns your section will have. Some sections can even have more properties, as you can see in a sample animation below.
- _Widgets_ are components with a pre-defined structure that help you create your content. Using the widgets, you can upload images, edit text, or insert a call-to-action. Each _section_ can contain multiple widgets in any configuration. You adjust the widgets' position within the section by drag-and-dropping.

🎬 [Video](https://docs.kentico.com/docsassets/13tutorial/using-the-xperience-page-builder/page-builder-structure-video.mp4)

### Working with the Page builder

🎬 [Video](https://docs.kentico.com/docsassets/13tutorial/using-the-xperience-page-builder/Working-With-Xperience-Page-Builder.mp4)

 **Task:**

You want to make your landing page look more interesting, and you have decided on the following updates:

- 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. Enter "Sign up" into the _Hero image_ call-to-action button.
5. Highlight the heading "Our previous batches" to open the text editor and make the text bold.
6. Select the _Testimonial_ widget to display its properties.
7. Drag the _Testimonial_ widget under the Hero image widget into the same section
8. Delete the empty section:

   1. Go to the _1 column_ section (with brown background) that contained the Testimonial widget.
   2. Select the **Delete section** button to remove the empty _1 column_ section from the page.
9. **Save** your changes.

The following clip also illustrates the process described above:

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

**Next page:** [Working with files](https://docs.kentico.com/13tutorial/business-tutorial/web-content-management/working-with-files.md)