How to use element groups in website editing

In this tutorial, you’ll learn how to use element groups when editing your website.

Note

Grouping elements allows for easier repositioning of multiple components while preserving their relative layout.

Element groups are for editing convenience only. They will not appear on the live site and are not saved when using the “Save” function.

Step 1 - Create Group

To create an element group, hold down the Ctrl key and click on each element you want to include in the group.

Once selected, a solid outline will appear around the grouped elements to indicate the group has been created.

Step 2 - Rearrange Elements Inside Group (Optional)

Within a group, you can rearrange the elements by dragging them into the desired position, as long as the group is not locked.

Step 3 - Lock

To move the entire group as one unit, click the “Lock Group” button.

Note

The group menu will always be positioned to the left of the leftmost element.

If multiple elements share the same left position, it will align with the topmost among them.

Step 4 - Drag & Drop

After locking the group, you can drag and reposition it anywhere within the same section. A “Locked” label will appear in the top-right corner of the group.

Note

Element groups cannot be moved to a different section.

Step 5 - Dismantle

To dismantle a group, click the “Dismantle Group” button.

Note

Dismantling a group does not delete the elements—it simply removes the grouping.

Next steps

• add new section
• add new element
• edit elements