The pages tab is displayed when you are working with individual pages in the page builder. The following explains the various tabs and elements included within the page builder.
The pages tab (A) is displayed when you are working with individual pages.
Various tabs accessed from the Pages menu are used to customize or work with the individual components in the main menu.
As shown, the components (B) menu is opened when you work with individual pages. This menu contains groups of components for building web pages such as layout and navigation components.
Each of the tabs (B - E) is explained briefly below:
You can design individual web pages using the available components. Using the layout components, you first create a container for anchoring other components such as Buttons.
An additional partials tab provides access to any custom components. For example, if you create a standardized header menu that you want to reuse on each page of your application. Partials can be dragged and dropped onto individual pages as required.
See below for details on how partials are created based on components.
The data window contains all the input variables that you’ve created within that particular page. These input variables can be used to make components dynamic.
Component tree (D)
Using the component tree, you can review how the various components are organized on the page. You can quickly select and open the options for individual components from the components tree.
The component tree shows how the various components are nested.
Page Settings (E)
In the settings window you can change settings that are associated with the page
Page name: The name of your page is how the page will be displayed throughout the platform.
The following additional buttons are available
Convert to partial
Using the convert to partial button you can convert a component together with all nested components within it to a partial. This can then be reused within your application.
In this way, you can improve the efficiency in building web pages and the consistency across your application.
Save as new component
You can reuse customized components across all applications that you build on the Betty Blocks platform.
A pop-up window is displayed where you can define the component name and category to which you want to assign the new component.
You can also make a component available in the Block Store for use across all your applications.
Delete from page
You can delete a component that you have specified on a web page. A pop-up window requests that you confirm that you want the component deleted. All nested components are also deleted.
Component interactions are interactions with a function between components based on a certain trigger.
Click on the create new interaction button to display the available options available.
The trigger initiates the interaction. For example, when a user clicks a specified button. Additional triggers such as Change and More are also available with related options.
Select component function from the menu displayed. This is the function that is executed when the interaction is triggered.
Select target component: The component that is targeted.
Note: Only available when you are toggling or enabling or hiding etc.