Definitions and Terms
Definitions and Terms for the Adalo Builder.
This is controlled by a group of concepts/features:
- Size and Position: Where you place a component on a screen and the physical bounds that you give it
- Automatic pushing and pulling that occurs when a horizontal resizing of the screen causes components such as text to grow vertically.
- Vertical Positioning can also be affected by the “Sticky While Scrolling” feature which pins a component in place above other content as the user scrolls.
This is controlled by a group of concepts/features:
- Size and Position: Where you place a component on a screen and the physical bounds that you give it
- Width Resizing: The setting in the Layout tab that controls whether the component stays the same size or grows/shrinks with the horizontal resizing of the screen
- Anchoring: The setting in the Layout tab that controls where a given component is “anchored” to the screen. For example, a component that is “Anchored Left” will keep its distance between its leftmost edge and the left edge of the screen.
The core question you need to answer for each component on the screen is: Do I want this component to grow/shrink as the screen size changes, or do I want it to stay the same size?
Stays Fixed: Use for components that don’t grow
- Anchor Left: Use for components on the left
- Anchor Right: Use for components on the right
- Anchor Center: Use for components in the center
Scales with Screen: Use for components that grow
- Anchor Center: Use for most scaling components, especially multi-column layouts
- Anchor Left & Right: Use for a scaling column next to a fixed-width column (example below)
Note: When a component is inside a group, Scales with Screen becomes Scales with Group. This constraint tells a component that it should grow and shrink as the width of its parent group changes (more below on how you can use this for advanced layouts). Keep in mind that if its parent group is set to Stays Fixed, a component set to Scales with Group will also stay fixed because the group never scales!
Anchor Left: Use this for components you want to stay on the left side of the screen as it scales.
Anchor Right: Use this for components you want to stay on the right side of the screen as it scales.
Anchor Center: Use this for components you want to stay centered on the screen as it scales.
Visibility by breakpoints allows you to only see what you allow based on the breakpoint. For example, if a single list works on mobile but a two-column list works better on tablet and desktop, you can create this visibility setting.
Note: When you hide a component on a given breakpoint, it will be hidden even in the editor. This allows you to design for each breakpoint without being distracted by components that are only visible on other breakpoints.
The Component Tree is where you can see all the components on the selected screen. You can also reorder components by dragging and dropping components up and down in the tree.
You can add components to groups, by click and dragging a component over a group.
You can add and remove components from rectangles by clicking the rectangle's dropdown, then dropping the component into the hierarchy. Click to enlarge the image below:
Whenever a component is inside another one, we call the container component the parent, and the component inside the container a child.
There are only three types of parent components in Adalo:
- Groups
- Lists
- Rectangles (Responsive Builder only)
- Images (Responsive Builder only)
- Ellipses (Responsive Builder only)
Last modified 5mo ago