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.

Sticky While Scrolling

With this enabled, the component or group will not move when scrolling.

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