---
title: "Web Page Builder\n"
space: "ERPNext"
url: "https://docs.frappe.io/erpnext/web-page-builder"
updated: "2026-02-28"
---


> Introduced in Version 13

**Page Builder lets you quickly create web pages from pre-configured web templates.**

## 1. How to create a page using Page Builder

1. Follow the steps to [create a Web Page](/erpnext/web-page).
1. Enable full width by ticking the "Full Width" checkbox.
1. Select Content Type as **Page Builder**.
1. Click on Add Row in the Page Building Blocks Table.
1. Select a Web Template.
1. Click on the **Edit Values** button.
1. Enter values in the dialog and click on Submit.
1. Click on Save.
1. The web page will be published only when **Published** is ticked.

![New Web Page with Page Builder](/files/new-web-page-with-page-builder.png)
_New Web Page with Page Builder_

![Page Builder Edit Values Dialog](/files/page-builder-edit-values-dialog.png)
_Page Builder Edit Values Dialog_

View your Web Page by clicking on **See on Website** in the sidebar.

![Web Page](/files/web-page-with-page-builder-preview.png)
_Web Page with Page Builder_

### 1.1 Add Sections

You can add more sections to your page by adding more rows in the Page Building Blocks
table. The framework comes with a great set of Web Templates for you to create
all sorts of pages.

![More Sections](/files/web-page-with-more-sections.png)
_Web Page with another section_

![More Sections - Preview](/files/web-page-with-more-sections-preview.png)
_Web Page with another section - Preview_

### 1.2 Section Options

If you click to expand a row in the Page Building Blocks table, you have the
following additional options:

- **Add Container**: If checked, the web template will be rendered in a centered constrained box.
- **Add Space on Top**: If checked, it will add a decent amount of space above the section.
- **Add Space on Bottom**: If checked, it will add a decent amount of space below the section.
- **Add Gray Background**: If checked, it will add a gray background to the section.
- **Hide Block**: If checked, it will hide the section block.
- **CSS Class**: Add any CSS class and style it in the CSS field in the Style section.

![Section Options](/files/page-builder-section-options.png)
_Section Options_