Skip to main content

Builder Overlay & Actions Toolbar

The Overlay Outline helps you visualise your layout's structure and determine which columns and modules relate to which rows. The Actions Toolbar is located within the Overlay Outline and provides quick access to tools and actions for configuring rows, columns, and modules.

Lime Editor  Overlay Outline

Overlay Outline

The Overlay Outline appears as a solid border around rows, columns, and modules once you launch Lime Editor . The colour of the outline varies depending on your actions or the type of content in the layout.

Overlay Outline Colors

  • A Blue outline indicates the row or module you're currently editing.

  • A Gray outline appears around the row for the column or module you're currently editing.

  • An Orange Outline appears around global rows, columns, or modules in your layout.

Empty Columns

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

Empty Columns dashed outline

Overlay Actions Toolbar

The Overlay actions toolbar appears in the upper left corner of rows and modules, giving quick and easy access to important tools and actions.

Overlay Actions Toolbar

Move

Allows you to change the position of a row or module in the layout using drag and drop. Appears in the Overlay Actions Toolbar as a move icon.

Settings

Provides access to the row or module settings. Appears in the Overlay Actions Toolbar as a wrench icon.

Duplicate

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

Row Actions (rows only)

Resets the row or column width from a drop-down menu. Appears in the Overlay Actions Toolbar as a hamburger icon.

Edit Column (columns only)

Opens a drop-down menu allowing you to edit columns. Appears in the Overlay Actions Toolbar as a columns icon.

Edit columns settings dropdown menu

  • Column Settings provides access to the column settings.

  • Move Column allows you to change the position of a column in the layout using drag and drop. This action also moves any modules inside the column.

  • Duplicate Column adds a duplicate column to the right of the current column with all of its settings and modules.

  • Delete Column deletes the column from the layout. This action requires confirmation via a popup window.

  • Reset Column Widths reverts all column widths to the default.

  • Reset Row Widths reverts all row widths to the default.

Remove

Deletes the row or module, this action requires confirmation via a popup window. Displayed in the Overlay Actions Toolbar as a close icon.

Overlay Drag Handle

Drag handles appear on the outer edge of the overlay and allow you to change the row max-width and column width by moving the drag handle.

Resize rows and columns using the drag-handles