The Page Builder is where you'll design all the ways that the data you entered in the Data Builder will present on your app. It's where you'll create pages and the layout for each page to showcase your data exactly as you have in mind. It's where you'll choose from over a dozen unique components to add to each page, including tables, forms, kanban boards, maps, etc., so you can display your data in the way that makes the most sense. You'll also be able to choose system components, such as menus, login buttons, sign up buttons, etc., to add to each page layout.


Let's go through the Page Builder and take a look at what each part can accomplish:



1) The list of your Layouts and Pages - Here you'll see a full list of all the layouts and pages within your app. 


*Important to note is the difference between Layouts and Pages:

Layouts- reusable layouts, including system components such as menus, login buttons, sign up buttons, headers, etc., that you can apply to multiple pages within your app.

Pages- the page structure with the rows, columns, and components that will display your data.


In the builder, Pages are organized by their layouts, which is why Layouts are bold.


The Default Landing Page is the first page you'll see when you preview your app and the first page your users will see when they visit your app. You can assign the default page by going into the Settings option of any page and clicking Yes under Default App Page.  The page that you assign as your default landing page will have a yellow star to indicate its default status.


Each page that is enabled will show a green circle. Disabled pages will show a red circle.


Pages that are password protected will show a lock symbol. 




2) Page and Layout Content- here is where the actual page content will be built and designed. The page content consists of first building your page structure with rows and columns and then adding components onto the page:




3) Add and search page/layouts- This is where you add new pages and search through your existing page:




4) Page/Layout Navigation - This is where you can set additional settings and customization for the current page:




Let's go through each option on the page/layout navigation bar.

Content-  This is the tab where you add rows, columns and components to the page:




PDF- 
Create PDF pages based on the page you're currently on: 




CSS and Javascript Tabs- 
Add custom CSS or Javascript to be applied to just this particular page. For more in-depth detail on adding custom CSS and Javascript click here: Custom CSS and Javascript:




Settings- 
This is where you can customize some page settings including: 


Name: the name which will appear for this page

Slug: the URL in address bar

Layout: Choose a header/footer layout for this page. Click here to learn more: Design Your App Layout

Default App Page: Select if this page should be the first page to load when someone visits your app

Status: Enable/Disable

Login Access: Choose who can view this page and customize the error messages. Click here to learn more: Adding Login Functionality