# Positioning Components

*Skill Level: Beginner*

## **Before You Begin**

* Know about [Screens and Components](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/component-basics)
* You do not need a paid Adalo plan to use this feature

## Walkthrough

{% tabs %}
{% tab title="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

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FxC8m66zO8qyfo5o0XbC1%2Fcenterline.jpg?alt=media\&token=30178a50-4fdd-4a5c-9e34-a190e1d8073f)

#### Denoting small margin at top, bottom, and sides

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FReJt8f4O0DI2PIb0tBBu%2Fcorner.jpg?alt=media\&token=8b38dc8d-ddf0-4f30-a449-77a812a3fade)

#### Denoting edging alignment with other components

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FXzwOiTgBdVfdFzWXb1IY%2Fcomponent%20sides.jpg?alt=media\&token=8db2c2d8-4bd1-40ea-a577-462fc7347f55)

#### Denoting alignment with components across screens

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F4vaOwct1Kg8OXKrPlyRm%2Facross%20screens.jpg?alt=media\&token=386da53f-e4f5-4fea-894f-bf0b63fb6c87)

### 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**.
  {% endtab %}
  {% endtabs %}

## 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](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/how-to/how-to-use-keyboard-shortcuts)
* Be sure to check out our dedicated guide for [Screens](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/component-basics/inserting-and-editing-screens)
* Check out [this wonderful video](https://www.youtube.com/watch?v=oM9NwJLNI4c) 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](https://forum.adalo.com/)! 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!](https://ideas.adalo.com/tutorial-requests)