How to Group Elements in Wix

Grouping elements in Wix lets you move, resize, and edit multiple components at the same time, instead of clicking each one individually. If you have a card layout with an image, a heading, and a button, grouping all three means you can reposition the entire card in one drag. This guide explains exactly how to do it, how to undo it, what the keyboard shortcuts are, and what to watch out for on mobile.

Step-by-Step Guide: How to Group Elements in Wix

The steps below apply to the Wix Classic Editor. If you are using Wix Studio, see the Studio-specific section further down. The process is slightly different.

Step 1: Log into Your Wix Account

Start by accessing Wix and log into your account. If you are new to Wix, you will need to create an account first using your email address or a social media login. If you already have an account, proceed to the next step.

Step 2: Open the Wix Editor

From your Wix dashboard, click Go to All Sites and select the site you want to edit. Click Edit Site to open the Wix Editor. Navigate to the page that contains the elements you want to group.

Step 3: Select the Elements to Group

Click on the first element you want to include, then hold Shift and click each additional element. All selected elements will be highlighted with a blue selection border. You can also click and drag across a region to select multiple elements at once.

Before grouping, consider using columns in Wix to arrange elements into a structured layout first. Grouped items within a column stay properly aligned as you resize the page.

Step 4: Group the Selected Elements

With your elements selected, group them using one of two methods:

• Right-click method: Right-click on any of the selected elements and choose Group from the context menu.
• Keyboard shortcut: Press Ctrl+G (Windows) or Cmd+G (Mac).

The selected elements are now a single group. You will see a unified selection box around all of them, and you can move or resize the entire group as one unit.

Step 5: Save and Publish Your Changes

After grouping your elements, click Publish to update your live website. Your grouped elements will appear as a single unit, making the layout easier to manage going forward.

How To Ungroup Elements in Wix

Ungrouping is just as important as grouping. When you need to edit a single element inside a group, for example, changing the text on one card without moving the image, you need to either enter the group or ungroup it entirely.

To edit a single element inside a group without ungrouping: Double-click the group to enter it. You can then click individual elements to select and edit them. Click anywhere outside the group to exit.

To ungroup completely: Click the group to select it, then use one of these methods:

• Right-click method: Right-click the selected group and choose Ungroup from the context menu.
• Keyboard shortcut: Press Ctrl+Shift+G (Windows) or Cmd+Shift+G (Mac).

After ungrouping, all elements return to their original independent state. Their positions on the page remain unchanged. Ungrouping only removes the linking; it does not move anything.

Grouping Elements in Wix Studio vs the Classic Editor

The grouping feature works in both the Classic Wix Editor and Wix Studio, but the interface is slightly different in each.

In the Classic Editor: Select elements with Shift+click, then right-click and choose Group, or press Ctrl+G. The group appears in your layers panel as a single collapsible item.

In Wix Studio: The process is the same (Shift+click to multi-select, then right-click and Group, or Ctrl+G), but Studio's interface labels the action in the Layers panel differently. In Studio, grouped elements appear under a "Group" label in the Layers panel, and you can rename the group directly in the Layers panel for easier identification on complex pages.

Studio also supports grouping within sections and repeaters, which gives more layout control than the Classic Editor. This is useful if you are building multi-column card grids.

What You Cannot Group in Wix

Not every element on a Wix page can be grouped, and this is where many users get stuck. The grouping option either disappears from the menu or silently excludes the problem element without any error message. Knowing which elements cannot be grouped saves a lot of trial-and-error.

The following element types cannot be added to a group in Wix:

• Wix Stores product galleries: Product grids, collections, and individual product pages added via the Wix Stores app cannot be grouped with other elements. They function as embedded app blocks.
• Blog feed and post elements: The Wix Blog feed widget and any post-related elements cannot be selected as part of a group. They are managed separately through the blog app.
• Wix Bookings widgets: Calendar booking widgets and service list elements from the Wix Bookings app are standalone blocks and cannot be combined into groups.
• Forms created with the Wix Forms app: Any form built using the Wix Forms builder is treated as a single app element and cannot be grouped with surrounding elements.
• Video players added via the Wix Video app: Wix Video channel elements cannot be grouped. Standard video elements added directly from the Add panel can sometimes be grouped, but Wix Video app embeds cannot.
• Other third-party app widgets: Any element installed from a third-party Wix App Market provider typically cannot be grouped. These widgets are self-contained iframes and do not interact with Wix's native grouping system.
• Strips and sections: Full-width page sections (strips) are layout containers themselves and cannot be grouped with individual elements.
• Header and footer: These are fixed layout regions and cannot be grouped with page body elements.
• Elements on different pages: You can only group elements that appear on the same page. There is no way to group items across separate pages.

What actually happens when you try to group one of these: Wix usually does one of two things. It either greys out the Group option in the right-click menu before you attempt it, or it silently ignores the incompatible element and only groups the compatible ones you had selected. There is no warning, so if your resulting group looks smaller than expected, an ungroupable element was in the selection.

The workaround: identify which element is causing the issue, deselect it, and group the remaining compatible elements. Then position the incompatible element manually relative to the group. For forms or booking widgets, place the group and the widget side by side as separate items rather than trying to force them into one unit.

Working with Nested Groups in Wix

Wix supports grouping groups inside other groups, and this is one of the most useful and least documented features of the grouping system. Nested groups give you a way to manage complex layouts without creating one unwieldy group containing dozens of elements.

Here is how nesting works in practice:

• Create your first group normally (Shift+click to select elements, then Ctrl+G).
• Create a second group from a different set of elements the same way.
• Shift+click to select both groups, then press Ctrl+G again. This creates an outer group that contains both inner groups.

When you click on the resulting structure, a single click selects the outer group. Clicking once more (or double-clicking) enters the outer group and selects the inner group. Clicking again enters the inner group, where you can select and edit individual elements. Pressing Escape at any point steps back up one level.

This layered selection behavior is what makes nested groups so practical for card-based designs. A pricing table is a good example:

• Each pricing card has a plan name, a price, a feature list, and a sign-up button. Group those four elements as "Basic Card," "Pro Card," and "Enterprise Card."
• Once each card is its own group, Shift+click all three card groups and press Ctrl+G again to create an outer group containing all three.
• You can now move the entire pricing table as one unit by dragging the outer group. To edit a single card, double-click into the outer group, then double-click into the specific card group you want to change.

One important thing to know about ungrouping: it only removes one level at a time. If you have a nested group and press Ctrl+Shift+G, only the outermost grouping is removed. The inner groups stay intact. You would need to ungroup again to dissolve those. This is usually what you want, but it catches people off guard when they expected a single ungroup to release all elements at once.

Nesting also helps with Wix's editor performance. Groups containing 15 or more elements can feel sluggish when selecting, moving, or duplicating. Breaking those into smaller nested groups keeps each individual group manageable and reduces editor lag on complex pages.

Grouping Elements on Mobile View in Wix

Grouping always happens in the desktop editor, but the results affect your mobile layout as well. Understanding how groups behave across breakpoints prevents a common frustration where the desktop looks fine but the mobile version is broken.

Here is what to know about groups and mobile view:

Groups created on desktop carry over to mobile. When you group elements in the desktop editor, that group also exists in the mobile editor. You do not need to regroup anything. The grouping itself transfers automatically.

But the layout positions do not always transfer cleanly. Mobile Wix uses different positioning logic than desktop. After grouping on desktop, elements inside the group may shift, overlap, or leave unexpected gaps when viewed in mobile. Always open the mobile editor after grouping to check the result.

In the Classic Editor, you can enter a group in mobile view by double-clicking it, then adjust individual element positions within the group for mobile separately. These mobile adjustments do not affect the desktop layout. This lets you fine-tune both views independently, but it also means you have to check and adjust both after any significant grouping change.

In Wix Studio, groups behave differently at different breakpoints. Studio uses a responsive layout system where you can set different group arrangements at desktop, tablet, and mobile widths. A group might display its elements side by side on desktop and stacked vertically on mobile, controlled by Studio's breakpoint settings. This is more powerful than the Classic Editor's approach, but it adds a layer of complexity because you may need to verify group behavior at each breakpoint, not just desktop and mobile.

Two specific situations to watch for:

• Elements that were individually positioned in mobile before you grouped them on desktop: Grouping on desktop can reset their mobile positions, because Wix recalculates the mobile layout for the group as a whole. If you had carefully arranged elements in mobile view before grouping, those mobile adjustments may be lost. Re-check and redo the mobile positioning after grouping.
• Groups that overlap other elements on mobile: Desktop layouts often use horizontal spacing that collapses awkwardly on narrow screens. A group that sits cleanly beside another element on desktop may overlap it on mobile. In the Classic Editor, switch to mobile view and drag the group to a position that works at that width.

The practical rule: group on desktop first, then open the mobile editor as an immediate next step. Do not skip the mobile check, even if the desktop result looks perfect.

When to Use Grouping vs Columns vs Containers in Wix

Wix gives you three structural tools for organizing page elements: groups, columns/grids, and containers. They are not interchangeable. Each one solves a different problem, and choosing the right one saves you a lot of rework later.

Groups are best when you want to move or duplicate a set of elements as a single unit without worrying about responsive behavior. A group does not add any background, padding, or layout logic. It just links elements together so they travel as one. Use groups when you are building a card you plan to copy across a page, or when you want to lock the relative positions of a few overlapping elements.

Columns and grids are the right choice when you need responsive layout that stacks automatically on mobile. A two-column or three-column grid in Wix will collapse into a single column on smaller screens without manual adjustment. If your layout needs to reflow for mobile visitors, start with columns rather than groups.

Containers (sometimes called boxes) are best when you want a visible boundary around a set of elements: a background color, a border, rounded corners, or internal padding. Containers also clip their contents, so elements inside stay within the box even if you resize it. Use a container when your design calls for a card with a colored background or a bordered section within a page.

In practice, you often combine all three. Build a three-column grid for the overall layout, place a container in each column for the card background, then group the image, heading, and button inside each container so you can duplicate and reposition the card unit quickly.

Benefits of Grouping Elements in Wix

Grouping elements on your Wix website makes design work faster and keeps your layouts consistent. Here are the key advantages:

Organisation

Grouping keeps related items together, making your Layers panel tidier and your layout logic clearer. A card made of an image, heading, and button is easier to manage as one group than as three separate elements scattered through the layers list.

Efficiency

Once grouped, you can move, resize, and duplicate the whole unit in one action. Here is a concrete example of how grouping speeds up building a three-column card layout:

1. Add an image element, an H3 heading beneath it, and a button below the heading for your first card.
2. Shift+click to select all three elements, then press Ctrl+G (or Cmd+G on Mac) to group them.
3. With the group selected, press Ctrl+D twice to duplicate it. You now have three identical card groups on the page.
4. Drag each group into position side by side across the page.
5. Double-click into each group to swap the image, update the heading text, and change the button label independently for each card.

The result: a three-column card section built in a fraction of the time it would take to construct each card from scratch. Grouping is what makes the duplicate-then-customize workflow possible.

Consistency

Grouped elements stay in the same relative positions as you move them, so your layout proportions remain consistent across sections. This matters especially when you are copying a design pattern to multiple pages.

Responsive Design

When you switch to the mobile editor, grouped elements often adapt better than ungrouped ones. The group is treated as a single unit for stacking and scaling purposes, which reduces the manual adjustment needed to make mobile layouts look right.

Troubleshooting: Grouping Problems in Wix

Grouping is usually straightforward, but a few situations can trip you up. Here is what to do when things do not go as expected.

You Can't Select All Your Elements

If clicking and dragging only selects some of your elements, check whether any of the missing ones sit inside a strip, section, or container that is separate from the others. Elements on different sections of a page cannot be grouped together. You can only group elements that live in the same layout region. Move all the elements you want to group into the same section first, then select and group them.

The Group Option Is Greyed Out

If the Group option in the right-click menu is greyed out, or Ctrl+G does nothing, at least one of your selected elements is a type that cannot be grouped. Common causes include Wix app widgets such as Wix Bookings, Wix Stores product grids, and Wix Events blocks. Deselect the app element, select only the standard elements (text, images, buttons, shapes), and try grouping again. You can then manually position the app widget next to the group.

Grouped Elements Look Different After Publishing

If your grouped elements look correct in the editor but shift or overlap on the published site, the most common cause is a mismatch between desktop and mobile positioning. The desktop editor and mobile editor maintain separate positions for elements. After grouping, switch to the mobile editor and check how the group appears. You may need to enter the group in mobile view and adjust individual element positions there.

Grouped Elements Moved on Mobile After Grouping

Grouping does not automatically fix mobile layout. If elements were already positioned individually in the mobile editor before you grouped them on desktop, grouping on desktop can reset their mobile positions. After grouping, always open the mobile editor and verify the group's position and internal layout. Adjust as needed within mobile view.

You Can't Find the Group in Your Layers Panel

Groups appear as a single collapsed item in the Layers panel. If you are looking for a specific group and can't find it, scroll through the layers list and look for items labeled "Group." Click the arrow to the left of any Group layer to expand it and see the elements inside. In Wix Studio, you can rename groups directly in the Layers panel, which makes them much easier to find on complex pages.

How to Group Elements in Wix: Key Shortcuts

For quick reference, here are the keyboard shortcuts for grouping in Wix:

• Group: Ctrl+G (Windows) / Cmd+G (Mac)
• Ungroup: Ctrl+Shift+G (Windows) / Cmd+Shift+G (Mac)
• Select multiple elements: Shift+click each element
• Enter a group to edit individual elements: Double-click the group
• Exit group editing mode: Press Escape or click outside the group
• Duplicate a group: Ctrl+D (Windows) / Cmd+D (Mac)
• Copy a group: Ctrl+C (Windows) / Cmd+C (Mac)
• Paste a group: Ctrl+V (Windows) / Cmd+V (Mac)

Using keyboard shortcuts speeds up the design process considerably, especially when you are building out repeated layout patterns across multiple pages.

How to Add Hover Effects to a Grouped Element in Wix

One underused feature is applying a hover effect to an entire group at once, rather than setting hover states on each element inside it separately. When you apply a hover effect to a group, every element inside animates together as a single unit. This produces a much more coordinated result than trying to synchronize individual hover effects on multiple elements.

To add a hover effect to a group in the Classic Editor:

1. Click the group to select it (a single click on the unified group, not a double-click into it).
2. Right-click the selected group and choose Add Hover Effect from the context menu.
3. Select the animation type you want (fade, zoom, slide, etc.) and set the speed.
4. Click Apply to confirm.

The hover effect now triggers whenever a visitor moves their cursor over any part of the group. All elements inside the group respond simultaneously, so a card with an image, heading, and button will all fade or zoom together on hover.

This differs from applying hover effects to individual elements inside the group. If you double-click into the group and apply a hover effect to just the image, only the image responds to the cursor. The heading and button stay static. Applying the effect at the group level is the better approach for card-style designs where the whole card should feel interactive.

One thing to note: hover effects applied at the group level do not transfer if you later ungroup the elements. If you ungroup, the hover effect is removed and you will need to reapply it to the individual elements.

How Groups Affect Wix Animations

Wix lets you apply entrance and exit animations to individual elements, but applying an animation to a group produces a noticeably different result. When you animate a group, every element inside it moves and transitions together as one unit. This creates a much more polished effect than trying to time individual animations across multiple separate elements.

To add an animation to a group:

1. Click the group to select it (a single click, not a double-click into the group).
2. Right-click and choose Add Animation from the context menu.
3. Pick an entrance effect (Fade In, Slide In, Zoom In, etc.) and set the duration and delay.
4. Click Play to preview, then Apply to confirm.

Group-level animations are particularly effective for hero sections, call-to-action panels, and feature cards. A hero section with a heading, subtext, and a button looks far more intentional when all three elements fade in together than when each one arrives at a slightly different time with its own individually configured animation.

Wix scroll animations also work on groups. You can set a group to animate as it enters the viewport while the visitor scrolls down the page. This is a good option for testimonial sections, feature grids, and content blocks you want to draw attention to progressively as the visitor moves through the page.

One thing to check: scroll animations on groups can behave differently on mobile and touch devices. The trigger points for scroll-based animations are calculated differently on touch screens, and some animations may appear to fire too early, too late, or not at all on certain mobile browsers. After setting up scroll animations on a group, always preview the page on a mobile device and test the scroll behavior before publishing. If the animation is unreliable on mobile, switching to a simpler entrance animation (triggered on page load rather than scroll position) is a safer option for that group.

How to Copy a Group to Another Page in Wix

Copying a group to a different page in your Wix site is a straightforward process, but there is one common issue that catches people off guard. Here are the steps and how to handle the problem if it comes up.

1. Click the group you want to copy to select it.
2. Press Ctrl+C (Windows) or Cmd+C (Mac) to copy it.
3. In the Wix Editor, open the Pages menu on the left side and navigate to the target page.
4. Once the target page is open in the editor, press Ctrl+V (Windows) or Cmd+V (Mac) to paste the group.

The group will appear on the target page, usually near the center of the visible canvas. Drag it into the position you want.

The common issue to watch for: copied groups sometimes lose their z-index position when pasted onto a new page. Z-index controls which elements appear in front of or behind others. If your pasted group appears underneath other elements on the target page, or if elements inside the group are layered in the wrong order, use the Arrange option to fix it.

To reset the layer order after pasting, right-click the pasted group and choose Arrange. From there you can select Bring to Front, Send to Back, Bring Forward, or Send Backward to place the group at the correct depth in the page's layer stack. If individual elements inside the group are out of order, double-click into the group and use the same Arrange options on each element.

This copy-paste method works for copying groups between pages within the same site. Copying a group from one Wix site to a completely different Wix site requires recreating the group manually, as the clipboard does not carry elements across separate Wix accounts or sites.

Grouping Elements in Wix: What to Do Next

Once you have grouped your elements, the next step is usually handling the mobile view. Open the mobile editor by clicking the phone icon at the top of the Wix Editor and check that your grouped elements stack and resize correctly on smaller screens. You may need to enter the group, select individual elements, and adjust their mobile positioning separately.

If you find that a grouped element is not responding as expected in the mobile view, ungrouping and re-grouping after setting mobile positions individually can resolve the issue. For more control over how your Wix pages are structured, see the guide on adding columns in Wix to combine grid layouts with groups for fully flexible page designs.