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
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!
Last updated
