Groups and Drag and Drop

Groups arrange multiple content elements as one responsive layout unit.

Group Structure

A group may contain any supported content element except another group.

Supported structure:

• Root content list
  • Individual element
  • Group
    • Individual element
    • Individual element
  • Individual element

Nested groups are intentionally not supported.

Adding a Group

1. Open the Content tab.
2. Select Add group.
3. Enter an optional group label for easier identification in the editor.
4. Configure the group layout.
5. Drag existing elements into the group or add elements and move them into it.

The group label is an editor aid and is not displayed as frontend content.

Drag and Drop

Use the move handle on an element card to:

• Reorder root-level elements
• Reorder elements inside a group
• Move an element from the root list into a group
• Move an element from a group back to the root list
• Move an element between groups

A group cannot be moved into another group.

Empty groups display a drop area for elements.

Move-up and move-down controls remain available as an alternative to drag and drop.

Group Layout

Group options include:

• Direction: horizontal or vertical
• Wrapping: enabled or disabled
• Horizontal distribution
• Cross-axis alignment
• Gap
• Width
• Mobile behavior

Horizontal Distribution

• Use template alignment
• Start
• Center
• End
• Space between

Cross-Axis Alignment

• Start
• Center
• End
• Stretch

Gap

• None
• Small
• Medium
• Large
• Custom

Custom gap supports values from 0 to 200 pixels.

Mobile Behavior

• Keep desktop layout
• Stack elements
• Stack elements in reverse order

Element Options Inside Groups

Every element supports a width preset:

• Automatic
• 25%
• 33%
• 50%
• 66%
• 75%
• 100%

Every element also supports visibility settings:

• Always visible
• Hide on mobile
• Hide on desktop