How to use the overlay and actions toolbar

The EE builder interface provides an overlay that enables you to visualise your layout's structure, assists in identifying relationships between rows, columns, and modules and provides convenient access to tools and actions for configuring your rows, columns, and modules.

Overlay Outline

The Overlay outline appears when you hover over any row, column, or module in your layout, displaying only the element your cursor is currently over. This serves as a visual guide to help understand the structure of the selected row

The Overlay Outline colur changes based on your actions or content type:

- Blue: signifies the row or module being edited

- Grey: surrounds the row containing the edited column or module

- Orange: highlights global rows, columns, or modules

Empty Columns

If your layout contains empty columns, the outline will appear dashed.

Actions Toolbar

The Actions Toolbar, located in the upper left corner of the Overlay, offers quick access to key tools and actions for rows and modules.

Move

Enables you to rearrange the placement of a row or module within the layout through drag-and-drop. You can also use the Move Left or Move Right actions to quickly change the position of the column or Box module.

Settings

Enables you to access the row or module settings.

Duplicate

Creates an identical copy of the row or module. Appears in the Overlay Actions Toolbar as a clone.

Select Parent

Provides a tree view of your row structure and hierarchy, allowing you to quickly select parent and child nodes. Clicking on a node item in the tree view will open the Settings Window for that specific node. By hovering your mouse cursor over any node item, the overlay outline will change to aid in identifying the node.

Remove

Deletes the row or module, this action requires confirmation via a popup window.

Overlay Drag Handle

Drag handles on the outer edge of the overlay let you adjust the row's max-width and column width by moving the drag handle.