Explaining the Page Builder basics

In this article, you’ll learn all about the basic concepts of the Page Builder.

Sam van de Kreeke

Published: 10-06-2020

Last updated: 13-08-2020

Page Builder

The Page Builder is a drag-and-drop tool to create pages for your application. It is easy to use, and way faster than custom code when it comes to creating pages. The Page Builder uses component sets that contain all kinds of components to create the pages with. It also has its own default component set which provides many useful components that can be used to create pages right away!


Let’s start with the sidebar, the sidebar consists of four tabs; Components, Partials, Data and Page Settings. The components tab contains all the components of the component set that you’re currently using. These components can be dragged onto the canvas.


Alright, so this is the Canvas, the canvas is where all your components will be dragged onto. Once a component is dragged onto the canvas, a preview of the component is shown. But when the page is rendered, a rendered version of the component will be shown. The canvas preview and the runtime are completely separate from each other. The difference between them is that for example, the data isn’t visible in the preview, but is in the runtime. See the preview canvas as the work environment and the runtime as your final result.


And then there is hierarchy, the hierarchy is the structure that your page consists of. Components that are placed inside of another component will be deeper within the hierarchy than their parent component. Components can be of different types, there are four types to be exact. These are BODY, LAYOUT, CONTAINER, and CONTENT. If you want to know more about these component types, feel free to check out the documentation article: Conventions!

In more simple terms, these component types are restrictions to make sure that components can only be placed into the correct parent component.


These component types may be a bit too complicated. See them as layers, and these layers can be placed inside of each other. For example, a form component can be placed inside of a column component, and then another submit button component can be placed inside of the form component. Let’s zoom in on this example and explain it a bit more in detail.


When a column is dragged onto the canvas, a row is automatically added with it. You can select the row by clicking on the column first, and then by clicking the small arrow that pops up once you’ve selected the column. A row is a BODY type component and can only contain column components.


A column can either be a CONTAINER or LAYOUT type component. Either way, this means that columns can be placed inside of rows since they are BODY type components. Columns are commonly used to place other components inside of and create a certain layout for your page.


Panel components are basically styled columns that contain another row and column within them. They also have a couple different options like the title that can be set inside of the component options. A panel is a CONTAINER type component.


A button is a CONTENT type component that can only be placed inside of CONTAINER type components like columns, forms, and data components. CONTENT type components like a button should not be able to contain other components.

That’s it for the article about the basic concepts! Want to know more about the components itself? Feel free to check out the Using basic components article!


Not sure where to start?

Click here to register and start learning