Built with Readz
LEARN MORE

Grouping Elements

Elements on your canvas can be grouped, so they behave as if they are a single element.

Grouping elements will make multiple interactions with elements that belong together easier: selecting, moving position on the canvas, copying & pasting, adding animations, and changing visibility. Another benefit of grouping is that it will trim your index list, making it more organized.

Once you created a group, you can still select and change the individual elements within your group.
Creating Groups
To start, select the element you want to contain in a group. You can select multiple elements by holding down the
Command (⌘) key. Once selected, click the 'Grouping' icon in the Layout panel on the left.
Alternatively you can create groups by using the shortcut key: ⌘G, or opening the right-click menu and selecting 'Convert to Group'.
As you can see in the example below, as blue rectangle around your selected elements will indicate the group you just created. You can now select this group with a single click.
Ungrouping
To ungroup, or remove your group, select the group and click 'Ungroup' in the Layout Panel, next to the 'Group' icon. Your group will be removed.
Selecting and moving groups
To select a group you created, simply (single-)click on it in the canvas. With a single click, you will select the whole group, i.e. the container and all the elements within the group.
When you want to move the group, by dragging or by using your arrow keys, the group will behave as a single unit: the container and all the elements in it will move.
Selecting and editing individual elements within a group
After creating a group, you can still select, move, and edit individual elements within that group:

- select the group with a single click
- when you hover over an element within the group, its borders will be shown in a grey outline
- to select the targeted element, double-click while hovering over the element
- you can now move the element around and change its layout and styling properties

Alternatively, you can also select an element within a group by selecting the element within the index.
EDITING GROUPS

Single-click : selects the group
Double-click: selects the element within the group
Double-click again: edit the element within the group
If you want to remove an element from within a group, select the element within the group by double-clicking it, and then delete it.

You can also add other elements to the group by dragging them into the group and releasing them.
Groups within groups - nesting
You can create groups within groups, and create the organization you want. As you can see in the example below, we have a group (Group 1) and within that group, we have grouped the text elements in yet another group.
Important note: creating groups can impact your layout!
When you create groups, you are impacting how browsers interpret the layout. Grouping allows you to improve the logical order of your layout.

For a detailed overview of how groups affect mobile behavior, please read the '
Guide to Mobile Layouts.
'
Contact Support
Need more help? Get in touch!
Contact support
We're available 6 a.m. to 6 p.m. PST
© 2022 Readz All Rights Reserved