Positioning Components
Make use of Adalo's snap guides and keyboard shortcuts to place your components exactly where you want them.
Last updated
Make use of Adalo's snap guides and keyboard shortcuts to place your components exactly where you want them.
Last updated
Skill Level: Beginner
Know about Screens and Components
You do not need a paid Adalo plan to use this feature
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.
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:
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.
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.
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!
