Layers & groups

Organise, reorder, group, nest, hide, lock, and restyle your elements.

The Layers panel is your bird's-eye view of every element in your design, stacked in draw order so you can see and control exactly how your dx GUI is composed. From here you reorder, nest, rename, hide, lock, group, and fine-tune the opacity of every element — the same z-order and structure that ships in your exported Lua.

Open the Layers panel

Click the Layers button to open the panel. It lists every element in your design, each row showing a thumbnail of that element so you can identify it at a glance. The list is ordered by draw order (z-order): the top row is the front-most element, drawn last and appearing above everything below it, while rows further down sit behind.

Reorder elements

Change which element draws in front by dragging a row up or down in the list. Drag a row higher to bring it closer to the front, or lower to push it further back. This is the visual equivalent of adjusting z-order — the new stacking is reflected immediately in the preview.

1. Grab the row
   Press and hold on the layer you want to move.
2. Drag to a new position
   Move it up to bring it forward or down to send it back.
3. Drop
   Release when the drop indicator sits where you want the element in the stack.

Understand drag targets

Where you drop a row decides what happens. The Layers panel recognizes three distinct drag targets so a single drag can reorder, nest, or unnest an element.

Group folders

Groups act like folders in the Layers panel. To nest an element, drop its row onto a group — it becomes a child of that group and appears indented beneath it. Groups can be expanded or collapsed to show or hide their contents, keeping busy designs tidy.

• Children of a group are indented beneath the group row.
• Expand a group to reveal its children; collapse it to fold them away.
• Drop a row onto the group to nest it; drop it at the bottom of the list to move it out of the group.

Rename a layer

Double-click a layer's name to rename it. Clear names make large designs easy to navigate and keep the exported structure readable.

Visibility and lock

Every row has an eye (visibility) toggle and a lock toggle. Use the eye to hide or show an element, and the lock to prevent it from being selected or edited on the canvas. When you hide or lock a group, the change cascades to all of its children.

The layer context menu

Right-click a layer — or click its ⋮ kebab icon — to open the context menu. It packs every per-layer action, including a live opacity control, into one place.

Grouping elements

Select multiple elements and group them into a single container. Grouping keeps related pieces together so you can move, hide, lock, and reorder them as one unit. A group can be promoted into a Blueprint window or panel when you want it to behave as a reusable, window-like structure.

1. Select elements
   Choose the multiple elements you want to combine.
2. Group them
   Group the selection into a single container.
3. Promote if needed
   Optionally turn the group into a Blueprint window or panel.
4. Ungroup later
   Break the group apart from the context menu or the inspector when you no longer need it.

Opacity

Opacity is a real property, not just a preview effect. Adjusting it — via the live slider in the context menu — scales the element's transparency both in the preview and in the exported Lua, so what you see in Easelt Builder is what your players see in game.