Database

The screen layout functionalities described here aim to assist users in building their layouts in the Page Builder, enabling the creation of more versatile and interactive screens. Each of these functionalities provides specific tools for organizing, aligning, and managing components, ensuring a smoother and more efficient design experience. Below, each functionality is addressed separately.

2. Group Components

The "Group Components" functionality allows multiple components to be combined into a group, facilitating their movement and joint editing. This is especially useful for organizing and maintaining a cohesive design, as grouped components can be handled as a single element while retaining their specific configurations.

2.1. How to Use

Select more than one component on the screen. Right-click on one of the selected components to open the drop menu options. Choose the "Group" option to combine the selected components. From this point, the components will behave as a unit for layout purposes, but each will retain its specific configurations and functionalities.

2.2. How to Ungroup

Right-click on the group of components to open the drop menu options. Choose the "Ungroup" option to separate the grouped components.

3. Align Components

The "Align Components" functionality is an essential tool for organizing elements on the screen, ensuring a more orderly and visually appealing layout. This functionality allows components to be aligned in relation to other elements or the screen itself, providing precise control over positioning.

3.1. How to Use

Select more than one component on the screen. Right-click on one of the selected components to open the drop menu options. Choose the "Align" option to align the components following one of the options below:

Align Left: Aligns all selected components to the left, using the leftmost component as a reference.
Align Top: Aligns all selected components to the top, using the topmost component as a reference.
Center Horizontally: Aligns all selected components horizontally, based on the total distance between the topmost and bottommost components.
Center Vertically: Aligns all selected components vertically, based on the total distance between the rightmost and leftmost components.
Align Right: Aligns all selected components to the right, using the rightmost component as a reference.
Align Bottom: Aligns all selected components to the bottom, using the bottommost component as a reference.
Horizontal Spacing: Realigns the components so that they are equidistant horizontally, considering the space between the rightmost and leftmost components.
Vertical Spacing: Realigns the components so that they are equidistant vertically, considering the space between the bottommost and topmost components.

To exit the alignment mode, click on an empty area of the screen.

4. Standardize Height and Width

The "Standardize Height and Width" functionality is used to uniformize the dimensions of two or more components, ensuring a consistent appearance. This tool adjusts all selected components to the size of the largest component in width or height, as per the chosen option.

4.1. How to Use

Select more than one component on the screen. Click on one of the selected components to open the drop menu options. Select one of the following options:

Standardize Width: Adjusts the width of all selected components to match the widest component.
Standardize Height: Adjusts the height of all selected components to match the tallest component.

5. Lock Components

The "Lock Components" functionality is designed to fix components in a specific position on the screen, preventing accidental movement or alterations during the design process. This functionality is particularly useful for ensuring layout stability and consistency.

5.1. How to Use

After selecting the desired components, click on the "Lock Component" option. Note that the borders of the locked components will turn gray, indicating that they are fixed. While locked, it is impossible to change the position, height, or width of these components.

5.2. How to Unlock Components

After selecting the desired components, click on the "Unlock Component" option. The borders of the unlocked components will return to displaying squares, allowing you to move and resize the components again.

6. Freeze Components

The "Freeze Components" functionality allows certain components to remain static while the user navigates through an extended screen. This functionality is ideal for headers or navigation menus that need to remain always visible.

6.1. How to Use

Select at least one component on the screen (this also works for grouped components). Choose the "Freeze" option. The borders of the component will turn purple, indicating that the component is frozen. From now on, as the screen is scrolled, the component will remain static in the same position.

6.2. How to Unfreeze Components

Select at least one component on the screen (this also works for grouped components). Choose the "Unfreeze" option. The purple borders of the components will be disabled, and now, as the screen is scrolled, the component will follow the normal scrolling flow.