Arranging and Grouping Components

Arrange the layer order of components and place them in groups to better control their layout and function.

Skill Level: Beginner

Before You Begin

• Know about Screens and Components

• Know about Positioning Components on screens

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

Walkthrough

In-Depth

Arranging Components

When you initially place a component on a screen, the component is placed "on top" of all the other existing components. You can think of components as layers on a sandwich, with each component able to be moved up or down in the stack of components on screen. You can arrange components through several methods. It's easy to arrange components:

1.) Select a component, then click on the More button in the top right of the component's settings

2.) Hover over the Arrange option and a menu will flyout showing 4 different options:

• Bring to Front - This option brings a component all the way to the front/top of the components regardless of how many components are on screen.

• Send to Back - This option sends a component all the way to the back/bottom of the components regardless of how many components are on screen.

• Bring Forward - This option brings a component forward/up in the component stack one component at a time, like the rungs of a ladder.

• Send Backward - This option send a component backward/down in the component stack one component at a time, like the rungs of a ladder.

3.) Another way to arrange components is by selecting the entire screen by clicking its label, then clicking and dragging the components up or down in the left menu hierarchy. Components near the top of the list are at the front/top of the components on screen.

4.) Still another way to arrange components one layer at a time is to hold Command (Mac) or Control (PC) and press the up and down arrow keys to move the component forward and backward on the screen.

Grouping Components

Sometimes it makes sense to group components together to maintain their layout, lock their position on screen, or apply visibility rules and actions to whole groups of components. Sometimes grouping components together can also prevent them from moving around or expanding into areas they shouldn't, particularly when using rectangles as "containers" within groups. To group components:

1.) Select multiple components by either clicking and dragging a square around them, or by holding the Shift key and clicking on the components you want to group.

2.) Once you have the components selected, click on the Make Group button in the group settings on the left. You can also do this by holding Command (Mac) or Control (PC) and pressing the G key.

3.) To ungroup components, simply select the group, click on the More button in the top of the group settings on the left, then choose Ungroup. You can also use Command (Mac) or Control (PC) + G to ungroup as well.

Learn More

• You can also make single components a group.

• You can fix a group of components to either the top or bottom of the screen in the Edit Styles menu of the group settings.

• Arranging groups of components to the front and then fixing them in place is a great way to create your own custom navigation bars and menus.

• You can also arrange groups and add or remove components from them using the component hierarchy when an entire screen is selected.

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!