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:

  1. Hold the Shift key and select the relevant elements.
  2. 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:

  1. Hold the Shift key and select your group and the element(s) / group(s) to add.
  2. 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:

  1. Click the Layers icon  at the top left of your Editor.
  2. Select the element you want to detach.
  3. Click the Detach from Group icon  next to the element.
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:
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:

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

Managing Your Groups in the Layers Panel

Access the Layers panel  at the top left of the Editor to view your page's groups.
When elements are in a group, you can see a Group icon  on their right:
Clicking on any element from a group selects the other elements as well and highlights them in blue:
Click again on an element from the group to manage it individually. The selected element is then highlighted in blue:

Did this help?