Skip to main content

The Outline panel

Click the Outline icon in the top bar of the Beaver Builider editor to open the Outline panel, which lets you view and modify the structure of your page layout in an outline format:

Outline panel in the Beaver Builder editor


The Outline panel doesn't have a drag handle, but you can remove its overlap on the layout with this trick. First display the Content panel and the use the drag handle to pin it to the right of the layout, then click the Outline panel icon. It then overlays the Content panel.

Click once in any entry in the Outline panel to scroll to that element in the layout. Click twice to open that element's settings.

Open, duplicate, delete outline entries

Right-click any entry to see a list of options. Rows and columns have Open settings and Remove options. Modules have Open settings, Duplicate, and Remove options.

Move elements in the Outline panel

You can move rows, columns (except for subcolumns), and modules within the Outline panel by dragging and dropping.

Add a label that displays in Outline view

You can add a label to the Advanced tab of a row, column, or module that helps to identify its purpose in Outline view. In the following screenshot, the Outline panel shows the label Page Title that was added to a Heading module for the setting Advanced > HTML Element > Label.

Advanced tab label displayed in the Outline panel