Definitions and Terms
Definitions and Terms for the Adalo Builder.
App Layout Type
Your App Layout type is controlled in your . This setting can be changed at any time and determines which device types you are building for. Either Mobile Only, or for all Mobile, Tablet, and Desktop devices. We recommend that everyone start off with the Mobile Only type as you are learning Adalo.
Breakpoints
The exact width where the screen shifts from being “mobile” to “tablet” or “desktop.” See the exact sizes below.
Mobile Default: 390px Max: 719px
Tablet Min: 720px Default: 834px Max: 991px
Desktop Min: 992px Default: 1512px
Fixed Constraints
When a component is set to Stays Fixed, the component will stay fixed where it is placed.
Vertical Positioning
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.
Horizontal Positioning
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.
Layout Tab
Layout is the tab's name, where you will find advanced controls that govern how a given component will behave in response to various screen sizes. Controls such as Visibility by screen size, Scaling, Anchoring, and Sticky While Scrolling are all found in the layout tab.
There are more options in this tab when you are in Responsive Design Mode
Shared Layout Settings
Shared Layout Settings allows you to share layout settings between multiple breakpoints.
Custom Layout Settings
Custom Layout Settings allows you to customize the layout for individual breakpoints.
Width Resizing
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!
Anchored Component
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 Breakpoint
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.
Component Tree
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:
Parent and Child Components
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)
Components can be placed inside each of these components in the Components Tree.
Last updated
