Positioning Components

Make use of Adalo's snap guides and keyboard shortcuts to place your components exactly where you want them.

Skill Level: Beginner

Before You Begin

• Know about Screens and Components

• You do not need a paid Adalo plan to use this feature

Walkthrough

In-Depth

Clicking and Dragging

The main method for positioning components in the Adalo Builder is simply by clicking and dragging on the components. In order for a component to be visible, it must be placed on a screen in your app. If you drag a component completely off a screen, it will be deleted, however components can partially hang off the screens in your app if need be.

Using Snap Guides

Adalo has some built-in snap guides to help you align your components both on the app screen and with other components. You'll see these guides when you select and drag around a component that has already been added to a screen (you will not see them when adding a component). The guides will appear for a few purposes:

Denoting centerline of app screen or center of other component

Denoting small margin at top, bottom, and sides

Denoting edging alignment with other components

Denoting alignment with components across screens

Movement Shortcuts

• When you have a component selected, you can use the arrow keys on your keyboard to nudge the component around in the builder. If you need larger nudges, you can hold Shift while using the arrow keys.

• You can create copies of components by holding Option (on Mac) or Alt (on PC), then clicking and dragging a component you want to copy. This also works for entire screens so that you can copy whole layouts.

• You can copy and paste specific element(s) from screen to screen by selecting the element(s), pressing Cmd + C (on Mac) or Ctrl + C (on PC) to copy the component, then selecting the new screen's label and pressing Cmd + V or Ctrl + V.

Learn More

• Sometimes it can be helpful to create temporary shapes or buttons to help you align components on your screens. You can always delete these once everything is aligned properly.

• You can also place components in groups and align, copy, or nudge whole groups of components around without changing their layout.

• Be sure to check out our dedicated guide for additional Shortcuts

• Be sure to check out our dedicated guide for Screens

• Check out this wonderful video from Mitch at PragmaFlow on some tips for placing components.

Help

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!

Do you have a tutorial or help doc request? Let us know!