Skip to main content

​
Overview

EcomWize uses a drag-and-drop system (powered by @dnd-kit) to let you reorder sections on your page. You can drag sections directly on the canvas or use the layers panel for an alternative reordering experience.

​
Dragging sections on the canvas

1

Hover over a section

Move your cursor over the section you want to move. A drag handle (grip icon) will appear on the section, typically near the top.
2

Grab the drag handle

Click and hold the drag handle. Your cursor will change to a grabbing hand, and a ghost preview (a semi-transparent copy of the section) will appear to show what you are dragging.
3

Drag to the new position

Move the section up or down. As you drag, drop zones will appear between other sections, indicating where the section will be placed if you release.
4

Release to drop

Let go of the mouse button to drop the section into its new position. The page will instantly update to reflect the new order.
The drag handle is the small grip icon (six dots arranged in two columns) that appears when you hover over a section. Always grab the drag handle rather than clicking on the section content, which will select the section for editing instead.

​
Visual feedback during drag

While dragging, the builder provides clear visual cues:
  • Ghost element — A semi-transparent copy of the section follows your cursor, showing exactly what you are moving
  • Drop indicator — A highlighted line or gap appears between sections to show where the dragged section will land
  • Opacity change — The original section becomes partially transparent while being dragged, so you can easily tell it apart from the ghost

​
Keyboard support

You can also reorder sections using the keyboard for accessibility:
  1. Select a section by clicking on it or navigating to it
  2. Use the arrow keys to move the section up or down in the sort order
  3. The section will swap positions with its neighbor in the direction you press
Keyboard reordering uses the sortable keyboard coordinates from @dnd-kit, which means you can Tab to the drag handle and use arrow keys to change position.

​
Using the layers panel for reordering

The Layers panel provides an alternative way to reorder sections. Instead of dragging sections on the full canvas preview, you drag compact layer items in a list view:
1

Open the layers panel

Click the Layers icon in the sidebar to open the layers panel.
2

Drag a layer item

Each section is represented as a compact row showing its type name and order number. Grab the drag handle on the left side of any layer item.
3

Drop in the new position

Drag the item up or down in the list and release. The canvas will immediately update to reflect the new section order.
The layers panel is often easier to use for reordering when you have many sections or when sections are very tall. You can see your entire page structure in a compact list and make quick changes.

​
Touch support

Drag and drop works on touch devices as well:
  • Touch and hold the drag handle to begin dragging
  • Slide your finger up or down to move the section
  • Lift your finger to drop the section in its new position
The same visual feedback (ghost element, drop zones) appears on touch devices.

​
Important notes

Every reorder action is recorded in the undo/redo history. If you accidentally move a section to the wrong place, press Ctrl/Cmd + Z to undo the change immediately.
  • You can only reorder sections vertically (up and down). Sections always span the full width of the page.
  • The maximum number of sections per page is 25. Reordering does not change the section count.
  • Reordering is purely visual/structural — it does not affect the content or configuration of any section.