Page Builder
Page Builder, introduced in Version 13, enables you to build professional web pages quickly by combining pre-configured Web Templates. Instead of manually designing every section, you can assemble reusable content blocks, customize their values, and publish visually appealing pages with minimal effort.
- Create modern web pages using reusable Web Templates.
- Configure pages without writing HTML or CSS.
- Add multiple sections using the Page Building Blocks table.
- Customize spacing, background, visibility, and styling for each section.
- Publish pages directly from the Web Page document.
Page Builder is available from ERPNext Version 13 onwards and works through the Web Page DocType.
How to Create a Page Using Page Builder
Go to Website > Web Site > Web Page or search for Web Page from the Awesome Bar.
Follow these steps to create a page using Page Builder:
- Create a new Web Page.
- Enable the Full Width checkbox to allow templates to span the page width.
- Select Page Builder as the Content Type.
- In the Page Building Blocks section, click Add Row.
- Select the required Web Template.
- Click Edit Values.
- Provide the required information for the selected template and click Submit.
- Save the document.
- Enable the Published checkbox to make the page accessible on your website.
Adding Multiple Sections
A Page Builder page is composed of one or more reusable Web Templates. Each template represents an individual section of the page.
To create longer or more dynamic pages, continue adding rows to the
Page Building Blocks table. Every new row can contain a different
template, allowing you to mix banners, feature sections, testimonials,
product showcases, call-to-action blocks, and more.
- Create visually rich landing pages.
- Reuse standard ERPNext web templates.
- Arrange sections in any preferred order.
- Customize every section independently.
Section Options
Each row inside the Page Building Blocks table includes additional configuration options that control the appearance and behavior of that section.
| Option | Description |
|---|---|
| Add Container | Displays the template inside a centered container instead of using the full browser width. |
| Add Space on Top | Adds vertical spacing above the section to improve layout and readability. |
| Add Space on Bottom | Adds spacing below the section to separate it from the next content block. |
| Add Gray Background | Applies a gray background to visually distinguish the section from surrounding content. |
| Hide Block | Temporarily hides the section without deleting it from the page configuration. |
| CSS Class | Assign a custom CSS class for advanced styling through the page’s custom CSS. |
