Editor X: Grouping Elements

5 min read

Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio

Perform actions on multiple elements using Grouping, a smart multi-selection tool. Grouping can significantly accelerate the design process as it lets you drag, resize, arrange, align and add animation to all of the associated elements at once.

Learn how to:

Creating a New Group

You can group as many elements as you need as long as they share the same parent container (e.g., stack, container box, section). The groups that you create apply to all of your breakpoints, as well as any changes made to an existing group.

To group elements:

Hold the Shift key and select the relevant elements.
Click Group.
Tip: You can also press Ctrl + G / Cmd + G in your keyboard to group the elements.

What's the difference between grouping and stacking?

Stacking ensures that your elements stay in their vertical order in every screen size, whereas grouping is an editing tool that lets you perform actions on multiple elements.
Stacking elements that are already in a group will automatically ungroup them and create a transparent container so they never overlap.

Adding Elements to a Group

You can always add more elements to a group and remove those you don't need. Another option is merging existing groups into one big group of elements.

To add elements to a group:

Hold the Shift key and select your group and the element(s) / group(s) to add.
Click Group.

Detaching an Element from a Group

If needed, you can detach specific elements from an existing group. The elements aren't removed from your site, but will no longer be associated to the group.

To detach an element:

Click the Layers icon at the top left of your Editor.
Select the element you want to detach.
Click the Detach from Group icon next to the element.

Tip:

You can also right-click the relevant element and select Detach from Group.

Editing a Single Element from a Group

Select single elements from your group to design them individually. You can move them around and change the design without affecting the entire group.

Click the relevant element in your page, then click on it again to make changes to it:

Tip:

You can also edit single elements in the following ways:

Hold the Ctrl / Cmd key in your keyboard and click the element to select it.
Open the Layers panel , select the element and click on it again.

Ungrouping Elements

You can ungroup your elements at any time. This doesn't remove the elements from your site, only their association as a group.

To ungroup elements:

Select the group in your Editor.
Click Ungroup.
Tip: You can also press Ctrl + Shift + G (PC) / Cmd + Shift + G (Mac) in your keyboard to ungroup.