When using the Page Builder for the first time it can be pretty overwhelming, there are many different settings to keep track of. In this article, every setting within the Page Builder menu will be explained.

Page Builder menu

Design: By clicking on this button, the design tab will open. You can also open this tab by pressing the D key on your keyboard.
Variables: By clicking on this button, the variables tab will open. You can also open this tab by pressing the V key on your keyboard.
Settings: By clicking on this button, the settings tab will open. You can also open this tab by pressing the S key on your keyboard.
Object tree: By clicking on this button, the object tree tab will open. You can also open this tab by pressing the T key on your keyboard.
Undo: By clicking on this button, your last action will be undone. You can also use this function by pressing the Z key on your keyboard. When hovering over the icon a label will appear, the number of steps you can go back will be shown inside this label.
Redo: By clicking on this button, your last undo will be undone. You can also use this function by pressing on the Y key on your keyboard. When hovering over the icon a label will appear, the number of steps you can redo will be shown inside in this label.
Switch layout: When clicking on this button, the Layout modal will pop up. Within this modal, it is possible to choose another layout for the page you are currently editing.
Mobile preview: By clicking on this button, the page preview will change to a mobile screen. With this option you can see how your webpage will look on a mobile screen. It is also possible to change the preview by pressing the 1 key on your keyboard.
Tablet portrait preview: By clicking on this button, the page preview will change to a tablet screen in portrait mode. With this option you can see how your webpage will look on a tablet screen in portrait mode. It is also possible to change the preview by pressing the 2 key on your keyboard.
Tablet landscape preview:
By clicking on this button, the page preview will change to a tablet screen in landscape mode. With this option you can see how your webpage will look on a tablet screen in landscape mode. It is also possible to change the preview by pressing the 3 key on your keyboard.
Laptop preview:
By clicking on this button, the page preview will change to a laptop screen. With this option you can see how your webpage will look on a laptop screen. It is also possible to change the preview by pressing the 4 key on your keyboard.
Desktop preview:
By clicking on this button, the page preview will change to a desktop screen. With this option you can see how your webpage will look on a desktop screen. It is also possible to change the preview by pressing the 5 key on your keyboard.
Fullscreen preview:
By clicking on this button, the page preview will fit the dimensions of the screen that you are using. It is also possible to change the preview by pressing the 6 key on your keyboard.

Design tab

With the design tab you can build your webpage, Betty Blocks offers 3 types of building blocks for you webpage:

  • Components: These are the main building blocks within the Page builder. Every component serves a single purpose, like adding an image or text field.
  • Prefabs: Prefabs are easy to implement building blocks made out of components. With these prefabs you can, for instance, easily add a header or a pre-made form to your web page.
  • Partials: Partials kind of act like prefabs but they have one critical difference, while editing a partial every page that uses that partial will also be edited. This comes in real handy when having many pages with the same content.

All these types of building blocks can be implemented by dragging and dropping them to the place where you want them to be on the web page.

Components: By clicking on this button, every available component will be shown in the menu below.
Prefabs: By clicking on this button, every available prefab will be shown in the menu below.
Partials: By clicking on this button, every available partial will be shown in the menu below.
Search: When clicking on this button, the button will transform into a search bar. With this search bar you can search through the building blocks. Keep in mind that you can only search through the type of building block that is currently selected.
Category: Displays the categories for the building blocks. By clicking on the category row every building block that belongs to that category will be hidden [◀] or shown [▼].
Star []: By clicking on the star icon of a building block, that block will be favorited. By doing this a new category row called favorites will appear, every building block that has been favorited will be visible under this category but will also still be visible under its regular category.
Gear (Partial):
This icon is only visible in the partials menu, by clicking on the gear icon the "Edit partial" modal will pop up.

Edit partial

Name: Here you can change the name of the partial that you are editing.
Category:
Here you can change the category for the partial that you are editing, you can pick an already existing category or create a new one by choosing - new -.
Delete: By clicking on this button, the partial will be deleted.
Save: By clicking on this button, the partial will be saved.

Variables tab

Within the variables tab, it is possible to manage all the variables for you webpage.

New variable: By clicking on this button, the New variable modal will pop up.
Search: When clicking on this button, the button will transform into a search bar. With this search bar you can search for every variable for that webpage.
Type:
Within this section, the type of a variable is displayed. Every variable with that type will be under that section. By clicking on the arrow on the right side the variables will be shown or hidden.
Variable:
The variable row displays information about the variable. By clicking on the gear on the right side of the row the Edit variable modal will pop up. 

Variable form

With the variable form you can create or edit a variable for you webpage, most part of this form depends on which kind of property the variable will be. If you want to know how the form for a specific property looks you should take a look at this article: Variable Reference.

Context: With these radio buttons you can choose which type of variable you want to create, there are 3 options you can choose from:

  • Global: When choosing this option the variable will be a global variable, this means that the variable will be usable on every page and action within your application.
  • Input: When choosing this option the variable will be an input variable, an input variable requires an input from the user.
  • Normal: When choosing this option the variable will be a normal variable, these variables are only usable on the page or action they are created on.

Kind: Here you can choose what kind of property you want the variable to be.
Input name (Input): Here you can enter the input name for you variable. This option is only available if Input is chosen as context.
Required (Input): With this setting enabled, a value is required for the variable. This option is only available if Input is chosen as context.
Save: By clicking on this button, the variable will be saved.

Settings tab

Page online: When disabling this setting, a text box will appear under it asking for a redirect URL. When visiting this page it will redirect you to the redirect URL thus making the page itself inaccessible. If no redirect URL has been set the page will return a 404 error page.
Action enabled: By disabling this setting, the action linked to the web page won't be executed.
Open action: By clicking on this button, the action linked to the web page will be opened.
Url: When clicking on this link, the web page will be opened in another tab.
Path: By clicking on the pencil icon, you can edit the path of the webpage. The path is the extension that comes after the identifier of you application.
Description: Here you can enter a description for you webpage.
Enable page caching: By enabling this setting, the page will be cached locally on the visitor's device. This can speed up loading times but has less effect if the page is edited regularly.
Enable debug logging:
By enabling this setting, a log record will be created every time the page is visited. Keep in mind that this is only for the web page, not for its action.
Authentication profile:
If the page should require authentication you can set an authentication profile here. You can select from the authentication profiles that are created in the configurations tab.
Request variable as:
Use this to gather useful information about the request, like an IP address. More about request variables can be found in this article: What are request variables?.
Layout:
Here you can set the layout that you want the webpage to use.
Delete:
By clicking on this button, the webpage will be deleted.
Convert to HTML:
By clicking on this button, the webpage will be converted to an HTML page. This process cannot be reversed and does not work the other way around, so think twice before using this option.
Save as layout template:
By clicking on this button, the Save as template modal will pop up. By saving the layout as a template you can select it for another page to use the same layout on that page.
Save as page template:
By clicking on this button, the Save as template modal will pop up. By saving the page as a template you can select it for another page to use that page as a layout.

Save as template

This modal will first give you the option to choose a template. By choosing an existing template you can change or overwrite it. If you want to create a new template you can choose - New -. You can find the template when creating a new Page Builder page, after choosing the layout the template will be in the content section.

Label: Here you can enter a name for you template.
Category: Here you can choose the category you want the template to be found in, you can pick an existing category or create a new one by choosing Other.
Description: Here you can enter a description for your template.
Image: When clicking on the Add file button, you can choose an image to upload. The uploaded image will be used as a header image for the template. If no image is selected an image of the webpage will be used.
Save: By clicking on this button, the template will be saved.

Object tree tab

Within the object tree, it is possible to manage all the building blocks on you webpage. By hovering over a row the building block linked to it will be selected. This way you can easily find and edit building blocks. The object tree also gives you a good overview of all you nested components.

Component settings

The component settings can be accessed by selecting a component, here you can edit your component to whatever your needs desire.

Component options: Within the component options you can change the component however you'd like, what you can change depends on the component. There are 4 different options you can edit:

  • Properties
  • Styles
  • Events 
  • Data

Remove component: By clicking on this button or pressing the Backspace key on your keyboard, the component and its children will be deleted.
Convert to partial: By clicking on this button or pressing the H key on your keyboard, the Convert to partial modal will pop up, by using this feature the component with its children will be convert to a partial. After converting, the partial will be available in the partial section within the design tab.
Save as UI Prefab: By clicking on this button or pressing the G key on key your keyboard, the Save UI Prefab modal will pop up. Within this modal, it is possible to create a new prefab and to edit an existing one. After creating the prefab it will be available in the prefab section within the design tab.

Convert to partial

Name: Here you can enter the name of your new partial.
Category: Here you can choose the category for you new partial, you can pick an existing one or create a new one by choosing - New -.
Save: By clicking on this button, the partial will be saved.

Save UI Prefab

In this modal, it is possible to create a new prefab or update an existing one. If you want to update a prefab you can do this by clicking on the Update existing prefab button and then choosing the prefab that you want to update.

Name: Here you can enter the name of your prefab.
Category: Here you can choose the category for your prefab, you can pick an existing one or create a new one by choosing - New -.
Save UI Prefab: By clicking on this button, the prefab will be saved.

Did this answer your question?